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.
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).