Lazy Loading: Load Only What the Visitor Actually Sees

$body$

Picture a page with 30 images. A visitor opens it, sees the first two or three, reads the headline, and leaves. Meanwhile their browser has downloaded all 30 images — 25 megabytes of traffic for content nobody looked at. Lazy loading solves exactly that problem: an image is loaded only when the visitor scrolls near it.

How lazy loading works

Instead of the browser fetching every resource immediately, elements below the first visible section (the content "below the fold") are marked to wait. When the visitor scrolls and an element approaches the viewport, the browser requests it only then. The result: the initial load is dramatically lighter, and the visitor notices no difference — images appear before they scroll to them.

The easiest way: native lazy loading

The good news is that basic lazy loading needs no plugin and no JavaScript. All modern browsers support the loading="lazy" attribute:

• <img src="photo.webp" loading="lazy" alt="..."> — for images
• <iframe src="..." loading="lazy"></iframe> — for maps, YouTube embeds, and similar

WordPress has added this attribute automatically to content images since version 5.5, so most WordPress sites already have basic lazy loading — often without knowing it.

The critical mistake: lazy loading the first image

The most common mistake we see in practice: lazy loading enabled on everything, including the hero image at the top of the page. That is counterproductive — the hero image is usually also your LCP element (Largest Contentful Paint, a key Core Web Vitals metric), and deferring it directly worsens your speed score.

The rule is simple:

• Images visible immediately when the page opens: loading="eager" (or no attribute), and give the most important one fetchpriority="high".
• Everything below the first screen: loading="lazy".

Lazy loading for video and embeds

The biggest win is often not images but embeds. A single YouTube embed pulls 500–800 KB of scripts the moment the page opens. The fix is the "facade" approach: show only the video thumbnail and load the real player on click. On WordPress, plugins like WP Rocket or Lazy Load for Videos handle this.

What lazy loading does not fix

Lazy loading reduces the amount of data, but it does not make your server faster. If your TTFB (time to first byte) is poor, the page still starts slowly. That is why lazy loading works best combined with fast NVMe hosting and a CDN that serves images from a location near the visitor — both included in our hosting plans. For WordPress sites we also offer optimized WordPress hosting with caching preconfigured.

Final checklist

• Enable loading="lazy" on all images below the first screen.
• Exclude the hero image and give it fetchpriority="high".
• Replace YouTube and maps with the facade approach.
• Always set width and height attributes so the page does not jump during loading.
• Check the result in PageSpeed Insights before and after.

Half an hour of work, and the difference is measured in seconds — few optimizations give you so much for so little effort.

$body$