How to apply it
Everything below the fold gets loading="lazy". Everything above it does not, and the single largest above-the-fold image should be the opposite: loading="eager" with fetchpriority="high", so the browser fetches it first.
This is the mistake worth checking for on any site built quickly. A template that sets lazy loading on every image will delay the hero image, and the hero image is usually what Largest Contentful Paint is timing.
| Asset | Treatment | Why |
|---|---|---|
| Largest above-fold image | loading eager, fetchpriority high | It is what LCP measures |
| Other above-fold images | loading eager | They compete with the LCP paint |
| Below-fold images | loading lazy | Weight removed from first load |
| Iframes and video embeds | Lazy, or load on interaction | Third-party players are heavy |
| Chat widgets | Load on interaction | Seconds of main-thread work |
Layout shift is the other half
A deferred image with no declared dimensions means the browser cannot reserve space for it, so content jumps when it arrives. Always pair lazy loading with width and height attributes, or an aspect-ratio rule, or you trade one failing metric for another.
- Lazy below the fold, eager above it
- One image marked fetchpriority="high", never several
- Width and height on every image, deferred or not
- Iframes and embeds lazy loaded, since third-party players are heavy
Videos and third-party embeds
A chat widget or video player loaded on first paint can cost seconds. Loading them on intersection, or on interaction, is usually the single biggest performance gain available on a marketing site that already looks well built.
Why it matters for B2B marketing teams
This is the single most common performance defect we find on otherwise well-built B2B sites, and it takes minutes to fix. A template that lazy loads every image will delay the hero, which is usually the exact element the score is timing.