How to natively lazy load images on your website to improve performance

Written by

Walter G.

Published on

June 20 2020

Most websites are heavily comprised of images and photos these days. And the camera resolutions are only getting better. Images used to be in the hundreds of kilobytes and these days, megabytes are becoming the norm. While this makes for a much more attractive web browsing experience, it also comes at a cost. Each time that you load a webpage, you are essentially loading the entire page all at once file by file.

In the past, clever programmers came up with ways to improve performance in this respect by deferring loading the src attribute of an <img until it appeared near the current viewport positioning.

This involved some clever scroll tracking and dynamic src injection. And while that is still a valid option, and not one to rule out, there is now a simpler way that is getting introduced into the specification. Say hello to native lazy loading.

What is lazy loading?

Lazy loading is a technique in web development in which "non-critical" components defer loading until they are needed by the page. Think along the lines of scrolling through a page and having the images pop into view as you scroll downward. What you normally see these days isn't "true" lazy loading. Many times websites will fully load at run time and hide the elements using CSS until they are scrolled through.

Real lazy loading however will actually defer loading these elements, as in these resources will not be loaded into the DOM, until a set time. This can vastly improve your websites initial load times, which has been shown to increase overall user time on site and retention.

Running a recent performance test on this blog, the following was flagged as an area of improvement.

If you are interested in more of this blogs performance insights, check out this post where I break that down further.

What are the benefits

Why is it important? Because we are a wasteful tech bunch. When you visit a website these days, we don't really feel any impact to either our bandwidth or to our time. We browse and click on links and move on with our day. But in reality, data, electricity, bandwidth is being used up. And most of this data, you will never get to look at. Either there's just too much, or you bounce in and out of pages too quickly.

The key benefit is the initial page load time is vastly improved. Many users on a website will never make it to the bottom of the page. And we all know that there is plenty of content down there. Everything from related posts, to the profile pictures in the comments section.

They will read the line that they are looking for and continue on with their web surfing. So while your website might not feel a direct impact, aside from bandwidth costs, your users can definitely benefit.

Native lazy loading

The relatively good news is that browsers are starting to support native lazy loading. What this means for you the programmers are that you will spend less time coming up with clever ways to load images dynamically and more time in designing web applications.

In the past, you had to track the position of the scroll location and load content based on your best approximation of when to load it. And you could (and still can) do that by populatig the src property on demand.

You can now simply add the loading attribute to your elements and set the value to the appropriate "lazy".

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

Note that you can use the loading attribute on different elements. Images and iframes are important because they are relatively high on the resource usage list.

The loading attribute can take on any of the following values.

- auto - This is the default behavior of the browser and akin to not having it on the element.
- lazy - This will defer loading the resource until some calculated distance from the viewport
- eager - Loads the resource immediately (what we are trying to avoid). Unless there is a reason to pre-load the content.

You may think that the auto value would load content immediately, but this is up to the browser implementation. Chrome for example may or may not load resources based on various factors, such as positioning on page and the importance that it deems it to have. How does it deem items as important?

The distance threshold

Any content that is above the fold will load normally when the page loads. Anything below that line, will load based on a specific distance threshold that are affected by different environemntal factors, such as:

- The type of resource being fetched (image or iframe)
- The type of user connection
- Whether the user is using Lite mode in their browser

This is prone to change in the future as the specification matures and gets adopted by the many different browsers.

Important notes on lazy-loading

This is still early in its infancy and not fully supported on every modern browser. Firefox for example is yet to fully support it though it seems like the feature is gaining popularity.

As of Chrome 76, you can expect the loading attribute to function as expected and continuously getting updated.

In order to avoid the weird flicker that comes with loading images dynamically on a page, manually set a given width and height to your image resources.

While not a deal breaker in terms of site improvements and performance, as image resizing might be more important, it is definitely more relevant these days as mobile web browsing grows in popularity. Because it is relatively simple to implement and because the overall performance hit from the engine is relatively low, this is definitely on my list of recommendations for site improvement this year.

Comments

No messages posted yet

Add comment