Lazy Loading: The Definitive Guide

By / /
  • 5 out of 5 Stars
Published in: HTML SEO JavaScript

In this article we will cover lazy loading and its benefits in making website loading faster, providing a better user experience, and thus getting higher Pagespeed Insights score and better SEO results.

Lazy Loading

What is lazy loading?

Lazy loading is a technique to identify resources as non-blocking (non-critical) and load these only when needed. In the context of images, this means deferring the loading of below-the-fold images to when they enter the viewport.

In simple words: normally, the browser loads entire page contents including all images and iframes, implementing the so-called "eager loading". With lazy loading it will load only elements that are visible to the user, the remaining elements will be loaded only on demand.

Maybe you have already stumbled upon the "Defer offscreen images" recommendation in Google Lighthouse or Pagespeed Insights stating

"Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive"
— this is the case.

Lazy-loading images example

To make things totally clear, here's a video demonstrating how lazy loading works in Chrome opening the demo page by Mathias Bynens:

Benefits of lazy loading

  • Lazy loading allows a browser to render a web page faster, which leads to a better user experience.
  • Lazy loading is SEO-friendly. Since 2010, page speed is a Google ranking factor. With introducing the Speed Update in 2018, page speed became even more important than it was before. So, by improving the loading speed, we also improve website rankings.
  • Faster rendering leads to a higher Pagespeed Insights performance score.
  • Lazy loading decreases server load, because not all resources are loaded simultaneously.
  • Lazy loading saves server bandwidth, because some of resources residing "below the fold" will not be loaded at all for some visitors.

Lazy loading images via JavaScript library

There are many implementations of lazy-loading technique that are done in JavaScript. The common scenario is as follows:

  1. You include your lazy loading library in the page.
  2. For images that you want to be lazy-loaded, instead of src, you set a custom atttribute like data-src. For example:
    <img data-src="/images/cat.jpg" alt="Smart cat">
    
  3. JavaScript code tracks the scrolling and tells the browser to load the image when it is about to be scrolled into view.

There are many JavaScript lazy loading libraries available, the most popular are:

Should you use these libraries if you make a decision to implement a lazy loading on your site in 2020? My answer is NO, because now we have a...

Get Leads, Not Clicks!

Native lazy-loading

Native lazy-loading means that it is implemented by a browser itself and doesn't require any external third-party libraries to work. It requires minimal HTML code modification — you need to add only one loading attribute with the lazy value to your img tag, like this:

<img src="/images/cat.jpg" width="600" height="400" alt="Smart cat" loading="lazy">

Or to the iframe tag:

<iframe width="560" height="315" src="https://www.youtube.com/embed/3sM0oZDr-Dk" 
loading="lazy" 
frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The possible values of the loading attribute are:

  • lazy – used to defer fetching a resource.
  • eager – used to fetch a resource immediately.
  • auto – use the browser default. Not included in specification, supported only by Chrome.

Native lazy-loading has been implemented in Chrome and Chromium-based browsers since Chrome 76, which shipped in July 2019. Lazy-loading for images also has been implemented in Firefox 75 (released in April 2020). For full browser compatibility list, consult this page.

Benefits of native lazy-loading

  1. You don't need to use these data-src attributes for your images. Your HTML code for img tags needs to be changed minimally, just only by adding "loading"=lazy.
  2. There is no overhead for loading lazy-load handling scripts.
  3. You avoid possible errors in third-party scripts, and the browser knows better when the image is needed to be shown.

Lazy-loading best practices

While lazy-loading have positive performance benefits, there are some important notes you should know:

  • It is recommended to specify width and height attributes for your lazy-loaded elements. Without them browser will not know, how much space it should reserve, scrolling could work imperfectly and website visitors can experience a Cumulative Layout Shift. And you can get this kind of warning message in the Chrome DevTools Console:
    [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance.
  • Also note, that it is not recommended to use lazy-loading for above-the-fold content as it can show up a bit slower, because Chrome won't preload loading="lazy" images in the preload scanner.

Lazy loading of iframes

Chrome and Chromium-based browsers also support native lazy loading of iframe elements, which can be enabled with the same "loading"=lazy attribute described above.

According to a case study from Google, lazy-loading applied to some of the most popular iframe embeds showed up the following benefits:

  • Lazy-loading YouTube video embeds saves ~500KB on initial page load, ~10 seconds of time to interactive and improves Lighthouse Performance Score by 71%.
  • Lazy-loading Instagram embeds saves >100KB gzipped on initial load.
  • Lazy-loading Spotify embeds saves 514KB on initial load.

Why you should use lazy loading on your website

Adding lazy loading makes a website load faster, improves UX and saves bandwidth. Given that page speed is an important ranking factor in 2020, lazy loading can also help to achieve higher rankings in search engine results.

SEMrush

Rate This Article

How would you rate the quality of this content?
Currently rated: 5 out of 5 stars. 1 user has rated this article. Select your rating:
  • 5 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5

About The Author

Lembit Kuzin is a software developer from Estonia. He is passionate about new technologies, web development and search engine optimization. He has over 10 years of webdev experience and now writes exclusive articles for Webmaster Tips.

Related Articles

Maintenance Page

How to Make a Perfect Site Maintenance Page (Free Templates Included)

It happens that sometimes you need to take your website offline for doing various maintenance tasks such as restoring a database backup, updating scripts or switching from one web host to another. Some CMS have a built-in (or extendable via plugins) abilities to turn on maintenance mode and others do not. ..
New HTML Elements

New Elements in HTML 5

Web pages and their design are laid out using HTML. HTML stands for Hyper Text Mark-up Language. HTML is comprised of 'tags' or elements that tell your browser what the different areas of your webpage are. ..
HTML

3 Principles of HTML Code Optimization

Just like spring cleaning a house, the html code of your web pages should get periodic cleaning as well. Over time, as changes and updates are made to a web page, the code can become littered with unnecessary clutter, slowing down page load times and hurting the efficiency of your web page. ..
HTML

The Myth of W3C Compliance?

The past few years have seen a huge increase in the number of search engine optimisers preaching about the vital importance of W3C Compliance as part of any effective web promotion effort. But is compliant code really the 'Magic SEO Potion' so many promoters make it out to be?. ..
HTML

XHTML Overview

Many Web pages today are poorly written. Syntactically incorrect HTML code may work in most browsers even if it does not follow HTML rules. Browsers employ heuristics to deal with these flawed Web pages; however, Web-enabled wireless devices (such as PDAs) cannot accommodate these hefty Web browsers. ..
Get Leads, Not Clicks!