Glossary · Performance
Lazy Loading
Delaying the download of images, embedded videos and other content further down a page until the visitor scrolls near them, so the first screen loads sooner.
On a long page, most images sit below the first screen, and many visitors never scroll to them. Lazy loading tells the browser to fetch those images only when they are about to come into view, which saves data and leaves the connection free for what the visitor sees first. Browsers support it natively for images and iframes through the loading="lazy" attribute, so no JavaScript library is needed.
Two rules keep it from backfiring. Never lazy-load the main image in the first screen: it is usually the Largest Contentful Paint element, and delaying it makes the page slower. And give every lazy-loaded image a width and height, or the layout will jump when it arrives, which counts against Cumulative Layout Shift.
Some themes and performance plugins lazy-load every image by default, hero included, so check the first screen of your key templates after installing or changing one.
Last reviewed
Tell us what you're building.
A few lines about the project, and what is in the way, are enough to start.