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
CodePudding user response:
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: