This is a repost. Initially this was posted on Medium, under the BBC's D&E blog, but I want a copy of all my articles on dev.to
For those of you that haven’t already seen, Google recently introduced native lazy loading to Chrome version 76. Now you’re probably wondering, “what the heck is native lazy loading, and is it worth adding to my site?”.
Well — that’s exactly what I’m hoping to answer for you, as I talk through my experience using it.
Lazy loading improves performance by loading resources, like images, when they’re required by the user. For example, when someone lands on your page it’ll load any images as they come into the viewport, rather than loading all of them when the page initially loads. This is beneficial because users won’t always see the images at the bottom of the page, so why make our users download all of those unnecessary
I decided to play around with implementing native lazy loading on one of our internal products at the BBC, a site that has ~3,000 active users per day. One of the most common actions on the site involves running a query which renders a list of up to 100 images — which I thought seemed like the ideal place to experiment with native lazy loading.
So, was it worth it? Yes! Adding the loading attribute to the images decreased the load time on a fast network connection by ~50% — it went from ~1 second to < 0.5 seconds, as well as saving up to 40 requests to the server 🎊. All of those performance enhancements just from adding one attribute to a bunch of images!
So we’ve seen what it can do, let’s have a look at how it works. I’ll walk through how we might implement native lazy loading for images.
It’s really easy — attaching the loading attribute, with the value of “lazy” will tell the browser to lazy load the image. Specifying the height and width will prevent any janky page layout changes as the images load.
<img src="/images/example.png" loading="lazy" width="400" height="400" />
A simple native lazy loading codepen demo (take a look at the network inspector in Chrome 76 as you scroll down the pen).
To summarise, using native lazy loading is one of the simplest ways of providing genuine progressive performance enhancements for your users. It’s not a perfect solution, but if you’re not already utilising lazy loading and have lots of images/iframes it’s definitely worth trying out — especially as it’s so easy to implement!
Have fun lazy loading!
If you found this useful, have any questions, or want more content like this, feel free to follow me on twitter!