Page Load Optimization by Progressive Image Loading (like Medium)
Ankur Vyas
3922

Great that you found the progressive image loading article useful. It’s always interesting seeing sites coming up with a use case for it and getting good results.

I have had a look at the different versions of the site you have tried out. I was expecting lazy loading to reduce the loading time way more, assuming it wouldn’t load the images that are outside the viewport. However, it seems the browser is still requesting them, so you get no gain from using it. I haven’t gone deep into the plugin implementation nor its options, but it looks like something that can be improved.

Regarding the “progressive image loading” technique, if you are already lazy loading your images it shouldn’t improve the loading time. It is actually used to improve the perceived loading time of the site by having some content in the placeholders instead of a blank area. In reality, implementing it you would incur in extra requests for the placeholders, which should result in a longer loading time.

Using jQuery’s load event you are measuring when all the resources have been loaded. That includes the <img>s included in the initial markup. In your case, you are including the full images in the markup both in the default and the lazy-loaded page, but a way smaller image as thumbnail in the “pil” version.

The best way to assess the performance of your page is to ask yourself what you want to measure. In your case that is probably the above the fold content. For this webpagetest is very useful since you can use the filmstrip view to see the amount of rendered content.

I have run the different versions through webpagetest:

These days SpeedIndex is seen as one of the best ways to assess the performance of a page. Page load time can be affected by content that is being loaded below the fold, given you longer times even if all the visible elements in the viewport are already there.