← CRO Academy
Teardown

Above-the-fold teardown: the 7 conversion leaks on your first screen

Most visitors decide within seconds whether to stay or leave. Here are the seven conversion leaks that make them leave, and exactly how to test your way out of each one.

The decision is made before the scroll. A visitor lands on your page, spends a few seconds with whatever is visible without scrolling, and either commits to going further or leaves. Everything below the fold (your features, your testimonials, your pricing, your FAQs) only gets seen if the first screen earns it.

That is the observable shape of how people use the web. What is less obvious is that the first screen fails in a small, predictable set of ways. The same leaks turn up on SaaS homepages, lead-gen landing pages, and e-commerce product pages alike. Once you can name them, the teardown gets faster, the hypotheses get sharper, and the experiments get likelier to move the number. Here are the seven, and the experiment to run for each.

The seven above-the-fold leaksA browser window mockup containing a headline block, two competing call-to-action buttons, a missing-proof gap, and a long form. Seven small numbered teal and red markers point at where each conversion leak occurs. yoursite.com Menu · Menu · Menu Start free Book a demo Submit 1 2 3 4 5 6 7 1 value prop · 2 competing CTAs · 3 missing proof · 4 long form · 5 slow LCP · 6 mobile layout · 7 distractions
The first screen, annotated: the seven places a visitor's intent leaks away before they ever scroll.

Leak 1: a vague value proposition #

The most expensive above-the-fold problem is a headline that never answers the visitor’s first question: “Is this for me, and what do I get?”

Vague headlines come in a few recognisable forms. The category claim (“The leading platform for modern teams”) describes the product, not the outcome. The clever-but-opaque line (“Work differently”) sounds good in a workshop and means nothing to a first-time visitor. The superlative pile (“Powerful, flexible, and seamless”) is simultaneously true of every competitor, so it differentiates nothing.

The mechanism is simple. If a visitor cannot tell within seconds whether your offer is relevant to their situation, they leave, and they attribute the confusion to you, not to themselves.

The experiment: write three headline variants, each naming a specific outcome, a specific audience, and ideally the trade-off avoided (“without X”). Run an A/B test on the headline and sub-headline only: no other changes, so the result is clean. Measure a downstream conversion event (trial, demo, purchase), not clicks alone. If traffic is too thin for a clean test, run a five-second test with five people from your target audience and ask each to recall what the product does. Accuracy of recall is your signal.

Leak 2: competing or too many CTAs #

A page with multiple primary CTAs is a page with no primary CTA. When you give a visitor three equally prominent buttons (“Start free trial,” “Book a demo,” “Watch the video,” “See pricing”), you have handed them the prioritisation decision. Visitors do not want to prioritise. They want to be guided.

The leak is cognitive. The visitor spends decision energy on which action to take rather than on whether to take the one you actually want. More options at equal visual weight reliably reduces total action-taking.

The fix is not always to delete options. It is to establish hierarchy. One primary CTA gets the dominant treatment: colour, size, placement. A secondary action, if genuinely needed, becomes a quieter text link or ghost button. That hierarchy is your recommendation to the visitor, made visible.

The experiment: strip the first screen to a single highest-intent CTA. If your analytics show a secondary action driving real conversion, test demoting it to a text link rather than removing it outright. Measure the primary conversion event, not CTA clicks: a button can earn more clicks while the page converts less.

A hero that converts

  • One headline that names a specific outcome for a specific audience
  • A single, visually dominant primary CTA
  • One proof element within sight of the button
  • A short form, or no form until value is shown
  • A clean, fast, distraction-free first screen

A hero that leaks

  • A clever or generic line that could front any competitor
  • Three buttons at equal weight, each pulling a different way
  • The nearest testimonial five scrolls down
  • An eight-field form before any value is proven
  • A carousel, an autoplay video, and a twelve-link nav

Leak 3: no proof near the decision #

Trust has to be earned at the moment it is needed, not somewhere below the fold most visitors will never reach.

Imagine a SaaS pricing page. The headline makes a promise, the CTA asks for a commitment, and the nearest social proof is a testimonial block five scrolls away. The visitor is being asked to trust before they have been given a reason to. That gap between claim and proof is exactly where conversions leak.

The principle (consistent with Nielsen Norman Group’s work on how people scan pages) is that credibility cues placed adjacent to the primary CTA outperform the same cues positioned elsewhere. A customer logo bar directly under the headline, a one-line metric beside the CTA, or a short quote tied to the precise outcome the headline promises all close the trust gap at the moment it matters.

