Lazy loading
Lazy loading is an optimization strategy where content that is not immediately visible to the user—typically images and videos "below the fold"—is deferred and only loaded as the user scrolls down the page and approaches it. This technique improves initial page load times by reducing the number of resources the browser needs to download and render upfront, and it also conserves bandwidth for the user. The simplest native method is to add the loading="lazy" attribute to an img tag. It is critical, however, to never apply lazy loading to images that are visible in the initial viewport, especially the Largest Contentful Paint (LCP) element, as this would delay its discovery and negatively impact performance.
Related web performance terms
- Lab Data (Synthetic Monitoring)
Lab data is performance data collected in a controlled, repeatable environment using tools like Google Lighthouse or WebPageTest.
- Largest Contentful Paint (LCP)
A Core Web Vital that measures the perceived loading speed of a page. It marks the point in time when the largest content element (usually a hero image or a large block of text) becomes visible within the viewport.
- Largest Contentful Paint Subparts
The LCP Subparts are the distinct phases that make up the total Largest Contentful Paint time. Analyzing this breakdown is crucial for diagnosing the root cause of a slow LCP.
- Layout Thrashing
Layout Thrashing is a harmful performance anti-pattern.