SparkCore
Lazy load works better with smaller source files
Lazy loading delays loading; compression ensures what does load finishes faster.
In short
- Lazy loading postpones loading images that are off screen.
- Load the first image on screen straight away.
- Set width and height so the page does not jump.
Stronger together
No trick that hides heavy files: we make them truly smaller.
How does lazy load work in WordPress?
Lazy loading means the browser only fetches an image when it is about to appear on screen. This is native browser behaviour through the loading="lazy" attribute. WordPress adds this attribute to images in your content automatically. So you do not need a separate plugin for it. Visitors who never scroll down never download the images at the bottom. That saves data and speeds up the first view. Long pages with many photos benefit the most.
Which images should you not lazy load?
The first image above the fold is often the LCP element. If you lazy load it, the browser starts fetching it later. Your LCP then gets slower. A good LCP is 2.5 seconds or less. So keep images that are visible straight away out of lazy loading. Everything below them can be lazy. Check the page source to make sure your hero does not have loading="lazy". Check this in your theme and page builder too.
- The hero or header image
- The first product photo on a product page
- The logo at the top of the page
How do you prevent layout shift with width and height?
An image without dimensions has no fixed place. The browser only knows how tall it is once the file has arrived. Then the text jumps down. Google measures this as CLS. A good score is 0.1 or less. So give every image a width and height. The browser then reserves the right space straight away. For images from the media library this usually goes well by itself. Pay extra attention to HTML you paste in by hand.
Does lazy load make smaller files unnecessary?
No. Lazy loading only postpones and shrinks nothing. Once an image comes into view, the whole file still has to arrive. A heavy photo stays heavy, even if it loads later. On mobile you notice this while scrolling. So combine lazy loading with compression. Spark Media Optimizer compresses in the background in a queue and can cut up to 94 percent from the file size. That way what loads later is quick too.
- Lazy load: fewer files at the start
- Compression: a smaller file per image
- Modern formats: WebP and AVIF where the browser supports them
Frequently asked questions
Usually not. WordPress adds loading="lazy" to images automatically and browsers support it natively. You only need an extra plugin for what core does not cover, such as CSS background images. First check whether your theme or cache plugin already does it.
Most likely your hero is lazy loaded too. The browser then waits to fetch it until the layout is ready. Remove loading="lazy" from the first image above the fold. Then test again. Aim for an LCP of 2.5 seconds or less.
No, it can even cause it. Without width and height a lazy image has no place, and the page jumps as soon as it loads. So always set dimensions. Then your CLS can stay below 0.1.