Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. Lazy loading can occur on different moments in the application, but it typically happens on
some user interactions such as scrolling and navigation. As the web has evolved, we have come to see huge increases in the number and size of assets sent to users. Between 2011 and 2019, the median resource weight increased from ~100KB to ~400KB for desktop and
~50KB to ~350KB for mobile. While Image size has increased from ~250KB to ~900KB on desktop and ~100KB to ~850KB on mobile. One of the methods we can use to tackle this problem is to shorten the Critical Rendering Path length by lazy loading resources that are not critical for
the first render to happen. A practical example would be when, you land on the home page of an e-commerce site which has a link to a cart page/section and all its resources (JS, CSS, images…) are downloaded only when the user navigates to that cart page. Lazy loading can be
applied to multiple resources and through multiple strategies. Code splitting JavaScript, CSS and HTML can be split into smaller chunks. This enables sending the minimal code required to provide value upfront, improving page-load times. The rest can be loaded on demand. JavaScript Script type
module Any script tag with CSSBy default, CSS is treated as a render blocking resource, so the browser won't render any processed content until the CSSOM is constructed. CSS must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering.
It is possible to perform some CSS optimizations to achieve that. FontsBy default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. It is possible to override the default behavior and
preload web font resources using See also: Element Link Images and iframesVery often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (non-critical), requiring a user interaction, like scrolling, in order to view them. Loading attribute The
The You can determine if a given image has finished loading by examining the value of its Boolean Polyfill Include this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill Intersection Observer API Intersection Observers allow the user to know when an observed element enters or exits the browser's viewport. Event handlers When browser compatibility is crucial, there are a few options:
Specifications
See also |