Home / Blog / SEO
SEOAbove the Fold Website Size: Best Practices for Optimization
There's no single fold size — it's a range of viewports. Here's how to design and measure the above-the-fold area for conversions and SEO.
TL;DR
Above the fold is the part of a page visible without scrolling, and there is no single fold size — it varies by device. Design for a range of common viewports (roughly 360×640 on mobile and 1366×768 on desktop), put your value proposition and primary call to action inside that range, and optimize what loads there for Core Web Vitals.
What “above the fold” means and why size is a range
Above the fold is everything a visitor sees on a page before scrolling — and there is no single correct size for it, because it changes with every screen. The term comes from newspapers, where the most important story sat above the physical fold. On the web, the “fold” is simply the bottom edge of the browser viewport, and that edge lands in a different place on a phone, a laptop, and a 4K monitor.
Because of that variation, chasing one magic pixel height is the wrong goal. The right goal is to design the critical zone — your headline, value proposition, and primary action — so it lands inside the fold across the viewports your real audience uses.
The viewport ranges to design for
Rather than a single number, plan around the clusters where most traffic sits:
| Device class | Common viewport | Practical fold height |
|---|---|---|
| Mobile | 360–390px wide | ~640–850px tall |
| Tablet | 768–834px wide | ~1000px tall |
| Laptop | 1366–1536px wide | ~700–800px tall |
| Desktop | 1920px wide | ~950px tall |
Notice the trap: a laptop at 1366×768 often shows less vertical height than a large phone, once you subtract the browser chrome. That’s why “it looks fine on my 27-inch monitor” is a dangerous test. The safest working assumption is that only the top ~600px of vertical space is reliably visible on desktop, and less than that on mobile after the address bar.
Always validate against your own data. Your analytics platform reports the actual viewport distribution of your visitors — design for their top three or four, not for industry averages.
What belongs above the fold
The fold is prime real estate, so ration it. On most B2B pages the fold should carry:
- A clear value proposition — what you do and who it’s for, in one line a stranger understands.
- A supporting subhead — the proof or specificity the headline can’t hold.
- One primary call to action — book a demo, get an audit, start a trial.
- A trust signal — a client logo strip, a rating, or a hard metric.
Everything else can wait for the scroll. The old myth that “users don’t scroll” is dead — heatmap studies show people scroll readily when the top of the page signals that scrolling is worth it. The fold’s job is not to contain everything; it’s to earn the scroll.
How fold content affects speed and SEO
Above-the-fold optimization is inseparable from performance, because Google’s Largest Contentful Paint (LCP) measures how quickly the largest visible element in the fold renders. A giant unoptimized hero image or a render-blocking script is a double penalty: it slows the metric Google grades and it delays the moment your visitor sees your value proposition.
Practical fixes:
- Prioritize the fold’s assets. Preload the hero image or font; lazy-load everything below the fold.
- Right-size hero media. Serve responsive images in modern formats (WebP/AVIF) sized to the actual container, not a 4000px original.
- Defer non-critical JavaScript. Chat widgets, analytics, and animation libraries should not block the first paint.
- Reserve space to avoid layout shift. Set explicit dimensions so content doesn’t jump as it loads, protecting your Cumulative Layout Shift score.
Get this right and you improve rankings and conversions at the same time, because the same delay that costs you an LCP grade also costs you the visitor’s first impression.
Testing your fold instead of guessing
Don’t rely on a single screenshot. Use responsive-design tools to preview the page at your top viewports, run it through a Core Web Vitals check to grade LCP and layout shift, and use scroll-depth or heatmap data to confirm that people actually reach your secondary CTAs. Then A/B test the fold itself — headline, CTA placement, and whether a hero image or a cleaner text-first layout converts better for your audience.
The takeaway: stop asking “what size is above the fold?” and start asking “does my critical message land inside the fold on the screens my buyers actually use, and does it load fast?” That reframing is what turns fold optimization into measurable pipeline. Want a technical and conversion audit of your key pages? Get a free audit.
Want this done for you?
Get a free audit →FAQ
What is the standard above-the-fold size in 2026?
There isn't one. The most common desktop viewport is around 1366×768 and the most common mobile viewport is around 360–390px wide by 640–850px tall. Design for a range rather than a single pixel height, and always check your own analytics for the viewports your visitors actually use.
Does above-the-fold content affect SEO?
Indirectly but meaningfully. Google's Largest Contentful Paint measures how fast the main above-the-fold element renders, and it's a ranking signal. Heavy hero images or render-blocking scripts in the fold hurt both rankings and conversions.
Should the call to action always be above the fold?
For simple, low-consideration offers, yes. For complex B2B purchases, a strong CTA above the fold plus repeated CTAs down the page works better, because buyers need context before they commit. Test both.
