Lazy Load XT
February 16, 2015If you work with a lot of images, performance issues can quickly add up and become pretty complicated to tackle. Lazy Loading is one popular technique how we can approach this and with Lazy Load XT there seems to be a new solution which also supports things like srcset, horizontal scrolling or video elements.
Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times.
Just recently i implemented jQuery Lazy Loading on a portfolio page and we were able to bring the pagesize down to some kilobytes (until first render) from what was around 4MB and even over 16MB on retina screens. The site was built some years ago, so srcset or <picture> elements weren’t an option and we used retina.js which was quite fast, but loads the small version and then the retina version on top. Not ideal, i know.
So, lazy loading was a great help in reducing all that, but when implementing it i struggled not only with some possible negative SEO implications (which i’m still trying to fully understand) but also it was very hard to combine retina.js with the jQuery Lazy Loading.
Lazy Load XT is a new script which uses jQuery, Zepto.js or DomTastic to deliver lazy loading functionality and it includes srcset support as well as many other of the things i missed. Also, i like the modular way it is built which let’s you choose which plugins or extensions you need and thus let you save some more kb’s from your bottom line.