Technology Writer and Startup Advisor
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.
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:
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.
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.
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.
This process gives the browser more time to download and display the image in the viewport.
2) Image Decoding Delays
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.
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.
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.
Create your free account to unlock your custom reading experience.