Performance Improvements (main page load speed)

[iamdarkle]

I have been thinking a bit about how to improve the Blog loading performance, the Blog itself is fast, the problem is when adding images, adding 20 images (first 20 posts) of high quality causes a very considerable performance drop in the main page and the loading times notice it, as the images are cropped by css this does not change their original size (mb) and therefore their loading time.

I have thought of two solutions to improve the performance regarding the images problem, probably combining both the Blog would be as fast as lightning!

Solution 1: Add a new setting for thumbnails

With this solution we would add a new URL field for the thumbnail in the post settings. This way we would have separated the article image (i.e. the image that appears inside the post) from the thumbnail images that appear on the home page.

I have "tested" this solution and the performance increases dramatically (seriously), to do this test I used the current article image setting. I changed the normal image to a natively cropped image reducing its size by more than 95%. By doing this test the load times have been greatly improved, as expected. Of course, I did this for the thumbnail test as currently if you change the article image for this, when you enter the article you will see a beautiful, horribly pixelated image.

Solution 2: Lazy loading of images

This would also be another interesting option, why do we want to load all 20 images (20 first posts) at once if on a 1080p screen we can only see 6 images at first? Deferring the loading of the rest of the images until scrolling would considerably increase the performance of the initial loading of the website.

I think that with these two solutions there would be a huge improvement, as now it is a bit annoying the dilemma of either lowering the quality of the image inside the post or losing a lot of loading speed on the main page, I can certainly say that when I did the test of the thumbnails I did not expect such a big difference, but I definitely think it's worth it.

[ctml91]

For lazy loading would recache accomplish that? I realize it's paid, and I know you've been active in the thread so are already aware of it so either it doesn't work for blog pages or I guess it doesn't accomplish everything you need?

https://discuss.flarum.org/d/20791-recache-speed-up-your-forum/332

[iamdarkle]

Yes, you are right, it should, but it doesn't for now, I discussed it with Kyrne a few months ago, the problem is that recache doesn't detect images (like the ones in the Blog) that are inside a background-image: url() only those in <img> tags so it doesn't cache them or apply lazy loading, he told me it was possible, but no idea when he will add it.

I have put it in case it is something applicable from the blog extension so all users can enjoy it, but really the most important is the Solution 1.

[ihhddis]

It's a good idea the setting for the thumbnails, with CSS I have enlarged the image inside the article so I am forced to upload higher quality images and I have noticed the change quite a lot in the loading of all the blog posts, this could be a solution.

[iamdarkle]

Yes I understand the point, however I'm not so sure what the solution is, I think the lazy loading of images in the Blog view would be a wise first step and then see if additional adjustment is needed for the thumbnails.

I say this because the problem with the additional setting of thumbnails is that they are also used to be the featured images so you can't put an image too small either.