The experiment: move your strongest proof element (one real quote, one specific metric, one recognisable logo bar) into the first screen, directly adjacent to or beneath the primary CTA. Keep everything else unchanged. Measure downstream conversion. If you do not yet have proof worth placing there, social proof that persuades covers what actually moves people versus what reads as filler.

Proof placed next to the decision does work. Proof buried below the fold is decoration.

Leak 4: the form asks for too much #

If your first-screen conversion action involves a form (a sign-up, a lead capture, a demo request), every field is a tax. The visitor is doing quiet arithmetic: is what I get worth what I am giving up?

Say a lead-gen form asks for first name, last name, email, phone number, company name, company size, job title, and how they heard about you. That is eight fields before a visitor has seen a single proof of value. The Baymard Institute’s research on checkout abandonment finds form length to be a consistent driver of abandonment, and the same dynamic plays out on lead-gen and SaaS sign-up forms.

The harm of unnecessary fields is not just the time they cost. It is the signal they send: “We need a lot from you before we will help you.” That triggers proportional hesitation.

The experiment: identify the minimum data required to deliver value on the next step: not what the CRM would like, not what the sales team prefers for enrichment, but what the next step actually needs. Cut every field beyond that. Run the reduced form against the full one, and collect the rest progressively once you have delivered something worth staying for. The friction audit is a structured way to find these taxes across the whole flow.

Rule of thumb: ask up front only for the fields you genuinely cannot collect later. Everything else gets asked after you have already delivered something worth staying for.

Leak 5: slow mobile LCP #

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element to render: usually the hero image, the headline block, or a video thumbnail. If that element takes more than the recommended 2.5 seconds to appear on a mobile connection, a meaningful share of your visitors never see the page they were meant to convert on.

For consumer and SMB-facing products, mobile traffic frequently exceeds half of all visits. A slow LCP is therefore a conversion tax applied to your largest segment before a single word of your copy is read.

Page speed and conversion covers the full picture. For the first screen specifically, the high-priority checks are: hero image format and size (WebP, sized for mobile viewports), render-blocking scripts in the <head>, and LCP elements that have been lazy-loaded by mistake. Run PageSpeed Insights against your mobile score; an LCP above 2.5 seconds is a leak to fix before any messaging experiment, because it caps the audience every other test can reach.

The experiment: measure current mobile LCP and fix the single highest-impact issue, typically hero image weight or a render-blocking resource. If you cannot tie conversion directly to LCP yet, compare bounce and engagement on mobile sessions before and after the fix.

Leak 6: the layout breaks on mobile #

A related but distinct problem: the page loads fast enough, but the first-screen layout on mobile is not the layout that was designed. The hero image crowds out the headline. The CTA sits half off-screen. The sub-headline wraps to four lines and buries the message. Desktop font sizes render as a wall of undifferentiated text at 320 pixels.

This is more common than teams realise, because QA usually happens on whatever device the designer is holding. Emulators help; testing on real devices across the viewport range your analytics actually show is the only reliable signal.

The experiment: check the first screen on at least five real devices or viewports spanning your traffic, and treat every layout failure as a bug rather than a polish item. Then watch a session-replay segment of mobile-only traffic and study the first ten seconds, and compare scroll-depth heatmaps for mobile versus desktop to see whether mobile visitors abandon before the first fold. How to read a heatmap and session replay: what to look for explain how to interpret both without sinking hours into low-signal footage.

See your own site’s conversion leaks in 15 seconds

Run a free CRO scan. No account needed.

Run a free scan →

Leak 7: distractions (carousels, autoplay, nav clutter) #

The first screen often competes with itself. A rotating carousel cycles through four value propositions, none read in full. An autoplaying background video pulls the eye off the headline. A navigation bar with twelve links hands every visitor twelve reasons to go somewhere other than the conversion action.

Each element has a surface rationale. The carousel accommodates every stakeholder’s priority. The video shows the product. The nav aids discoverability. The problem is that these rationales optimise for internal consensus, not for visitor decision-making.

Carousels in particular are well-studied. Nielsen Norman Group has documented that users rarely interact with panels beyond the first and that auto-advancing carousels are largely ignored. The attention you believe the carousel captures is mostly being lost.

