Improve your page speed with lazy loading

When a user opens a website, the browser has to download all the content before the user can start browsing the website. Since we live in an era where the majority of websites is quite large, this usually results in a longer load time, which leads to annoyed and unhappy users.

Web developers therefore dedicate quite a large portion of their time to optimizing the page load time. How do we achieve that? There are various optimization techniques, so we decided to present a commonly used technique called lazy loading, which we have also tested on some of our projects.

What are the benefits of lazy loading?

If we ask Wikipedia, we can find the following definition of lazy loading: Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed.

Wikipedia’s definition seems clear enough – load the content when it is needed (when the user scrolls to it) and not before. If the content is loaded on demand, the browser needs to load less content when the user opens the page, which results in a better load time. Perfect! The users visiting your website therefore only see the part of the content they need to see.

Lazy loading the non-crucial content not only results in a better user experience but also has a good impact on SEO and conversion rates, while Google uses page speed as one of the signals used by its algorithm for ranking pages.

An example of a Google page speed result with suggested tips for page load time.

The image above shows a Google page speed result where you can take a look at the suggested opportunities for reducing the page load time. In the above mentioned example, we can save up to 0.6s by deferring offscreen images.

If you want to speed up your website and are searching for ways to optimize the load time, the lazy loading technique looks like the perfect way to do it. Needless to say, we had to try it. We took one of our Magento 2 online shops and implemented lazy loading to defer the loading of offsite images.

We decided to test lazy loading on our Magento 2 shop The Athlete’s Foot.

And the results? Here they are:

In our case, deferring offscreen images resulted in satisfying page speed improvements. We did not only manage to reduce the size of the page, requests and load time, but we also improved the Google page speed score, which is always a good outcome!

After seeing this positive impact on page speed, we decided to also implement lazy load on some other Magento 2 and WordPress projects. There are a few ways in how lazy load can be implemented. For our Magento 2 projects we used Weltpixel’s LazyLoading extension, which is easy to install and works very well for products and category pages and it is also very simple to implement the functionality for custom images. For WordPress projects we usually use the lazy load library, which is available on GitHub.

If you are eager to see lazy loading in action, take a look at some of our projects:

Native lazy load

There are some interesting changes on the way for lazy loading. Chrome is introducing a new feature called the loading attribute, enabling the lazy load of an image or an iframe without using JavaScript. It will be supported by Windows, Mac, Linux, Chrome OS, Android and Android WebView platforms.

This attribute supports three values:

loading = lazy (a candidate for lazy loading)
loading = eager (load content right away)
loading = auto (equivalent to not having the loading attribute; the browser will decide whether or not to lazy load the image)

Deferred content will start loading when the user scrolls the viewport within a particular distance of the content (number of pixels) and will vary based on a few factors:

the distance is different with < iFrame > or < img >
the speed of the network
Data Saver is enabled or disabled

Loading attribute in action

We would recommend waiting until the loading attribute is in a stable release – the feature will be enabled by default starting with Chrome 75 stable, but if you are eager to test it, you can enable it in chrome://flags (turn on Enable lazy frame loading and Enable lazy image loading and restart Chrome).

Conclusion

After testing the feature on various Magento 2 and WordPress shops, we can conclude that the lazy load technique can help you improve your website load time, SEO and conversion rates – plus, your visitors will be satisfied with the experience your shop offers.

If you are searching for additional useful techniques on how to optimize your website or your Magento 2 online store, take a look at our post on image compression, the post on custom cache type or our post on tips and improvement hacks; we’re sure you’ll find something useful that can help you out.

However, if all this is too overwhelming, you can always stop by for a cup of coffee and, together, we can find a solution for optimizing the load time of your website! :)

Nina Lah

You won’t find Nina in our offices anymore, but we know that no matter where she is now, she is doing a phenomenal job. We’ve kept a piece of them with us as a memory. :)

What are the benefits of lazy loading?

Native lazy load

Loading attribute in action

Conclusion

Nina Lah

Don’t miss out on similar articles

Kafka: Unleashing the power of real-time data streaming

Connecting the Dots: Ideas for Data Synchronization

All roads lead to Škofja Loka

Improve your page speed with lazy loading

What are the benefits of lazy loading?

Native lazy load

Loading attribute in action

Conclusion

Share this entry

Nina Lah

Don’t miss out on similar articles

Kafka: Unleashing the power of real-time data streaming

Connecting the Dots: Ideas for Data Synchronization

All roads lead to Škofja Loka