Lazy loading techniques enable browsers to render pages more quickly, because the script delays the initialization of page elements.
The result is typically better performance and a reduction in cost, because pages are loaded faster and not all page elements consume computing resources.
However, lazy loading is far from perfect. This article explains three critical lazy loading issues, and quickly explains when you should use eager loading.
What Is Lazy Loading?
Lazy loading is a technique used to delay the initialization of page elements. You can use lazy loading, for example, to prevent a video from loading until users click or scroll over the play button. The majority of web browsers support lazy loading. You can implement lazy loading for browsers that do not natively support this functionality by using libraries or polyfills with an API.
Lazy loading provides two main benefits:
- Better performance—lazy loading helps you reduce the amount of images required to load when the page is first loaded. This means the page sends less resource requests, uses less bytes when downloading files, and requires less network bandwidth per user. The result is better performance, because users can load pages much faster.
- Less costs—billing for asset delivery is calculated according to the number of transferred bytes. Lazy loading reduces the amount of images delivered, thus reducing the amount of bytes used. The result is a reduction in total image delivery costs.
How Does a Web Page Usually Load?
To load a page, users need to ask their browser to open a uniform resource locator (URL). When users click on a link, they trigger a request. The browser then downloads a page and accompanying resources, which are delivered as files.
Page resource files include HTML (contains 15-120 KB of code), CSS and JavaScript files (contain 5-200 KB of code), and iframes and images (=10s of MB). The web browser builds the page using all resource files, and then renders (displays) the page to the user.
Typically, the page first downloads HTML, then CSS and JavaScript. Images and iframes are downloaded last, even though these files weigh more. The page is not rendered until all image files are downloaded. This process can take a lot of time, significantly reading page load speed.
The Importance of Lazy Loading
Lazy loading “interrupts” the traditional page load process. Instead of waiting for all files to load before rendering the page, browsers using lazy loading scripts display pages before all images and iframes are loaded. This significantly reduces the amount of time it takes to load each page.
When users ask to load a page, the lazy loading script quickly renders the page using HTML and style files. Users can start scrolling down the page, reading the displayed content. Instead of images, the browser displays placeholder images. The image is stored in the page, but it is downloaded only when users reach the placeholder.
3 Lazy Loading Problems and Solutions
While lazy loading significantly improves page speed load, it is not a perfect solution. There are still issues that should be addressed, including delays caused by image loading and decoding, and content that shifts across the layout .
1) Delay in Loading Images
A lazy loading script, as explained above, does not wait to initialize all images before loading the page. This process helps deliver pages to users much faster, but it may cause delays in image loading. A user, for example, might reach an image placeholder and be forced to wait a few seconds or milliseconds before the image loads.
The solution:
- Use an Intersection Observer API to detect images entering the viewport.
- Add a margin to images. You can define the margin by setting a bounding box via the rootMargin parameter.
- Start loading an image when it is located several hundred of pixels before the viewport.
This process gives the browser more time to download and display the image in the viewport.
2) Image Decoding Delays
When large image files are loaded in JavaScript and dropped into the document object model (DOM), the process can clog the main thread. This decodes images, and when it takes longer, it can make user interfaces unresponsive for some time.
The solution:
You can asynchronously decode the files, before dropping images into the DOM. This process can help prevent or reduce image decoding delays. However, asynchronous decoding is not available for all browsers and devices, and may complicate lazy loading logic.
3) Content Shifting
When loading images, browsers need to render the content according to size to ensure it fits the layout. To do this, the browser needs to know the size of the image. However, lazy loading scripts postpone the rendering of images, preventing the browser from determining the size of the content.
Since the default configuration of containers is 0x0 pixels, browsers need to resize containers according to image size. This process changes the layout of the page, causing other elements to shift. Because content shifting results in a poor user experience, it was added into a Core Web Vitals metric, which is expected to become part of Google's ranking algorithm in 2021.
The solution:
Specify height and width for containers, to help browsers create the container in advance.
When the container is loaded in advance, the image can be quickly loaded according to the size of the container without causing any content shifting.
When to Use Eager Loading
Eager loading scripts do not prevent image rendering. Instead, eager loading scripts load all page content immediately. Additionally, the browser is given permission to store all page content in a cache. Once users visit the page again, the browser can quickly load the page using the information stored in the cache.
Eager loading scripts are highly effective for pages that require less data for rendering, and are not recommended for loading heavy page files. Wikipedia pages, for example, use eager loading. Because each page contains mainly text, it takes up less file space, and can easily be stored in a cache.
Conclusion
Lazy loading is highly effective in improving performance, which is why these scripts are now implemented by the majority of web browsers. However, lazy loading can also create loading delays, which are typically attributed to image loading and decoding processes.
Additionally, when pages are not properly configured to accommodate lazy loading scripts, the browser might be rendered with shifting content. While these issues can often be prevented, there you might want to consider using eager loading for pages displaying mainly textual content.