The experiment: replace the carousel with a single strong static hero (best value proposition, one CTA, one proof element) and run it against the carousel control. This is a high-confidence bet: the mechanism is clear and the direction of effect is consistent across the research. For navigation, test a variant with the primary nav simplified or hidden: a minimal sticky header, or none at all on dedicated campaign pages. Measure the downstream conversion event, not time on page.

Rule of thumb: if a first-screen element mainly solves an internal stakeholder problem rather than a visitor problem, it is a distraction. Move it below the fold or remove it.

The seven leaks at a glance #

Leak What it looks like The experiment
1. Vague value proposition A clever or category-generic headline that names no outcome and no audience A/B test three outcome-specific headline variants; or a five-second recall test
2. Competing CTAs Several equally prominent buttons pulling in different directions Strip to one primary CTA; demote secondaries to text links and measure primary conversion
3. No proof near the decision The nearest testimonial or logo bar is scrolls away from the button Move one strong proof element adjacent to the CTA; measure downstream conversion
4. Form asks for too much Eight fields before any value is shown Cut to the minimum the next step needs; test reduced versus full form
5. Slow mobile LCP The hero takes more than 2.5s to render on mobile Fix the heaviest LCP blocker; compare mobile bounce and engagement before and after
6. Layout breaks on mobile CTA off-screen, headline crowded, text unreadable at 320px Real-device QA across your viewport range; treat each break as a bug
7. Distractions Carousel, autoplay video, twelve-link nav Replace the carousel with one static hero; test a simplified nav; measure conversion

Running the teardown: a repeatable process #

You now have seven leaks. You will not fix all seven at once. Running seven experiments in parallel is not a programme, it is noise. The right move is to triage, then sequence.

  1. Triage with evidence. Walk your own first screen on desktop and a real phone, then back each suspected leak with data: session replays of visitors not reaching the CTA, scroll and click heatmaps, real-device QA, and a PageSpeed run. Evidence, not opinion, decides what counts as a leak.
  2. Score with ICE. Rate each leak on Impact, Confidence, and Ease (1-10), multiply, and rank. Impact is highest on the critical path (value prop, CTA, form) and on performance or layout when mobile traffic is large. Confidence rises with direct evidence. Ease varies: headline rewrites are fast; performance work needs engineering; a stakeholder-owned carousel is more political than technical.
  3. Test the top leak cleanly. Run the highest-scoring item as a single-variable A/B test where traffic allows, so the result is attributable. If traffic is thin, ship the fix on the best available evidence and measure before-and-after on your primary metric.
  4. Roll out and re-rank. Promote winners, retire losers, fold what you learned back into the backlog, and move to the next leak. Sequential, compounding wins almost always beat any single swing.

Use ICE scoring for the ranking and the CRO process in five steps for the loop around it. The most common ICE error is letting cheap, low-impact wins crowd out the changes that actually move the number. Do not let ease inflate trivial work.

Frequently asked questions #

Where exactly does the fold sit?

There is no fixed pixel. The fold is whatever is visible without scrolling on a given device, and it differs across phones, laptops, and monitors. Design and test against the most common viewport in your own analytics rather than a single assumed height. And because mobile usually dominates, treat the mobile first screen as the one that matters most.

Should I run all seven experiments at once to move faster?

No. Concurrent tests on the same first screen interfere with each other and muddy attribution, and a flood of half-evidenced changes is hard to learn from. Triage, ICE-score, and run the top leaks as clean single-variable tests. Sequential compounding beats parallel noise.

What if my traffic is too low for statistically clean A/B tests?

Lead with the leaks whose mechanism is strongest and least dependent on your numbers: a vague headline, competing CTAs, a slow LCP, a broken mobile layout. Fix the highest-ICE item on the best available evidence and measure before-and-after on your primary metric. See sample size and test runtime for what your traffic can and cannot support, and statistical significance without fooling yourself before you call a winner.

Is above-the-fold optimisation still worth it if people scroll now?

Yes. People do scroll, but only when the first screen gives them a reason to. The first screen is the filter that decides who reaches the rest of your argument, so it is the highest-leverage section on the page, not a relic of no-scroll browsing.

Every visitor on your first screen has already expressed intent: they clicked an ad, followed a link, searched a term. The page’s only job is to meet that intent. Most pages dissipate it. Find the leaks, run the experiments, and convert more, guess less.

OW

OptiWolf

OptiWolf is CRO and lead-generation software: A/B testing, personalization, and lead-capture popups on one measurement spine. The CRO Academy is where we share the playbooks. Convert more, guess less.