[WordPress - Question] Implementing gatsby-image with WordPress post content

[ryancoughlin]

Description/Potential Issue

We have been porting over our company blog to Gatsby and loving it so far. We noticed a few things when loading a single post. The index page loads pretty quick (as well as when paging through other content using gatsby-paginate

It is currently hosted on Netlify and we want to try out others to rule out the potential problem.

We are loading the post content from WordPress via the API and inserting content as HTML into our template.

Question

When using content from each post is it possible to take advantage of gatsby-image to leverage lazy loading?

We are currently implementing the following:

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

The images inside of post.content have a img src that is remote and needs to be downloading when the page renders. Which got me thinking that it's the img downloading that is causing these slow loading times.

My goal is that it may help increase our loading times. It feels very sluggish as is and trying to rule out what it can be. The length of our blog posts aren't that massive and we aren't loading massive images as well that's why I am surprised by the performance.

[KyleAMathews]

Which part of loading is sluggish? Like text takes a while to show up on the screen or the images take a while?

[ryancoughlin]

Seems like the whole page. I am on a train now and when I get on a stable connection I can send a screenshot of the profiler. Also this was happening on the build version.

I noticed during development our common.js was 13.2mb (some of that is from no optimizations I am guessing).

[KyleAMathews]

Yeah, the development commons.js is complete different than the production build. Although that is unusually large still.

[AnalogMemory]

@ryancoughlin Did you ever find a solution to making post content images available for gatsby to use?

[sebastienfi]

When using content from each post is it possible to take advantage of gatsby-image to leverage lazy loading?

Currently not possible because the image you are referring to is located inside HTML Contents. But it would be awesome to be able to do so, by parsing the HTML contents with ReHype on a new function that could be called normalize.explodeHTMLToNodesWithRehype that would be launched here : https:/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/src/gatsby-node.js#L62 We are welcoming PRs !

About slow pages, check the data you are loading with GraphQL. For each property, ask yourself :

1. How much data am I loading with that call ?
2. Is this data really required on any page using that template / layout ?

Alternatively, you can use source-map-explorer on your public folder after you ran gatsby build to identify unusefull libraries and cherry pick that function.

Let us know how it goes !

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!