Above the Fold

Above the fold is the part of a web page that is visible as soon as it loads, before the visitor scrolls. The term comes from newspapers, where the top half of the front page was the most valuable space. Online, this first screen shapes first impressions, page speed metrics and how Google views your layout.

What counts as above the fold

There is no single fold on the web. Its position depends on the device, screen size, browser and zoom level. A large desktop monitor might show 900 pixels of a page, while a phone shows far less. Because Google uses mobile-first indexing, the mobile first screen is usually the most important to get right.

A responsive design should adapt this space sensibly across sizes.

Why it matters for SEO and users

  • First impressions: visitors decide quickly whether a page matches what they searched for. A clear heading and answer near the top reassures them.
  • Ad-heavy layouts: Google introduced a page layout algorithm in 2012 to demote pages with too many ads and too little content in the first screen.
  • Interstitials: pop-ups that cover the main content on mobile can count as intrusive interstitials, which Google treats as a poor experience.
  • Speed metrics: the largest image or text block in the first screen is often the element measured by Largest Contentful Paint, one of the Core Web Vitals.

Myths about the fold

It is a myth that people do not scroll. Most users scroll happily when the top of the page gives them a reason to. You do not need to cram everything into the first screen. The goal is to confirm relevance and invite the reader further down, not to fit the whole page into a few hundred pixels.

How to optimise the first screen

  1. Lead with a clear H1 that matches the search query and the page’s purpose.
  2. Show the main content quickly. Avoid oversized hero images, sliders or banners that push text off the screen.
  3. Answer or summarise early. A short introduction or key fact helps users and can support featured snippets.
  4. Load key assets first. Do not apply lazy loading to the main hero image, as this delays it.
  5. Reserve space for images and ads. Set dimensions so content does not jump, which harms Cumulative Layout Shift.
  6. Include one clear next step, such as a button or link, without crowding the space.

How to check it

  • View key pages on a real phone and in browser developer tools at common screen sizes.
  • Use PageSpeed Insights to see which element counts as the Largest Contentful Paint.
  • Look at scroll depth in analytics or heatmaps to see whether visitors move past the first screen.
  • Compare your first screen with competing pages that rank well for the same query.

Common mistakes

  • Auto-rotating carousels that hide the main message.
  • Cookie banners and newsletter pop-ups covering the content at once.
  • Stacking several ads before the first paragraph.
  • Generic stock images that take up space without adding meaning.

Key Takeaways

  • Above the fold is what visitors see before scrolling.
  • The fold varies by device, so test mobile first.
  • Show a clear heading and the main content straight away.
  • Avoid heavy ads and intrusive pop-ups in the first screen.
  • Load the main hero element quickly to help Largest Contentful Paint.

Related Terms

Need a second opinion on your website? Ask for a free website SEO check, or keep learning in the SEO Encyclopedia.