Lazy loading is a technique that delays loading images, videos and other embeds until a visitor scrolls close to them. Only the content near the screen loads first.
Why does this matter? A long post with twenty images does not need all of them at once. Lazy loading makes the first view appear faster and saves data for mobile readers.
How does lazy loading work?
Modern browsers support a simple HTML attribute called loading. When an image has loading="lazy", the browser waits to download it until it is about to scroll into view. The same attribute works on iframes too. Here is how it looks:
<img src="photo.jpg" alt="Sunset" loading="lazy">It is just like a restaurant that cooks each dish when you are ready for it, rather than serving every dish on the menu at once.
Lazy loading in WordPress
Since version 5.5, WordPress adds the loading="lazy" attribute to images in your content automatically. Later releases extended it to iframes, such as embedded YouTube videos. There is no setting to turn on, because it works by default.
WordPress is also smart about the top of the page. Recent versions avoid lazy loading images that are likely to appear first on screen, since those should show up right away.
Common lazy loading mistakes
Here are a few mistakes we see often:
- Lazy loading the logo or main hero image, which delays what visitors see first.
- Running two lazy loading features, such as a plugin and a theme option, at the same time.
- Removing image width and height, which makes the layout jump as images appear.
Lazy loading works best with properly sized images. Upload images close to the size your theme displays them, and your pages get even lighter.
To see how lazy loading fits into overall speed, read our guide on optimizing WordPress for Core Web Vitals. You can also learn how to serve scaled images in WordPress.
That's all about lazy loading. WordPress already does the heavy lifting, so you only need to avoid the common mistakes. Let us know your questions in the comment section below.