Above the Fold
Also known as: ATF, Above-the-Fold, Above the Fold Content
Above the fold is the part of a web page a visitor sees when it loads, before scrolling. The term comes from newspapers, where the top stories sat above the physical fold of the paper. On the web the fold moves with screen size, device, and browser window, so it marks a range rather than a fixed line.
Key Takeaways
- Above the fold means visible on load without scrolling; below the fold means content you scroll to reach.
- The fold differs on phones, tablets, and desktops, so design for a range of viewport heights.
- This space should state what the page offers and what to do next, not hold every message at once.
- Google's 2012 page layout algorithm targeted pages with little content and heavy ads above the fold.
- Images in the initial viewport should not be lazy-loaded, because that can delay Largest Contentful Paint.
How It Works
The browser paints whatever fits in the visible viewport first, and that region is above the fold. A phone held upright, a laptop, and a large monitor each reveal a different amount of the page, so the fold is a band, not a pixel. Planning for it means deciding what a visitor must understand in the first screen: what the page is, why it is worth their time, and the main action to take.
Google has cared about this space for a long time. Its page layout algorithm, announced on January 19, 2012, targeted sites that do not have much content above the fold or dedicate a large fraction of the initial screen to ads, and Google said it noticeably affected less than 1% of searches globally at launch (Google Search Central Blog). The lesson still holds: lead with the content people came for.
The fold also matters for speed. The largest image or text block in the first screen is often the Largest Contentful Paint element, and web.dev's analysis found that lazy-loading images within the initial viewport can delay LCP, so load those eagerly and lazy-load the rest (web.dev). In advertising, an above the fold ad is a placement visible without scrolling. For layout choices that convert, see my guide to conversion rate optimization for landing pages and my take on landing page speed versus conversion.
Why It Matters
This space carries the heaviest weight in first impressions and decides whether a visitor stays or leaves. A clear value proposition and call to action here can lift engagement before scrolling is even required.
Example
A roofing company's mobile homepage used to open with a full-screen photo slider, pushing the headline and phone number below the fold on most phones. The redesign leads with one sentence naming the service and city, a Call for a Free Estimate button, and a review rating, all visible on load. The hero image loads eagerly, and everything further down is lazy-loaded.
Common Mistake
Cramming everything above the fold. Overloading the top with competing messages and buttons dilutes focus, and assuming users never scroll ignores that modern visitors scroll readily when the content earns it.
Frequently Asked Questions
What does above the fold mean?
Above the fold means the part of a page you can see without scrolling. The phrase comes from newspapers, where the biggest stories were printed on the top half, above the fold. On websites it describes the first screen a visitor sees.
Where is the fold on a website?
There is no single line. The fold depends on the device, screen size, browser window, and zoom, so it sits much higher on a phone than on a large monitor. Check your analytics for the most common screen sizes and design for that range.
What is an above the fold ad?
An above the fold ad is an ad placed where it is visible without scrolling. These placements usually get more views, but stacking ads at the top can push content down, which is the pattern Google's 2012 page layout algorithm targeted.
Does above the fold content affect SEO?
It can. Google's page layout algorithm affected pages with little visible content above the fold or large blocks of ads at the top. The first screen also often holds the Largest Contentful Paint element, which is part of Core Web Vitals.
What should go above the fold?
A clear statement of what the page offers, one primary call to action, and a quick trust signal such as reviews or credentials. The goal is instant clarity. Supporting detail can sit below, because people scroll when the top earns their attention.
Should images above the fold be lazy-loaded?
No. Lazy-loading images in the initial viewport can delay Largest Contentful Paint, according to web.dev's research. Load above the fold images eagerly and use lazy loading for images further down the page.