“Above the fold” is the portion of a webpage that’s visible on screen the moment the page loads, before anyone scrolls. It’s the first thing visitors see, the first thing Google measures for Largest Contentful Paint, and often the only thing that decides whether someone stays or leaves.
Where the term comes from
The phrase predates the web by about a century. Broadsheet newspapers were printed on large sheets folded in half. On a newsstand, only the top half was visible, so editors put the biggest headlines, the most arresting photos, and the lead story up there.
Web designers borrowed the term in the mid-1990s, and it stuck. The screen is the newsstand. The fold is the bottom edge of the browser viewport. Whatever sits above it is what your visitor judges your business on before they’ve made a single decision to engage.
Why it still matters for SEO and UX
There are three reasons the fold still pulls weight in 2026, even though we’ve all been scrolling on phones for fifteen years.
The first is Core Web Vitals. Largest Contentful Paint, one of Google’s ranking signals, measures how long it takes for the biggest visible element in the initial viewport to render. That element is, by definition, above the fold. A slow hero image or a render-blocking font can tank your LCP score and your rankings along with it.
The second is attention. Eye-tracking studies have shown the same pattern for two decades: users spend the overwhelming majority of their time looking at content above the fold.
The third is the three-second decision. Visitors form a judgment about whether your page is worth their time almost immediately, and that judgment is based almost entirely on what’s visible when the page settles.
The fold is fuzzier on mobile
On desktop, the fold roughly sits at 700 to 900 pixels from the top. On mobile, it’s messier. A typical phone shows somewhere between 600 and 800 pixels of vertical space, but the exact number depends on device, browser, and whether the address bar is collapsed.
| Device type | Approximate fold height |
|---|---|
| Small phone (older iPhones, compact Androids) | 600 to 670px |
| Standard phone (most current models) | 700 to 780px |
| Large phone or phablet | 800 to 900px |
| Tablet (portrait) | 900 to 1100px |
| Laptop | 700 to 900px |
Stop thinking of the fold as a fixed line and start thinking of it as a zone. Design for the smallest realistic viewport. If your hero CTA gets clipped on an iPhone SE, you’ve defined the fold incorrectly.
What belongs above the fold
- A clear value proposition. One sentence that tells visitors what you do and who you do it for.
- The main heading (H1). It should align with what someone searched for.
- A key visual. A product shot, photo of the work, or screenshot of the tool.
- The primary CTA or the first piece of real content.
What doesn’t need to be there
Almost everything else. Every feature you offer doesn’t need a callout up top. The full navigation menu can collapse into a hamburger on mobile. A long, throat-clearing intro paragraph that delays the actual content does more harm than good. Trust badges, testimonials, social proof have a place, and that place is usually below the fold.
Two mistakes I see constantly
The “everything above the fold” trap
Headline, subheadline, three feature bullets, hero image, primary CTA, secondary CTA, trust badges, video, and phone number all jammed into 800 pixels. The result is clutter. Nothing dominates because everything is fighting for space, and the page reads as anxious rather than confident.
Strong above-the-fold design is editorial. Pick the one thing the visitor needs to see first, give it room, and trust them to scroll for the rest.
The long hero scrolljack
A full-viewport hero image with a single line of text and no hint that anything exists below. Visitors see what looks like a complete page and leave. The fix: leave a visual cue that there’s more below, a peek of the next section, a chevron, a piece of body copy.
LCP optimization tactics
- Preload your hero image with a link rel=”preload” tag.
- Serve the hero in AVIF or WebP with properly sized variants for each breakpoint.
- Set explicit width and height on above-the-fold images to prevent layout shift.
- Lazy-load every image below the fold using loading=”lazy”.
- Inline critical CSS for the first viewport, defer the rest.
- Self-host or preconnect to web fonts; use font-display: swap.
- Audit third-party scripts. A single chat widget can blow your LCP budget.
Common mistakes today
- Cookie consent banners that cover the fold and push everything out of view. Design as overlays.
- Autoplaying video as the hero. Heavy, distracting, guaranteed LCP problem on mobile.
- Carousels where slide one loads instantly but the rest are render-blocking. Carousels are almost always a mistake anyway.
- Sticky headers that are too tall on mobile, eating 80px of fold space.
- Generic stock photography that says nothing about the actual business.
- A headline written for the founder’s ego instead of the searcher’s intent. “Tax planning for Toronto contractors” tells visitors everything they need to know.
The bottom line
The fold isn’t a relic from the print era. It’s the most expensive real estate on your website, measured by both Google and your visitors within the first second of arrival. Treat it the way newspaper editors treated the front page: one strong headline, one clear visual, one obvious next step, and confidence that the reader will keep going if you’ve earned it.