search

styxlab / gatsby-theme-try-ghost

A Gatsby theme to build flaring fast blogs from headless Ghost CMS
MIT License
136 stars 56 forks source link

Experiencing slow loading times during infinite scroll on index page #258

Closed veccsolutions closed 3 years ago

veccsolutions commented 3 years ago

While trying to get this plugin to work I found that the infinite scroll is crazy slow. About a quarter second for each post on the main page. Looking into it, I noticed that it is generating a JSON file for every blog post. That JSON file contains the entire post and it's HTML and a bunch of other data. Is there a way of changing the JSON file that is generated to not include the extra data that doesn't look like is needed? Some of the JSON files are 50kb+ in size. Is there some other way of optimizing it for blogs with a large number of posts?

styxlab commented 3 years ago

@veccsolutions Welcome! I toned down your issue title as it gives a wrong impression about loading speeds in general. As tested in various scenarios, this repo gives you Gatsby sites that are blazing fast which I also verified with Google Lighthouse metrics. That said, you may have an uncommon use case here. Could you please link your repo and publish (temporary) Ghost content API keys, so I can verify and analyze this issue?

What seems odd, is that your JSON files are 50kb+. Those files only contain text/html and are about 2kb in size for the simple demo pages and should be around 10 - 20kb in realistic cases. So, you must have really long blog posts or a convoluted html structure. The main reason for slow loading times are typically images which are easily above 100kb, not the text in the JSON files.

Please note that the same amount of data will be loaded anyhow, but we can influence the time when the data is loaded. The general strategy of the infinite scroll feature is to load only a small number of posts during initial load (the number can be configured) and subsequent posts are then loaded from JSON files (1 file per post) when you scroll them into view. In my tests, this is much faster than loading everything upfront, but you can turn that feature off and go with the pagination option instead.

The infinite scroll could be improved, I used another strategy for the Next.js variant next-csm-ghost. Here, the full index page is loaded on initial load, but all images only get placeholders which are dynamically loaded in with an interaction observer. This approach also has the advantage of zero content-shifts. I am not sure if the same strategy can be used here, as it rests on Next.js image features, but it may be worth looking into. Maybe this is better suited for your blog site?

veccsolutions commented 3 years ago

Sorry for the delay in response. After further consideration of the project, with needing to customize a few more things and not having much knowledge with React and Gatsby and not enough time to delve deep into them I've decided to move away from doing it with Gatsby and go a different direction.