Skip to main content

Above-the-Fold Optimization

Above-the-fold (ATF) work is about getting the first useful view on screen quickly and reliably. Most CWV wins come from making the LCP element load early and preventing layout shift.

Step 1: Identify the LCP Element​

Use Lighthouse or the Chrome DevTools Performance panel to identify what the browser considered the LCP element (image, heading, or hero container).

Step 2: Make the Hero Simple​

  • Avoid sliders and video backgrounds above the fold.
  • Remove heavy animations that run on load.
  • Keep the DOM shallow (a complex hero can delay paint).
tip

If the ATF is complex, simplify layout first. Optimization toggles cannot fix an overbuilt hero.

Step 3: Prioritize the LCP Resource​

Typical fixes:

  • Ensure the LCP image is not lazy loaded (loading="eager", fetchpriority="high").
  • Preload the hero image only when it is consistently the LCP element.
  • Preload the primary font used above the fold (not every font).
Example preload for a template hero
<link rel="preload" as="image" href="/path/hero.webp">

Step 4: Prevent CLS in the First View​

  • Ensure media has width and height.
  • Reserve space for banners, cookie notices, and embeds.
  • Avoid late-injecting UI above the fold.
Size images to reserve space
<img src="/path/hero.webp" width="1600" height="900" loading="eager" alt="">

Verification​

  • The LCP element loads early in the waterfall.
  • No visible layout shifts in the first viewport.
  • Mobile menu/header works on first tap.

Checklist​

  • LCP element identified.
  • Hero is static and lightweight.
  • LCP resource is prioritized.
  • No new CLS regressions.

What's Next​