[Resolved] Issues with blog Load More loading speed

[George]

I am not happy with the speed with which the Load More button loads more posts underneath the existing ones, for example at my homepage using a column blog layout. I am on a basic shared SiteGround hosting but still believe speed could be better. I also use Autoptimize, Cloudflare(Free) and WP Rocket. The post images are imported automatically through a script from YouTube and are typically 640X480px, around 45kb each, on average. Images are also automatically optimized with WP Smush. Also I see that it’s not actually preloading or anything like that. I have simulated the Load More functionality in slower networks and I can see that the delay is not because of any images loading because once the container expands, then the images start to be visible progressively. I have a feeling that it is the ajax call that is slow and that it would be faster if I was to use normal pagination. I used to Load More 20 posts at a time but that was too slow so I brought it down to 10 but still I am not happy with the speed. Is there anything I can do?

Also because of the fact that the blog column layout loads the original images which are then get resized with CSS into smaller thumbnails, I have a zero score on the Serve scaled images section of GMetrix page speed tool. I don’t know if this can be solved since the original version of the images are needed in case the blog gets resized into one column in which case the original image is displayed on the grid. Is there a way to optimize how the images are loaded on the browser at all?

[Tom]

The way the AJAX works is it makes a call to the next page of posts, exactly like a static link would when you click it.

Once that next page responds, the jQuery will grab the items and append them to the page.

Unfortunately there’s not much more the jQuery can do to speed things up. The faster the next page loads in general, the faster the AJAX call will be.

[George]

Hi Tom, what do you mean when you say “The faster the next page loads in general, the faster the AJAX call will be.” There is no next page that loads when you have a Load More button. Would it be possible to have posts loading in the background so that when I click on the Load More button they are already preloaded?

[Tom]

The AJAX calls requests the next page of posts, exactly like it does when you click the “Next” link to load the next page.

Basically, the AJAX call should take the same amount of time as it takes to load the next page manually.

I don’t believe pre-loading is possible unfortunately.

[George]

Ok thanks Tom, turns out that a combination of Autoptimize and another caching plugin was somehow affecting the Load More speed. I removed all caching plugins and let Autoptimize do it’s job and now it’s much better. Those caching plugins suck big time!

[Tom]

Yea, I never use them. Server caching is much better 🙂

[Author]

Posts