Lazy Loading is not a term you hear in day to day conversation (unless, for example, you spend a Friday evening with our developers). We wanted to give you an insight into what Lazy Loading is, the latest industry updates and how we have been using it to improve our client’s websites. 

What is Lazy Loading?

Lazy Loading is a general, reusable solution used in web development to defer the rendering of content until it is needed. For example, when you are scrolling down a page, the images that you cannot see on the screen will not be loaded until you scroll until they are in view.

This will help toward increasing the loading speed of a site, as it won’t be downloading all the images across the site until needed. 

The opposite is Eager Loading, where data is rendered on the spot.

What browsers support Lazy Loading?

Since 2020, all major browsers (namely Google Chrome, Mozilla Firefox and Microsoft Edge) have enabled lazy loading, giving developers a simple API to tell the browser what content should be lazily loaded. 

In March this year, Apple’s Safari released their implementation, making them the final major browser to provide support for lazy loading.¹

This means a range of great benefits for our clients

• Faster page loads
• An improvement in user experience (UX) and decreasing the likelihood of users leaving their sites due to frustration
• Saving data (helpful for 3/4g connections and users who are on lower data plans)
• An improved Google PageSpeed Insights Score

If you would like advice implementing Lazy Loading to your site or want help to improve the UX of your websites, we can help. Get in touch with Pop today. 

References

¹ https://caniuse.com/loading-lazy-attr