Is there a way to set up "loading: lazy" instead of default "loading: eager" for all inline images in gatsby-source-wordpress?

user_16642375 0
Viewed 332

I'm trying to decrease page loading time. Right now all images which came from Wordpress content are geting "loading: eager". In result all images are downloading immediately all together on the page. So I would like to know is there an option to set up by default "loading: lazy" for all images which come from content of gatsby-source-wordpress.

To show images I'm just using this way:

<div dangerouslySetInnerHTML={{ __html: content }} />

Gatsby v3.14, NodeJs 12.22.6, Gatsby-source-wordpress 5.14, Gatsby-plugin-image 1.14

gatsby wordpress lazy-loading
1 Answers

I think your best chance is customizing the content that is rendering the dangerouslySetInnerHTML or trying gatsby-wpgraphql-inline-images

For the first approach, a library such as html-react-parser may fit your requirements.

Instead of:

<div dangerouslySetInnerHtml={{__html: content}}/>

You will do:

<div>{parse(content, {replace: replaceMedia})}</div>

Where replaceMedia is a function that gets the nodes and replaces them by a custom markup:

const replaceMedia = node => {
  if (node.name === 'img') {
    console.log("Check the node data:", node)
    return <img src={node.attribs.src} loading="lazy" alt="Some alternative text" />
  }
};

Test it to check the data inside node and tweak it accordingly. If your images are locally set, you can even use a custom component to return a GatsbyImage.

The second approach will rely on your set up, which has not been provided in the question.

Useful resources:

user_55853710
Related