Above the Fold

Above the fold refers to the portion of a page visible in the viewport when it first loads, before any scrolling. The term comes from newspapers, where the top half of the front page was visible when folded. On the web there is no fixed fold, since it depends on the screen size and window.

Why it matters

Visitors judge speed by how quickly this area becomes usable. Performance work therefore prioritizes it: inline critical CSS for it, preload the hero image, avoid lazy loading anything in it, and defer scripts that only serve content further down. Metrics such as FCP, LCP and Speed Index all focus on the initial viewport.

Example

<!-- Above the fold: load eagerly, high priority -->
<img src="hero.webp" width="1200" height="600" fetchpriority="high" alt="">

<!-- Below the fold: load when near the viewport -->
<img src="gallery-1.webp" width="600" height="400" loading="lazy" alt="">

Common mistakes

• Assuming one fold height. A phone, laptop and 4K monitor all differ, so test several sizes.
• Applying loading="lazy" to all images including the hero.
• Loading a chat widget or large carousel before the main content.
• Optimizing for it but shifting content as late elements load.

Related

• Critical CSS
• Lazy loading
• LCP
• Speed Index

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.