✳flâneur — a map of the web's best reading

Lazy loading - Web performance | MDN

developer.mozilla.org · 718 words · saved by 1 readers

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 with a link to a cart page/sectio

Lazy loading - Performance | MDN Skip to main content Skip to search Lazy loading 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. Overview 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

Explore this link on the map →

related reading