{"id":47757,"date":"2023-04-07T15:17:27","date_gmt":"2023-04-07T15:17:27","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/lazy-loading"},"modified":"2026-10-01T16:27:54","modified_gmt":"2026-10-01T16:27:54","slug":"lazy-loading","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/lazy-loading","title":{"rendered":"Lazy Loading"},"content":{"rendered":"

Definition\"Lazy<\/strong><\/p>\n

Lazy loading<\/strong> is a technique that delays requesting or processing non-critical resources until they are likely to be needed. On a web page, it is commonly applied to images and iframes outside the initial viewport, although the same principle can be used for code and other components.<\/p>\n

Its purpose is to reduce the browser’s initial work<\/strong>. Resources are not necessarily loaded at the exact moment they enter the screen: the browser or page code may anticipate the request according to distance, connection, and other criteria.<\/p>\n\n

How lazy loading works<\/h2>\n

When a page opens, the browser discovers its resources and determines when to request them. Priority elements<\/strong> are downloaded and processed from the beginning, while deferred elements remain pending until they approach the viewport or a defined implementation event occurs.<\/p>\n

This on-demand loading<\/strong> can reduce requests, transfer, and decoding during the initial phase. Its effect depends on how many resources are actually below the fold, their size, the cache, the device, and network speed.<\/p>\n

The usual behavior comprises these technical stages<\/strong>:<\/p>\n

    \n
  1. Discovery:<\/strong> The browser parses the HTML<\/a> and recognizes elements marked for deferred loading.<\/li>\n
  2. Reservation:<\/strong> The layout preserves the space the resource will occupy to avoid unexpected movement.<\/li>\n
  3. Observation:<\/strong> The browser or a script monitors the element’s proximity to the viewport.<\/li>\n
  4. Request:<\/strong> The file is downloaded when the system estimates it will soon be needed.<\/li>\n
  5. Rendering:<\/strong> The resource is decoded, incorporated into the layout, and made available to the user.<\/li>\n<\/ol>\n

    Deferred loading does not replace file optimization<\/strong>. An oversized image still uses more transfer and processing than necessary even when it is requested later.<\/p>\n

    Implementation methods<\/h2>\n

    Modern browsers support native lazy loading<\/strong> for images and iframes through the `loading=”lazy”` attribute. This approach lets the browser choose an appropriate preload distance and avoids relying on a library for common cases.<\/p>\n

    A deferred image<\/strong> can be declared as follows: <img src=\"image.jpg\" loading=\"lazy\" width=\"800\" height=\"600\" alt=\"Description\"><\/code>. Width and height attributes, or an equivalent aspect ratio in CSS<\/a>, reserve space before the file loads and help limit layout shifts.<\/p>\n

    JavaScript<\/a> remains useful when the logic requires specific control<\/strong>, custom components, conditional loading, or `IntersectionObserver`. In those cases, the content should remain accessible when the script fails or executes slowly.<\/p>\n

    Code modules can also be split and requested through dynamic imports<\/strong>. Style sheets, fonts, videos, and interactive components require their own strategies; adding `loading=”lazy”` indiscriminately does not produce the same effect for every resource type.<\/p>\n

    Performance effects<\/h2>\n

    When applied to content clearly below the fold, lazy loading may reduce initial bytes<\/strong> and processing. This can free bandwidth and reduce competition with resources needed to display the top of the page.<\/p>\n

    The possible effects<\/strong> should be assessed separately:<\/p>\n