Images are the largest assets on most web pages. On an average WordPress site, images make up most of the page weight. Lazy loading is the technique that prevents those images from being downloaded until the visitor actually scrolls to them — saving bandwidth, reducing load time, and improving Core Web Vitals scores.
How Lazy Loading Works
Without lazy loading, the browser downloads every image on the page as soon as it loads — including images that are far below the fold and may never be seen. With lazy loading, images are only downloaded when they are about to enter the viewport. The browser loads a lightweight placeholder (or nothing at all) for off-screen images, and fetches the real image just in time.
Since WordPress 5.5, native lazy loading has been built into the platform using the loading="lazy" attribute on <img> tags. This is supported by all modern browsers and requires no JavaScript. If your theme outputs standard WordPress image functions, you may already have basic lazy loading.
Beyond Native Lazy Loading
Native lazy loading is a good start, but a dedicated performance plugin can do more. Caching Out extends lazy loading to iframes — embedded video players, maps and other third-party embeds that themes do not always mark up for the native attribute — and adds missing width and height attributes so nothing shifts as images arrive.
Common Lazy Loading Mistakes
- Lazy loading the LCP image. The Largest Contentful Paint element — usually the hero image — should never be lazy loaded. Doing so delays the LCP and hurts your Core Web Vitals score. Caching Out automatically excludes the first image on the page from lazy loading.
- No placeholder dimensions. If an image does not have width and height attributes, the browser does not know how much space to reserve. When the image loads, the page layout shifts — hurting your CLS score. Always include dimensions, or use a plugin that adds them automatically.
- Lazy loading above-the-fold content. Images that are visible without scrolling should load immediately. Lazy loading them adds unnecessary delay.
Further reading: The Case for WebP Images — combining lazy loading with next-gen formats for maximum image performance.