- Published on
Lazy Loading: The key of faster pages
- Authors
- Name
- Nico Bistolfi
- @nicobistolfi
Lazy Loading: The key of faster pages
If what you are looking for is to achieve a better user experience in your web application, we know that optimizing images is a great and almost essential starting point. Given the fact that images are one of the most resource-heavy elements of a website, they usually slow down front-end load time.
The key question that pops up here is, how can you achieve faster page load times then? Reducing image size and using lazy loading is the way to go 😃
What is lazy loading of images?
Nowadays, a website without images is impossible to imagine; they are absolutely critical for every website and application. So if you wish to improve the page load time and reduce the page size, while still keeping the images on the page, you should go for the lazy loading technique.
By deferring image loads until they are needed, lazy loading helps improve the time it takes for a web page to load. To put it in another way, you can load images only as they appear in your visitors browser.
Which are the benefits of using lazy loading?
We can list 3 main advantages:
- Performance improvement
With lazy loading you reduce the initial load time of the images. So the page becomes usable much sooner as compared to one that doesn't use this technique.
- Cost reduction
There is a price charged for image delivery, based on the number of bytes transferred. But if the image is not visible, it never gets loaded, nor charged! So as a result you reduce the total bytes delivered on the page, especially in the case of those users who bounce off the page or interact with only the top proportion of the page.
- Bandwidth conservation
Lazy loading conserves bandwidth by delivering content to users only when it is requested.
Lazy loading background images
To load a CSS background image, the browser has to build the DOM tree and the CSSOM tree to decide if the CSS style applies to a DOM node in the document. In the case that the CSS rule specifying the background image does not apply to an element in the document, then the background image is not loaded by the browser. But if the CSS rule is applicable to an element in the document, then the browser loads the image.
To put it simply, the browser is tricked into not applying the background-image CSS property to an element, till that element comes into the viewport.
Avoid lazy loading all the time!
This is a common mistake because it’s super tempting to think that deferring image loads is good all the time. Let’s not forget that you can have too much of a good thing too!
Lazy loading will most likely reduce the initial page load, but it may also result in a bad user experience if some images are deferred when they should not be.
Some general principles to identify which images should be lazy loaded:
- Any image that is at the beginning of the webpage, or present in the viewport, should probably not be lazy loaded. This is true for any header image, logos, marketing banner or really anything that the user would see when initially landing on a page.
- Mobile and desktop devices have different screen sizes, so a different number of images will be visible on the screen initially. Then, you need to take the device that’s being used into account, so as to decide which resources to load up front and which to lazy load.
- Any image that is slightly off the viewport in the initial load should not be lazy loaded.
- If the page is short, this means it may be just a single scroll or a couple of scrolls, or perhaps there are less than five images outside the viewport. In these cases, there is probably no need to lazy load at all!
Testing lazy loading
Once lazy loading has been implemented, you will probably want to check that it’s working as it should be. If you want to go for the simplest way, follow these path:
- Open up the developer tools in your browser.
- From there, go to Network > Images. When you refresh the page for the first time, you should only see loaded images in the list.
- Then, as you start scrolling down the page, other image load requests would get triggered and loaded. You can also notice the timings for image load in the waterfall column in this view. It would help you identify image loading issues if any or issues in triggering the image load.
To warp it up, we could state that lazy loading, if implemented correctly, will significantly reduce page size and delivery costs. How? By cutting down on unnecessary resources loaded up front, while keeping the necessary content intact on the page.
Faster loading pages translate into a great user experience 👌.
Lazy loading—if implemented well—can have significant benefits on your site’s loading performance while reducing the overall page size and delivery costs, thanks to deferring unnecessary resources up front.