Lazy loading defers the loading of images, iframes, and other media until they’re about to enter the viewport. This reduces initial page weight, speeds up page rendering, and improves Core Web Vitals scores. WordPress includes native lazy loading since version 5.5, but there are additional techniques for fine-grained control.
Native Lazy Loading
WordPress adds loading=”lazy” to images and iframes automatically since version 5.5. This native browser feature defers loading until the element is near the viewport. It works in all modern browsers. The loading attribute can be ‘lazy’ (defer), ‘eager’ (load immediately), or ‘auto’ (browser default).
Excluding Above-the-Fold Images
Above-the-fold images should not be lazy-loaded as this delays the Largest Contentful Paint. Use the wp_get_attachment_image_attributes filter to remove loading=”lazy” from the first content image. Add the skip-lazy class to critical images. Most caching plugins handle this exclusion automatically.
JavaScript Lazy Loading
For more control than native lazy loading, use JavaScript libraries. The Intersection Observer API is the modern standard for detecting element visibility. Libraries like lazysizes, lozad, and vanilla-lazyload provide fade-in effects, placeholder generation, and responsive image support.
IFrame Lazy Loading
Lazy-load embedded content from YouTube, Vimeo, and other services. Replace embed iframes with a placeholder thumbnail. Load the actual iframe only when the user clicks the placeholder. This can reduce initial page weight by several hundred kilobytes for pages with multiple embeds.
Placeholder Techniques
Show placeholder content while images load. Use low-quality image placeholders (LQIP) — a tiny, blurred version of the image. Use dominant color placeholders — the average color of the image. Use CSS gradients that approximate the image. These techniques reduce perceived load time.
Il punto fondamentale
Lazy loading is essential for modern WordPress performance. Use native lazy loading for basic needs, exclude above-the-fold images, use JavaScript libraries for advanced effects, lazy-load iframes, and implement placeholders for perceived performance. Proper lazy loading reduces page weight and improves user experience.
