Above the fold: what it is and why it matters

What does above the fold mean

Above the fold is the part of a web page the user sees without needing to scroll. It's the first thing they see when they arrive at your site: the visible area within the limits of their screen at the moment of loading.

The term comes from printed newspapers. Publications folded their front pages in half, and the upper portion — the part visible above the fold — was the premium space where the most important headlines were placed to attract buyers at newsstands.

On the web, the concept holds. The visible area without scrolling concentrates the greatest user attention, especially in the first seconds after loading. What's there largely determines whether the user will keep exploring or leave.

There is no fixed size for the above the fold. It depends on the device, screen resolution, and browser size of each user. On a standard desktop (1366×768px), the visible area is approximately 600–700px tall. On mobile, it's often even smaller. This means the above-the-fold design must be thought through for multiple contexts.

Why it's critical for conversion

The reason the above the fold matters so much for conversion is physiological and attentional: users decide in seconds whether to stay or leave. Nielsen Norman Group has been documenting this behavior for years, and their data is consistent: users make the decision to stay or leave a page in less than 10 seconds.

In that time, they've only seen the above the fold.

If that first area doesn't clearly communicate what you offer, who it's for, and why it should matter to them, most users will leave before seeing the rest of the content.

The above the fold also has a direct impact on business metrics:

A landing page with the primary CTA visible without scrolling can increase the conversion rate by 20–50% compared to one where the CTA requires scrolling
Time to first click is significantly lower when the action element is above the fold
Bounce rate correlates negatively with the clarity of the message in the hero: more clarity, less bounce

What eye-tracking reveals

Eye-tracking studies — technology that tracks users' eye movements while they browse — have revealed consistent patterns in how people read and scan web pages.

The F pattern

Nielsen documented in 2006 the F-shaped reading pattern, which remains valid today for text-heavy pages: users read the first line completely, then make a shorter horizontal movement on the second line, and finally scan the left margin vertically.

Direct implication: the most important words should be at the beginning of headings and paragraphs, especially on the left margin.

Concentration of attention above the fold

Multiple eye-tracking studies confirm that 80% of user attention is concentrated in the upper half of the page. The lower half receives only the remaining 20%. And this assumes the user scrolls — which doesn't always happen.

Attention distribution by zone

Page zone	Average attention
Above the fold (first 600px)	57%
Middle zone (600–1200px)	28%
Lower zone (>1200px)	15%

This doesn't mean below-the-fold content is irrelevant — it's essential for users who are already considering the action — but it does mean that the work of capturing attention and communicating value must happen at the top.

What elements to include above the fold

The optimal above-the-fold content depends on the type of page (homepage, landing page, product page), but there are elements that are nearly universal on high-converting pages.

1. Clear value proposition

The question users ask when arriving at your website is: "Is this for me? Does it help me solve my problem?" The main heading (H1) should answer that question in one sentence. Not with corporate jargon, but with the concrete benefit you offer.

Weak example: "Innovative solutions for your digital business" Strong example: "More sales from your website, with the same visitors"

2. Subheadline that adds context

The subheadline complements the H1 by adding context: who you are, how you do it, or who it's for. Maximum 2 lines.

3. Visible primary CTA

The primary action button must be visible without scrolling. Its text must be specific and action-oriented: not "Submit" but "Start your free trial", not "More info" but "See how it works."

4. Credibility elements or social proof

A recognized client logo, an impact figure, or a social proof line ("Used by more than 2,000 companies") adds immediate credibility and reduces distrust friction.

5. Supporting image or video (optional but effective)

An image showing the product in use, or a short video (no autoplay with sound), can increase value comprehension and dwell time.

Common mistakes in the above the fold

Too much content

Trying to communicate everything above the fold creates noise and dilutes attention. The user doesn't know where to look or what to do. The above the fold should have a single primary message and a single priority call to action.

Slider or carousel as hero

Sliders consistently reduce conversion in nearly every A/B test where they've been tried. Users see the first image and rarely wait for the following ones. If the slider hides the CTA or primary message in the second or third slide, most users will never see them.

Generic stock images

An image of smiling people in an office meeting adds no information or credibility. If the image doesn't communicate something specific about your product or your customer, it takes up space and distracts without contributing anything.

CTA below the fold on mobile

A landing page can have the CTA visible on desktop but buried after 800px of scroll on mobile, especially if the hero image is full-screen. Always test the above the fold on real mobile devices.

Text on image with low contrast

A background image with text on top is a common combination, but it frequently fails on accessibility and readability. Text/background contrast must exceed the WCAG AA ratio (4.5:1) even with images.

Examples: effective vs. ineffective above the fold

Case A: SaaS landing page (ineffective)

Menu with 8 items and a dropdown
Corporate hero image occupying 70% of visible space
Heading: "We transform the businesses of the future"
No visible subheadline without scrolling
CTA: "Contact us" in the footer

Result: the user doesn't understand what the product does, sees no clear benefit, and has no reason to click.

Case B: SaaS landing page (effective)

Menu with 4 items and a CTA button in the navbar
Direct heading: "Manage all your projects in one place"
Subheadline: "No lost emails, no unnecessary meetings. Your team, in sync."
Prominent CTA: "Try it free for 14 days" (no card required)
Three recognized client logos below the CTA
Product screenshot alongside

Result: in less than 5 seconds the user knows what it is, what it's for, what to do, and why they can trust it.

How to test and optimize your above the fold

Optimizing the above the fold should not be based solely on opinions or design trends. It should be based on data from your specific audience.

Step 1: Install a heatmap (Hotjar, Clarity) and analyze how far 50% of your visitors scroll. That's your real above the fold for your audience.

Step 2: Record sessions of new users on your main landing page. Observe what they read, what they ignore, and where they click first.

Step 3: Design improvement hypotheses based on what you observe. "If the CTA is higher up and the H1 message is more specific, the conversion rate will increase."

Step 4: Run an A/B test to validate the hypothesis with real traffic.

The above the fold is one of the elements with the greatest potential impact in CRO because it affects all users, not just those who reach the end of the page. A well-executed test here can have greater impact than ten tests in lower-visibility areas.

Landing page optimization always begins with an analysis of the above the fold: what the user sees, what they understand, and what they do in the first seconds.

For a quick diagnosis of your current landing page, try Scan&Boost and get concrete recommendations about your highest-impact zone.

Adrià Vidal, CRO specialist at Boost.