Lazy Loading
Defer off-screen images to speed up page loads
Lazy loading delays the loading of images that aren't visible on screen until the user scrolls near them. This reduces initial page load time and saves bandwidth for visitors who don't scroll through the entire page.
Enabling Lazy Loading
Go to Compresso > Settings and enable Lazy Loading. It's disabled by default.
Placeholder Types
While an image is waiting to load, Compresso can show a placeholder in its place:
| Placeholder | What it looks like |
|---|---|
| None | Empty space until the image loads |
| LQIP | A tiny, blurred version of the image (Low-Quality Image Placeholder) |
| Dominant Color | A solid block matching the image's main color |
| Blur | A CSS blur effect over a low-resolution preview |
LQIP provides the best user experience — visitors see a recognizable preview that sharpens into the full image.
Skip Above-the-Fold Images
Images visible when the page first loads (above the fold) should load immediately — not lazily. Set Skip first N images to exclude them.
A value of 2–3 works well for most sites. This keeps your hero image and any header images loading instantly.
Exclusions
If specific images should never be lazy loaded, add their CSS class or ID to the Exclusions field. Separate multiple values with commas.
For example:
.logo, #hero-banner, .no-lazyCompresso automatically skips images that already have an explicit loading attribute set, so it won't conflict with images you've manually configured.
How It Interacts with Other Features
- WebP Delivery — Lazy loading works with all WebP delivery methods. WebP sources are included in the lazy-loaded markup.
- Auto Dimensions — If enabled, Compresso adds width/height attributes before applying lazy loading, which prevents layout shifts.