I've quit blogging here.
This will be removed soon.

Does image lazy loading always speed up your Website?Posted on 2016-12-12

Using image lazy loading to reduce loading time of Websites is like a mantra. Obviously it makes sense to not load all images on a page instantly on load but to load an image only if it is visible. But does this make sense always?

Optimizing this site is a passion for me. Always on the hunt for some more dispensable bytes to reduce page size. Always on the hunt for some more milliseconds to spare. It is exciting for me to discover new options. This is not my specialty, I’m just a learner.

Yesterday it was a rainy sunday. In search of further byte savings I turned my attention to jQuery. Except the contact form and the image lazy loading I do not use jQuery on this website to keep it lean.

Looking closer at the required scripts I realized that jQuery causes about 95 kB of traffic. Another 10 kB is caused by the jQuery Migrate script.  And the Lazy Load Script is about 6 kB in size. This makes a total of around 110 kB to transfer.

Except for screenshots for the images here on petersplugins.com I’m using only PNG format. Plus I’m using an image optimizer. This leads to small file sizes. All the images currently used on the homepage are in total less the 25 kB. The images on another page including some screenshots are in total about 65 kB.

It came up that the images on almost all of the pages here are causing less traffic than the lazy loading script I used yet. Taking into account that some of the images are visible immediately on page load – which means they have to be loaded without delay – I decided to completely forgo lazy loading of images. Replacing the jQuery based script with a pure JavaScript solution without any dependencies would obviate the need for the jQuery bloat. But considering that at least the header image of a page has to be loaded on page load in all circumstances plus maybe some images more, depending on the screeen size, reduces the possible savings on bytes to transfer in ways that it does not make sense for me to use lazy loading here on petersplugins.com.

Naturally the situation is completely different if you have high-resolution photos on your website. But my personal takeaway from this research is that image lazy loading not always is the optimal solution. Looking on the homepage of petersplugins.com waiver of jQuery based lazy loading reduced page size by about 85 kB. This results in an improved GTmetrix PageSpeed score of 100% (was 99% before) and an improved YSlow score of 97% (was 93% before).

Short URL to this page: http://p12.click/433NA