Lazy loading: which images can wait

Useful to know

A long page with many images puts different tasks before the browser. Some of the content is needed when opening, and another part will be seen only after scrolling. Deferred charging, known as lazy loading, is a strategy to carry non-critical resources to the point when they are needed. The goal is for the initial load to not be burdened with anything that the page could possibly display later. This requires prioritization rather than a uniform setting for each resource. [1]

For HTML images, the loading attribute can prompt deferred loading using the lazy. value The browser determines when to start the download according to its own conditions and proximity to the visible area. [2] Therefore, the attribute is not an accurate timer and does not mean a mandatory wait until a specific pixel becomes visible. When explaining the behavior, it is more useful to monitor the real page than to promise the same moment for all devices.

Let's have a fictional article with a main picture and twenty images from an archive below it. For the visitor, the main photo can be part of the understanding of the topic right from the beginning. The archive images serve the following sections. Before setting it is useful to describe this order of significance. Thus, the team can decide which resources should be ready immediately and which ones they can wait for, without technical optimization to displace the needs of the material itself.

The dimensions of the image also matter for the layout. Setting width and height helps to determine the location the image will take before the content itself is loaded. [2] In a study check, we can compare a page with a pre-saved space and a page that lacks it. We monitor the movement of the adjacent text instead of just the number of files downloaded. Thus, the evaluation also includes the reading that the visitor has already started.

Deferred loading can also be used for other types of resources according to the appropriate mechanism. MDN sees it as a common strategy to reduce non-critical work at first. [1] This does not mean that all parts of a single interface should be postponed. For example, a useful gallery check also includes a quick scroll to the end. If the visitor sees long blank spaces exactly where he wants to look, the initial economy does not describe the whole result.

A practical review can follow a simple reading: open, stop the first tab, gradually scroll, and return to an image already seen. Visible delays and shifts are recorded for each step. This creates a more complete estimate of one number for the initial download. Lazy loading is useful when procrastination corresponds to the need for the content and does not turn the rest of the page into a series of unpleasant waits.