Today, I'd like to discuss the implementation of lazy loading techniques for a specific component, which is images.

· · · ·

Lazy loading? You can easily spot it while browsing Facebook. When you initially load the Facebook website, only a few messages appear. As you scroll down the page, Facebook gradually loads and displays the next set of stories. This is a prime example of lazy loading.

Today, I'd like to discuss the implementation of lazy loading techniques for a specific component, which is images.

What is Lazy Loading?

Lazy loading is an optimal technique when making websites. Instead of loading the entire website and rendering it right from the beginning, this technique allows the necessary components to be immediately loaded to be displayed to the user and delays remaining resources. again until needed.

Image is critical

Let's look at the following example, which is just a basic HTML page with an image.

Now, open the Network Timeline section in Chrome DevTools.

DevTools report event load(or onload) is initiated at 335ms. Thus, the event loadwas blocked by "awesome-photo.jpg".

You can imagine that with the simple example above, it does not affect the user experience at all because the website will be displayed very quickly. However, what if the website has 10, 20, ... 100 photos. It's not difficult to guess that the waiting time will get longer and longer. According to a report by HTTP Archive ( as of June 27, 2020 ), an average desktop website has a capacity of 1999.9 KB. Meanwhile, on average, a desktop website has an image capacity of 947.1 KB, accounting for about 47.35%. We cannot ignore issues related to Photos, they are too important for user experience.

Lazy loading technique for Photos

Basically, when declaring an image component we do the following:

<img src="awesome-photo.jpg">

So if we want to apply lazy loading to this component, we add the attribute loadingwith the value lazy:

<img src="awesome-photo.jpg" loading="lazy">

Here are the supported values ​​for the attribute loading:

  • auto: The default value depends on the behavior of each browser, similar to not including the attribute loading.
  • lazy: Delay downloading resources until a certain distance from the viewport is reached.
  • eager: Loads the resource immediately, regardless of its position on the page.

 According to the Can I Use page, the loading attribute is already implemented by most browsers. You can use it with confidence.

So what about browsers that do not yet support it? You can create a polyfill or use a 3rd party library like LazySizes . The loading attribute can be used to detect whether the browser supports this feature:

if ('loading' in HTMLImageElement.prototype) {
  // trình duyệt có hỗ trợ
} else {
  // sử dụng polyfill hoặc thư viện của bên thứ 3
}

LazySizes

LazySizes is a fast, SEO optimized and self-initializing library for lazy loading images (including responsive pictures / srcset), iframes, scripts / widgets and many more. . It also prioritizes resources based on differences in importance, among them. LazySizes prioritizes elements located in the viewport and near the browser viewport (near view elements) to optimize faster perceived performance.

  • Step 1 : add link to CDN containing LazySizes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js" async=""></script>

Or you can download the web server & leave the link directly on the server:

<script src="lazysizes.min.js" async=""></script>
  • Step 2 : add class lazyloadimage with attributes data-srcor data-srcset:
<!-- non-responsive: -->
<img data-src="image.jpg" class="lazyload" />
<!-- responsive example with automatic sizes calculation: -->
<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />

Note : LazySizes does not require any JavaScript configuration.

Avoid using lazy loading for images in the first viewport

You should only add lazy loading to images below the first display frame. Images with attributes eagerare loaded instantly regardless of position on the page. While images with attributes loadingthe browser needs to wait until it knows the image's location on the page based on IntersectionObserver. In general, any image in the viewport should be loaded by the browser by default. You do not need to specify properties loading=eagerfor image instances in the viewport.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">
 
<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

Testing lazy loading

Let's check to see if the image is really slow to load . Open Chrome DevTools by pressing F12 or right-clicking and selecting Inspect Elements then selecting the Network tab → Img. On the first page refresh you will only see some of the images above being loaded.

Then when you scroll down, you will see other images immediately loaded.

Conclude

Browsers offering built-in support for lazy loading can simplify the process of enhancing your website. If you encounter any unexpected behavior with the lazy loading feature in Google Chrome, please don't hesitate to report it here. Ideally, you should consider incorporating lazy loading into your website development right from the start.

Reference:

  • Analyzing Critical Rendering Path Performance:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

By at

No comments:

Post a Comment