Every visitor makes a quick decision on the first screen: is this page about what I came for, and is it worth scrolling? If the top of the page is a stock photo, a vague slogan and a cookie banner, many people leave before they reach the useful part you spent weeks writing.
“Above the fold” is an old newspaper term, but the problem it describes has become harder. Visitors arrive on phones, tablets, laptops and widescreen monitors, often from an ad or an AI answer that already told them half the story. The first screen has to confirm they landed in the right place, show the next step and load fast enough that they never notice it loading.
This guide explains what the fold actually is in 2026, what belongs in the first screen of each major page type, how to handle mobile, where Core Web Vitals come in and how to test changes without fooling yourself.
Where the fold actually sits on today’s screens
The fold is simply the bottom edge of the browser viewport when the page first loads. Everything visible without scrolling is “above the fold”; everything else is below it. Semrush’s guide puts it plainly:
“Above the fold refers to the part of your landing page that visitors see without scrolling, and it strongly influences whether visitors stay or leave.”
— Semrush, Landing Page Optimization
What has changed is that there is no single fold. The same page has many folds depending on the device, browser toolbars, zoom settings and banners. A visitor on a phone held upright sees a tall, narrow slice. A visitor on a laptop sees a wide, short slice. A visitor with a consent banner open may see only half of either.
That has three practical consequences:
- Design for a range, not a pixel. Pull the top screen resolutions from your analytics (GA4: Reports → Tech → Tech details, dimension “Screen resolution”) and check your page in the three or four most common ones.
- Remember the overlays. Cookie banners, chat widgets, sticky headers and app-install prompts all eat into the first screen. Measure the space that is left when they are open, because that is what a first-time visitor sees.
- The first screen is a promise, not the whole pitch. Visitors do scroll when the top of the page tells them the content below is relevant. Your job above the fold is to earn the scroll, not to cram everything in.
A quick way to see your real first screen
- Open the page in a private window so you get the first-visit experience, including the consent banner.
- Open Chrome DevTools, toggle the device toolbar and pick a common phone size (for example 390 × 844 CSS pixels) plus a common laptop size from your analytics.
- Take a screenshot of each viewport without scrolling.
- Cover everything except the visible area and ask a colleague who has not seen the page: what is this page offering, who is it for and what would you click?
- If they cannot answer all three in about five seconds, the first screen needs work.
The five jobs of a first screen
Different pages need different first screens, but almost every good one does the same five jobs. Use this as a checklist before you argue about colours or imagery.
| Job | What it looks like | Typical failure |
|---|---|---|
| Confirm relevance | A specific H1 that matches the ad, search query or link the visitor clicked | Clever slogan that does not name the product or service |
| State the value | One sentence on the outcome, for whom, and why you rather than the alternative | Feature list or company history |
| Show the next step | One primary button with a verb-led label; optional secondary link | Three equal buttons competing for attention |
| Reduce doubt | Trust signal near the CTA: rating, client logos, guarantee, accreditation | Trust signals hidden in the footer |
| Signal there is more | Content that visibly continues below the edge of the screen | A full-height hero that looks like the end of the page |
The last point is underrated. A “false floor” happens when a hero fills exactly 100% of the viewport with a clean bottom edge. It looks finished, so people do not scroll. Letting the next section peek in by a few dozen pixels is a simple fix.
Writing the headline and value proposition that sit up top
The headline does most of the work above the fold. Semrush’s landing page guidance recommends starting with “a clear headline that explains what your offer is and why your audience should care,” and that is the right standard: clarity first, cleverness second.
A practical formula for the H1 and the line under it:
- H1: what it is + who it is for, in the visitor’s words. “Bookkeeping for UK restaurants” beats “Numbers, simplified”.
- Subheading: the outcome and the proof or differentiator. “Month-end closed in five working days, with a named accountant who knows hospitality.”
- Optional bullets (two or three): the objections people raise most often — price model, setup time, contract length.
If you are struggling to write that line, the problem is usually positioning rather than copy. Our guide to writing a value proposition walks through the inputs.
Message match for paid traffic
For pages that receive ad traffic, the H1 should echo the promise in the ad. If the ad says “Same-day boiler repair in Leeds”, the first screen should say the same thing, not “Welcome to Smith Heating Services”. Mismatch here is one of the cheapest conversion leaks to fix; see our guide to PPC landing pages for the full checklist.
Unique content per page
Semrush’s article notes Google’s John Mueller saying some above-the-fold content should be unique to each page, such as the heading. Templates that repeat the same hero banner across hundreds of service or location pages make every page look identical at the top — to people and to search engines. Give each page its own H1 and opening line at minimum.
Calls to action and trust signals in the first screen
Placement advice is consistent: put the primary CTA near the headline. Semrush’s guide says to “Place your CTA near the headline, so it’s easy to see and understand,” and its CTA guide suggests “obvious locations where the eye is naturally drawn, such as above the fold.”
That does not mean every page should push a hard sale in the first screen. Match the CTA to the commitment the visitor is ready for:
| Offer type | Primary CTA above the fold | Where the hard CTA goes |
|---|---|---|
| Low-cost ecommerce product | Add to basket, with price and delivery estimate | Above the fold |
| Emergency local service | Click-to-call button plus opening hours | Above the fold, repeated in a sticky bar on mobile |
| B2B software | Start free trial or Book a demo, with a secondary “See how it works” | Above the fold and after the feature walkthrough |
| High-value professional service | See pricing / Read case example / Book a call | Repeated after proof and process sections |
| Blog article | None; the content itself is the first screen | Inline after the reader gets value |
Our call-to-action writing guide covers button copy in more detail.
Which trust signals earn first-screen space
Put the single strongest piece of proof next to the CTA, not a wall of badges. Good candidates are an aggregate review score with the review count, three or four recognisable client logos, a guarantee or returns promise, or an accreditation that buyers in your industry actually check. For online stores, our guide to ecommerce trust signals ranks the options by impact.
Hero images, video and sliders: what earns the space
Visuals above the fold should explain, not decorate. A product photo, a screenshot of the interface, a before-and-after or a photo of the actual team on a job all carry information. Generic stock imagery mostly pushes the copy down and adds weight to the page.
A few rules of thumb that hold up across most sites:
- Prefer one static hero over a carousel. Auto-rotating sliders show most visitors only the first slide, move while people are reading and often load several large images. If stakeholders each want their message on the homepage, that is a prioritisation problem, not a design problem.
- Autoplay video should be silent, short and optional. Use a poster image so something meaningful appears immediately, and never make the CTA depend on watching.
- Keep text out of images. Headlines baked into a JPEG are invisible to search engines and screen readers, cannot be translated easily and often become unreadable on phones.
- Watch the ad load. If you run display ads, a first screen dominated by ads is exactly what Google’s 2012 page layout algorithm targeted (more on that below).
Speed and Core Web Vitals for the top of the page
The first screen is also where performance metrics are decided. Largest Contentful Paint measures when the biggest visible element renders, which for most pages is the hero image or headline block.
“LCP reports the render time of the largest image, text block, or video visible in the viewport, relative to when the user first navigated to the page.”
— web.dev, Largest Contentful Paint (LCP)
According to web.dev, a good LCP is 2.5 seconds or less, “needs improvement” runs from 2.5 to 4.0 seconds and anything above 4.0 seconds is poor, measured at the 75th percentile of page loads. Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024, so heavy JavaScript in the hero (sliders, animation libraries, chat widgets that load immediately) can also hurt responsiveness.
The settings that matter most for the first screen:
| Element | Setting | Why |
|---|---|---|
| Hero image | loading="eager" (the default) and fetchpriority="high" | It is usually the LCP element; lazy-loading delays it |
| Hero image | Responsive srcset with correct sizes; WebP or AVIF | Phones should not download desktop-sized files |
| Images below the fold | loading="lazy" | Saves bandwidth for what is actually seen first |
| Web fonts used in the H1 | Preload the one weight you need; font-display: swap | Stops invisible headline text while fonts load |
| Critical CSS | Inline the styles needed for the first screen; defer the rest | Removes render-blocking requests before first paint |
| Hero dimensions | Set width and height (or aspect-ratio) | Prevents layout shift (CLS) when the image arrives |
For the image side, our guide to responsive images and srcset shows the exact markup, and preload and preconnect hints explains when a hint helps and when it competes with the hero image. If you want to dig into why your lab score and real-user data disagree, read field data vs lab data.
The 2012 page layout algorithm and ads above the fold
In January 2012 Google launched what it called a page layout algorithm. Search Engine Land reported at the time that it lowered rankings for sites where content was hard to find because static ads dominated the area above the fold, and that it affected less than 1% of searches. Google also told the publication how it evaluated sites:
“This is a site-based algorithm that looks at all the pages across an entire site in aggregate.”
— Google statement reported by Search Engine Land, Too Many Ads Above The Fold Now Penalized By Google’s Page Layout Algorithm
Two lessons still apply. First, the problem was ads pushing content down, not ads existing; a sensible ad below a clear headline and opening paragraph is fine. Second, the evaluation was site-wide, so one ad-heavy template used on thousands of pages could pull down the whole site. Semrush’s article also points to the Coalition for Better Ads standards, which discourage experiences such as large sticky ads and mobile ad density above 30%.
Pop-ups follow similar logic. An interstitial that covers the content the visitor came for on arrival is the opposite of a good first screen. Our guide to website pop-ups that convert covers timing and triggers that do not wreck the first impression.
Mobile first screens need different decisions
On a phone, the first screen is often only enough for a logo bar, a headline, two lines of text and one button. That forces trade-offs that desktop hides.
- Shrink the header. A 120-pixel sticky header on a phone can take a seventh of the screen. Keep the logo small and collapse navigation.
- Put the CTA in the thumb zone. For call-driven businesses, a sticky bottom bar with “Call now” and “Get a quote” keeps the action available without dominating the hero.
- Cut the subheading, not the H1. If something has to go, trim supporting text before you trim the line that confirms relevance.
- Stack, do not shrink. Side-by-side hero layouts become image-on-top on mobile, which pushes copy below the fold. Consider placing the text first and the image second on small screens.
- Test the consent banner. A full-width banner on mobile can hide the whole hero. Compact banner designs that still meet your legal obligations make a measurable difference to what people see first.
Google indexes the mobile version of pages, so the mobile first screen is not a secondary concern. Whatever is unique and important on desktop should be present on mobile too.
What goes above the fold on homepages, service pages, product pages and articles
The five jobs stay the same, but the content that does them changes by page type.
| Page type | Must be in the first screen | Can wait until below |
|---|---|---|
| Homepage | What you do, for whom, primary route (shop categories, get a quote, book), one trust signal | Company story, full service list, blog teasers |
| Service or local landing page | Service + location in the H1, phone or quote CTA, review score, service area | Process, FAQs, team, detailed pricing explanation |
| Product page | Product name, main image, price, key variant selector, add to basket, delivery or returns line | Full specs, reviews detail, related products |
| SaaS feature page | Problem solved, product screenshot, trial or demo CTA | Integrations, pricing table, security details |
| Blog article | Specific H1, short intro that confirms the reader’s problem, start of the answer | Author bio, related posts, newsletter signup |
For articles specifically, resist the urge to put a large featured image, social share bar and newsletter box ahead of the first paragraph. The reader came for an answer; start giving it. Our homepage SEO guide covers the homepage case in more depth, and seasonal landing pages shows how to swap a first screen for peak periods without breaking URLs.
A worked example: rebuilding a plumber’s service page first screen
This is a hypothetical example to show the process; the numbers are illustrative.
A local plumbing company’s “Boiler repair” page receives about 3,000 visits a month, mostly from mobile. On a common phone viewport the first screen shows a large logo, a hamburger menu, a stock photo of a smiling technician and the words “Quality you can trust”. The phone number is in the footer. The cookie banner covers the bottom third. Form and call conversions run at 2% — around 60 leads a month.
The rebuilt first screen:
- Header reduced to a small logo and a tap-to-call icon.
- H1 changed to “Boiler repair in Leeds — same-day visits, 7 days a week”.
- Subheading: “Gas Safe registered engineers. Fixed call-out fee shown before we book.”
- Two buttons: “Call now” (primary) and “Book online” (secondary).
- Review score and count placed directly under the buttons.
- Stock photo replaced with a real van-and-engineer photo moved below the buttons on mobile, served as a correctly sized WebP with
fetchpriority="high". - Consent banner switched to a compact bottom bar.
To judge the change, the team runs the old and new versions as an A/B test. If conversions rose from 2.0% to 2.6%, that would be 78 leads instead of 60 from the same traffic. Whether that difference is real depends on sample size and test duration, which is why the next section matters.
Testing first-screen changes without fooling yourself
Above-the-fold changes are attractive to test because they touch every visitor. They are also easy to misread. A sensible process:
- Diagnose before you redesign. Use scroll maps and session recordings to see how far people get and where they hesitate. Our guides to heatmaps and Microsoft Clarity explain how to read them.
- Write one hypothesis per test. “Changing the H1 to name the service and city will increase quote requests” is testable; “refresh the hero” is not.
- Pick the right metric. Use conversions (leads, sales, trial starts) as the primary metric, and scroll depth or bounce only as diagnostics.
- Segment by device. A change that helps desktop can hurt mobile. Check both before rolling out.
- Run to a pre-set sample size. Stopping when the dashboard turns green inflates false positives. Our guide to A/B test statistical significance explains how to set the sample size before you start.
- Check speed after shipping. A winning variant that adds a heavy video can quietly worsen LCP for everyone. Re-check Core Web Vitals once the change is live.
Semrush’s guide recommends testing CTA placement above versus below the fold rather than assuming, which matches what we see: for complex purchases, a CTA repeated after the explanation often matters as much as the one at the top.
Questions teams ask about above-the-fold design
Is there a standard pixel height for the fold?
No. The fold is wherever the bottom of the viewport sits on the device in front of the visitor, so it changes with screen size, browser chrome, zoom level and whether a cookie banner is open. Design for a range of viewports from your analytics rather than a single number.
Does Google rank pages lower if the main content starts below the fold?
Google’s 2012 page layout algorithm targeted sites where static ads pushed content down, and Google has said some unique content (such as a heading) should be visible at the top. There is no rule that every word must be above the fold, but a page whose first screen is mostly ads or decoration is a risk for both users and rankings.
Should the main call to action always be above the fold?
For simple, low-commitment offers, yes. For expensive or complex offers, visitors often need more information first, so a secondary action at the top (such as “See pricing” or “How it works”) and the main CTA repeated after the explanation usually works better. Test it rather than assuming.
Are homepage sliders bad for conversions?
Auto-rotating sliders tend to hide most of their messages, move while people are reading and often load a large image that slows Largest Contentful Paint. A single, clear static hero with one message is the safer default.
Should I lazy-load the hero image?
No. The hero image is usually the Largest Contentful Paint element, so lazy-loading it delays the metric. Load it eagerly, size it correctly and consider fetchpriority="high"; lazy-load images further down the page instead.
Fixing your most important first screen this week
Pick the one page that gets the most traffic or ad spend. Screenshot its first screen on the top two devices in your analytics, with the consent banner open. Run the five-second test: what is it, who is it for, what do I click? Then fix the H1, move the CTA and strongest trust signal up, and make sure the hero image is sized and prioritised correctly.
If you would like a second pair of eyes, our conversion rate optimization team audits first screens alongside page speed optimization, so design and performance fixes ship together. Get a quote and tell us which page matters most.
Further reading on above the fold
- Marketing for Professional Services Firms
- Brand Architecture: Managing Sub-Brands and Product Names
- Win/Loss Analysis: Learn Why Deals Close or Die
