Skip to main content

Above-the-Fold Strategy

Above-the-fold (ATF) design has an outsized impact on LCP, CLS, and INP. The goal is simple: the browser discovers the primary content early, can render it without waiting on heavy work, and nothing jumps around while it loads.

The ATF Contract​

ATF ElementWhat "Good" Looks LikeWhy It Matters
H1 + supporting copyText renders immediately with a stable fallback fontPrevents FOIT and reduces CLS risk
Primary visual (often LCP)One image, responsive, compressed, and not lazy-loadedLCP depends on this element
Navigation/headerStable height; no late injection above contentPrevents layout shift
CTASimple button/link; minimal JS requiredKeeps INP healthy

LCP Element Rules​

If your LCP element is an image, follow these rules:

  • Use a real <img> (avoid CSS background images for your LCP element).
  • Provide dimensions (width/height) or aspect-ratio so space is reserved.
  • Do not lazy-load the LCP element.
  • Prefer WebP/AVIF and keep the file size reasonable.
  • Consider fetchpriority="high" and (sometimes) a preload hint.
hero-image.html
<img
  src="/images/hero.webp"
  width="1200"
  height="630"
  alt="Hero image"
  fetchpriority="high"
  decoding="async"
  loading="eager"
/>

Optional preload (use sparingly):

preload-hero-image.html
<link rel="preload" as="image" href="/images/hero.webp" />

CLS-Safe Patterns​

Common causes of above-the-fold CLS:

  • Images/iframes without reserved space
  • Font swaps (custom font loads late)
  • Banners injected above the header
  • Sticky headers that change height after load

Fix patterns:

  • Reserve space for media: set width/height (or aspect-ratio).
  • Keep headers a fixed height; avoid adding bars above it after load.
  • Use font-display: swap and preload only the fonts you truly need for ATF.

INP-Safe Patterns​

Keep interactivity simple above the fold:

  • Avoid carousels and heavy animation libraries for the hero.
  • Delay non-essential third-party scripts (chat, marketing) until interaction.
  • Prefer CSS transforms/opacity for animations (avoid layout-affecting animations).

Quick Audit​

  1. PageSpeed Insights (mobile): identify the LCP element and what delays it.
  2. DevTools -> Performance: look for long tasks and heavy layout/paint work.
  3. DevTools -> Rendering: enable "Layout Shift Regions" and reload to see jumps.
  4. DevTools -> Network: confirm the hero image/font strategy matches intent.

What's Next​