Above the fold is the portion of a webpage visible in the viewport without scrolling. It's the first impression zone — headline, hero visual, and primary call-to-action all compete for attention here. Nielsen Norman Group research shows visitors spend around 57% of their time above the fold, making it the most valuable pixel real estate on any page.
Every visitor decides whether to stay based on what they see above the fold. Get it right and bounce rate falls, time-on-page climbs, and conversion rates lift. Get it wrong and no amount of below-the-fold content saves the visit.
What is above the fold?
Above the fold is the section of a webpage that appears in the viewport as soon as the page loads — the visible area before any scrolling happens. Everything else is "below the fold" and requires the visitor to actively scroll to reveal it.
The phrase is borrowed from newspaper layout. Broadsheet newspapers were folded in half and displayed with only the top half visible on the newsstand. Editors put the biggest headlines and photos above the fold to sell papers. On the web, the same idea applies to viewport height instead of paper.
There is no single "correct" fold position. It depends on:
- Device — mobile viewports are typically 640-900px tall; desktop is 700-1080px
- Browser chrome — address bar and tab strip eat into the visible area
- Zoom level — accessibility zoom shrinks the visible area
- Orientation — landscape phones have a much shorter fold than portrait
Google measures Largest Contentful Paint (LCP) against whichever element is largest in the initial viewport — almost always something above the fold. A slow-loading above-the-fold image or hero video directly damages Core Web Vitals, which factor into search rankings.
Why above the fold matters
The above-the-fold zone drives attention, conversion, and page speed metrics simultaneously. Four reasons every marketer and designer cares:
- Attention share is disproportionate. Nielsen Norman Group eye-tracking studies find visitors spend roughly 57% of their viewing time above the fold. Below-the-fold content gets a fraction of that.
- Bounce decisions happen here. If a visitor can't answer "am I in the right place?" in the first viewport, most leave. Bounce rates on pages with confusing above-the-fold content are typically 2-3x higher.
- Conversion signals concentrate. Primary CTAs placed above the fold consistently outperform below-the-fold CTAs by 20-40% on low-consideration offers.
- Core Web Vitals live here. LCP measures the render time of the largest element above the fold. Slow hero images = poor LCP = ranking risk.
How the fold actually works
The fold is not a fixed position — it is a moving target that shifts with every visitor's device.
The viewport calculation
The visible area is window.innerHeight minus browser chrome. On a modern MacBook Pro 14" the fold sits around 780-850px. On an iPhone 15 in portrait, it's roughly 800-844px. On a Galaxy S24 in landscape, it's closer to 340-380px.
iPhone 15 (portrait)→~800px
iPad Pro (portrait)→~1024px
MacBook Pro 14"→~850px
Windows 1080p→~937px (after chrome)
Android landscape→~360px
Design against the smallest common viewport
The safest rule: assume mobile visitors see a fold of roughly 640px. If your headline, single sentence of value, and primary CTA fit inside that, they will fit everywhere else too.
What belongs above the fold
| Element | Why it belongs above the fold | Priority |
|---|---|---|
| H1 headline | Answers "am I in the right place?" in one line | Critical |
| Sub-headline / value prop | Explains the specific benefit in a sentence | Critical |
| Primary CTA | The action you want the visitor to take | Critical |
| Hero visual | Shows the product, outcome, or context | Important |
| Trust signal (logos, rating, count) | Reduces friction on first impression | Important |
| Navigation | Lets visitors find where they need to go | Standard |
| Long paragraphs | Save for below the fold — nobody reads them here | Don't |
Real above-the-fold examples
1. High-converting SaaS landing page
Stripe, Notion, and Linear all follow the same above-the-fold pattern: sharp 6-9 word headline, one supporting sentence, single primary CTA, and a product visual. Nothing else competes for attention. Load time is under 2 seconds and LCP consistently under 2.5s.
2. Ecommerce product page
Above the fold shows product image, product name, price, star rating, and add-to-cart button. Everything the visitor needs to make a decision is visible without scrolling. Product description and reviews sit below.
3. Blog / editorial page
H1 headline, byline with credibility signal, hero image, and the first paragraph. If the first paragraph doesn't hook the reader within the fold, most bounce before finding out what the article is actually about.
4. Local service business homepage
Location + service + "book now" or "call now" CTA above the fold. Local intent visitors want confirmation they're on the right business's page and a way to convert. Long "about us" text belongs below.
Above the fold vs below the fold — how to balance
Both matter. Above the fold captures attention; below the fold builds trust and depth. The mistake is prioritising one at the cost of the other.
Above the fold owns
- The 5-second "am I in the right place?" decision
- Primary conversion CTA
- Immediate value proposition
- LCP element (page speed)
- First-impression brand signal
Below the fold owns
- Detailed value explanation
- Social proof and case studies
- Feature deep-dive
- FAQ and objection handling
- Secondary CTAs after context
7 above-the-fold best practices
- Answer "why should I care?" in one sentence. If a visitor has to read a paragraph to understand what you offer, you have already lost most of them.
- Design for a 640px fold first. Mobile viewports set the floor. If it works there, it works on desktop too.
- Optimise the LCP element ruthlessly. Preload the hero image, serve WebP/AVIF, and keep it under 100KB. Target LCP under 2.5s.
- Keep the primary CTA visible without scrolling. One primary CTA. Not four buttons of equal weight.
- Include one trust signal. Customer count, rating, logo bar, or press mention. Short and specific beats vague and general.
- Don't hide behind autoplay video. Autoplay hero video pushes text below the fold on many devices and tanks LCP. Static hero + one clear headline outperforms.
- Test on real devices. Chrome DevTools underestimates browser chrome. Actual iPhones and Androids have less usable space than emulators show.
Cookie banners, newsletter popups, and app install prompts that dominate the fold trigger Google's intrusive interstitials penalty on mobile. They also destroy conversion. Keep interstitials small, dismissable, and never larger than 15% of the viewport.
Common above-the-fold mistakes to avoid
- Cramming everything above the fold — creates visual chaos and hurts scannability.
- Vague headlines — "welcome to our website" wastes the most valuable real estate you own.
- Slow-loading hero image — kills LCP and delays the first-impression signal.
- Multiple competing CTAs — dilutes conversion; one primary CTA outperforms four equal ones.
- Auto-playing hero video with audio — annoys visitors and pushes text below the fold.
- Cookie banner covering the entire fold — triggers Google's mobile intrusive-interstitial penalty.
Frequently asked questions
Yes. Eye-tracking studies from Nielsen Norman Group consistently show visitors spend around 57% of their time above the fold. It is where attention is captured, LCP is measured, and conversion decisions start.
There is no single standard. Common design targets are 600-800px on desktop and 640-812px on mobile, but the true fold depends on the visitor's device and window size. Design for the smallest common viewport first.
Google's Largest Contentful Paint (LCP) metric almost always measures an element above the fold. Slow above-the-fold rendering directly hurts Core Web Vitals scores, which are a Google ranking factor. Above-the-fold ad density is also penalised by the intrusive-interstitials update.
For lower-consideration offers yes, because attention drops sharply below the fold. For complex or high-consideration purchases, an above-the-fold CTA plus additional CTAs after the value has been explained usually converts best.
It comes from newspaper design. Newspapers were folded in half and only the top half was visible on newsstands, so publishers put the biggest story and photo above the fold to sell copies. The digital equivalent is the portion of a webpage visible without scrolling.
Related glossary terms
Sources
