What is Above the Fold in Web Design?

The moment a page loads, users decide whether to stay or leave. That decision happens in the first visible screen, before a single scroll.

Understanding what is above the fold matters for anyone building or optimizing a website. It affects user behavior, conversion rates, page speed scores, and how Google indexes your content.

This guide covers everything you need to know:

• Where the fold actually sits across devices
• Why above-fold content drives most of your page’s engagement
• Which elements belong in the primary viewport
• How the fold connects to SEO, Core Web Vitals, and mobile-first design

What is Above the Fold?

Above the fold is the portion of a webpage visible in a browser window without scrolling. Every pixel inside that initial viewport height is above the fold. Every pixel below it is not.

The term comes from print. Broadsheet newspapers were physically folded in half on newsstands, so only the top portion was visible. Editors placed the most important headlines and images there to sell copies. When web design emerged in the 1990s, the same logic transferred directly to screen layout.

On a webpage, the fold line is not fixed. It shifts with every device, every browser, and every user’s display settings. A designer cannot point to a single pixel row and say “this is the fold.” What stays constant is the concept: the content a visitor sees the moment a page loads, before any interaction, is above the fold.

The fold exists on every page type: landing pages, homepages, product pages, and blog posts all have a primary viewport. That first screen is the most-viewed content on any page, regardless of what comes below it.

Where Is the Fold on a Webpage?

There is no universal fold line. The fold position depends on 3 variables: screen resolution, device type, and browser chrome height.

On desktop, 1920×1080 held 23% of global market share in 2024, making it the dominant resolution (StatCounter). But actual viewport height after subtracting browser toolbars and address bars typically sits around 900px to 940px on a maximized Chrome window at that resolution.

Mobile complicates this further. The most common mobile resolution in 2023 was 360×800, with 11% global share (StatCounter). Average mobile viewport height reached 812px in 2024, but browser UI like the address bar can cut 60px to 100px off that figure.

Designing for a single fold height is a mistake. The safe approach is to treat the fold as a range: roughly 600px to 900px depending on the audience’s device mix. A site’s own analytics data, filtered by screen resolution, gives a more accurate baseline than any industry average.

The viewport is the technical term for this visible area, and understanding it is the starting point for any above-fold layout decision. Modern media queries let developers adjust layouts at specific breakpoints so the fold content adapts across screen sizes rather than being fixed to one target.

What is the History of Above the Fold?

The fold started with newspapers. Broadsheet papers printed on large sheets were folded once horizontally before being stacked on newsstands. Only the top half was visible to passersby.

Editors quickly learned this. Stories that ran above the fold sold papers. Stories below the fold did not get seen unless someone picked up the paper first. The physical fold created a hierarchy of attention that publishers treated as prime real estate, charging more for above-fold ad placements.

When web design emerged in the late 1990s, designers borrowed the term directly. The logic was the same: the portion of a web page visible without scrolling received more attention. Early web design standards targeted an 800x600px screen as the fold baseline, since that was the dominant monitor resolution at the time.

By the mid-2000s, widescreen monitors shifted the target to 1024x768px. Then smartphones arrived, and the concept became significantly more complex. A fixed fold line was no longer workable when a single website needed to load on a 320px-wide phone screen and a 27-inch desktop monitor.

Responsive design changed the conversation from “where is the fold?” to “how does the above-fold zone adapt?” The term survived the transition. The fixed pixel target did not.

Why Does Above the Fold Content Matter for User Behavior?

Users spend 57% of their page-viewing time above the fold, with attention dropping sharply as they scroll further down the page (Nielsen Norman Group). That single stat explains why the initial viewport content receives more design attention than anything else on a page.

First impressions form in 50 milliseconds, according to research published in Behaviour and Information Technology. That is faster than a single eye blink. By the time a user has consciously processed a page, they have already formed a visual opinion about it.

Poor above-fold content raises bounce rates directly. Pages that load in 5 seconds have a 38% bounce rate, compared to 6% for pages that load in 2 seconds (Pingdom). Speed is part of the above-fold experience, not separate from it.

NN Group’s eye-tracking research also found users spend 65% of their viewing time on the top half of a screen. Below-fold content gets attention only when the above-fold content gives users a reason to scroll.

How Scroll Behavior Connects to Above-Fold Quality

Users do scroll. But whether they scroll depends almost entirely on what they see before they do.

Scroll depth data shows a predictable drop-off pattern. The first screenful retains nearly all users. Each additional screen loses a portion. If the above-fold content does not communicate value or signal that more relevant content exists below, a significant share of users leave without scrolling at all.

Visual cues help. A partial image, a cut-off headline, or a subtle scroll indicator tells users there is more below the initial view. Designing the fold with intentional “content hints” pointing downward is one of the more practical tools for keeping users engaged past the first screenful.

Why First Impressions Are Primarily Visual

94% of first impressions are design-related, not content-related (Forbes/Top Design Firms). That means layout, color, spacing, and typography in the above-fold zone carry more weight than the words themselves in those first fractions of a second.

This is why the visual hierarchy of the above-fold zone matters as much as the information it contains. A clear headline in the right typographic scale reads as credible. A cluttered hero section with 6 competing elements reads as untrustworthy, regardless of the copy.

The F-pattern reading behavior also applies here. Users scan the top-left to top-right of the above-fold area first, then move down the left side. Content placed outside this scan path gets significantly less attention in the initial view.

What Elements Belong Above the Fold?

The above-fold zone has limited vertical space and unlimited competition for it. Every element placed there must justify its position by directly serving user orientation or conversion.

The 4 elements that consistently belong above the fold are: the primary headline, a supporting subheadline or value statement, the primary call-to-action, and site navigation. Everything else should be evaluated case by case.

Above the Fold on a Landing Page

CTAs placed above the fold perform 304% better than those positioned below it (Loopex Digital, 2026). That number makes the case for above-fold CTA placement on landing pages without needing much else.

The structure that works: headline, subheadline, CTA button. Unbounce data consistently shows that adding a second competing CTA in the above-fold zone reduces conversion rates. One message, one action.

• Headline communicates the offer or outcome, not the feature
• Subheadline handles the “why this matters” in one sentence
• CTA button copy is action-specific, not generic (“Start Free Trial” not “Submit”)
• Trust signals (ratings, client logos) placed directly adjacent to the CTA

Above the Fold on a Homepage

A homepage above-fold zone carries a different job than a landing page. It needs to communicate what the site is, who it is for, and where to go next, all within 5 seconds (Nielsen Norman Group benchmark).

Navigation belongs here on a homepage. A well-structured navigation menu in the above-fold zone lets users self-select their path rather than being funneled toward a single CTA. This matters because homepage visitors arrive with widely different intents.

A hero image or video can reinforce the headline’s message visually, but it should not compete with it. The image supports the words. The words carry the meaning.

Above the Fold on a Product Page

E-commerce product pages follow a predictable above-fold formula that Amazon and major Shopify stores have refined for years.

Reviews, specifications, and shipping details belong below the fold. Users who need them will scroll. Users who are ready to buy should not have to.

How Does Above the Fold Affect SEO?

Google’s Page Layout Algorithm, launched in January 2012 and updated in October 2012 and February 2014, directly targets pages where ads dominate the above-fold zone. Google’s own statement at the time: pages that dedicate “a large fraction of the site’s initial screen real estate to ads” are not a good user experience and will not rank well.

That penalty is still active. It was not a one-time update. It runs continuously as part of Google’s core ranking systems.

How Core Web Vitals Connect to Above-Fold Content

Largest Contentful Paint (LCP) measures the load time of the largest visible element above the fold. Google’s threshold for a “good” LCP is under 2.5 seconds. Only 62% of mobile pages achieve this (2025 Web Almanac), making LCP the hardest Core Web Vital to pass.

The LCP element is almost always an above-fold asset: a hero image, a headline text block, or a banner. This means above-fold design decisions directly create or destroy LCP performance. An uncompressed hero image that loads in 4 seconds guarantees a poor LCP score regardless of how well everything else on the page performs.

• LCP threshold: under 2.5 seconds = good
• INP threshold: under 200 milliseconds = good (replaced FID in March 2024)
• CLS threshold: under 0.1 = good (layout shifts from above-fold ads are a common cause of CLS failures)

Above-Fold Content as a Relevance Signal

The first visible text on a page signals the page’s topic to Google’s crawlers. A hero section headline that clearly states the page’s subject gives Google an immediate topic signal before it processes the rest of the document.

Pages where the above-fold zone is dominated by navigation, ads, or images with no indexable text force Google to work harder to determine the page topic. This increases cost of retrieval. A clear, text-based headline in the primary viewport is the most straightforward way to reduce it.

Google’s mobile-first indexing, fully rolled out by July 2024, means the above-fold content on the mobile version of a page is what Google primarily evaluates. Desktop above-fold content is secondary. If the mobile above-fold zone hides the primary headline behind a large banner image, that headline’s SEO value drops significantly.

What is the Relationship Between Above the Fold and Page Speed?

Page speed and above-fold content are not separate concerns. The above-fold zone is the first thing a browser renders, so it is the most direct target for speed optimization.

Deloitte and Google research found that a 0.1-second improvement in page speed can transform the buyer journey and measurably improve conversion rates. The above-fold zone is where that 0.1 second is won or lost.

Critical Rendering Path and the Fold

The browser’s critical rendering path prioritizes above-fold content. When a page loads, the browser parses HTML, fetches CSS, and builds the DOM before anything appears on screen. Every render-blocking resource in this path delays the above-fold paint.

Inlining critical CSS directly in the HTML head is the most effective way to reduce above-fold render delay. Non-critical CSS loads asynchronously. This tells the browser to render the above-fold zone immediately without waiting for external stylesheets.

The same principle applies to JavaScript. Scripts that are not needed for above-fold rendering should use the defer attribute. Scripts placed in the <head> without defer or async block the entire render until they execute.

Lazy Loading Below the Fold

Images and assets below the fold should not load until the user scrolls toward them. This is lazy loading, and it directly improves LCP by reducing the browser’s initial resource queue.

Never apply lazy loading to above-fold images. This is the most common lazy loading mistake. A hero image tagged with loading="lazy" will actually delay LCP because the browser deprioritizes it, then has to load it at exactly the moment it becomes needed.

• Above-fold images: use fetchpriority="high" and preload with <link rel="preload">
• Below-fold images: use loading="lazy"
• Hero video: use compressed formats (WebP thumbnails, AVIF) and avoid autoplay on mobile

Skeleton Screens as an Above-Fold Strategy

Skeleton screens are placeholder layouts that display the above-fold structure before content loads. Users see an outline of the page immediately rather than a blank screen or a spinner.

This reduces perceived load time. The page appears to be responding, which keeps users from bouncing during the actual load. Google’s research on perceived performance shows that visual progress indicators improve user tolerance for load time by a measurable margin.

How Has Mobile Changed What “Above the Fold” Means?

Mobile now accounts for 63% of global web traffic, with that figure sitting consistently above 60% since 2023 (StatCounter). The above-fold zone on mobile is a fundamentally different design surface than on desktop, not just a smaller version of the same thing.

Scroll depth is 33% higher on desktop than mobile, meaning desktop users explore more of a page before leaving (SQ Magazine, 2025). Mobile users scroll faster and decide quicker. If the above-fold content on mobile does not immediately justify the visit, they leave.

Why Mobile Bounce Rates Are Higher

Mobile bounce rates run between 58-60%, compared to 48-50% on desktop (Semrush, 2023). A significant share of that gap comes from above-fold content that was designed for desktop and never properly adapted to a 390px-wide viewport.

The problems are consistent:

• Hero images sized for desktop compress awkwardly on mobile, hiding the headline
• Font sizes that read well at 1440px become too small on a 390px screen
• CTAs pushed below the visible area on mobile by oversized header sections

Google completed its mobile-first indexing migration on July 5, 2024. Every site is now crawled exclusively by Googlebot Smartphone. The above-fold content on the mobile version of a page is what Google sees first, and ranks accordingly.

Thumb Zone and Tap Target Design

The thumb zone is the screen area reachable without shifting hand grip. On a standard modern phone, that zone covers roughly the bottom two-thirds of the screen.

Primary CTAs in the above-fold area should land within thumb reach. Google’s Material Design guidelines recommend tap targets of at least 48px wide and 48px tall, with 8px minimum spacing between interactive elements to prevent accidental taps.

Navigation placement matters here too. A hamburger menu in the top-right corner is standard, but it sits outside the natural thumb zone for right-handed users. Sticky navigation keeps the menu accessible as users scroll, which partially solves this without changing the initial layout.

How the Fold Shifts Between Mobile and Desktop

Mobile-first design approaches the fold from the smallest screen outward, which is now the correct sequence. Designing desktop-first and scaling down consistently produces above-fold zones that underperform on the devices most people actually use.

What Are Common Above the Fold Design Mistakes?

Most above-fold failures come down to 1 problem: treating the initial viewport as a visual showcase rather than a communication zone.

Apple is one of the few brands that consistently gets this right. Their product landing pages lead with a single product name, one sentence of context, and no competing elements. Every other brand fighting for attention in a cluttered hero section is making the same mistake in varying degrees.

Full-Screen Hero Images With No Content Signal

The scroll-initiation problem: a full-viewport image with no visible text below it tells users the page is just the image. There is no reason to scroll because nothing signals that content exists beneath it.

This kills scroll depth. Users need a visual cue, a partial headline, a partially visible section, or an explicit scroll indicator, to understand that the page continues. Without it, a percentage will leave treating the hero image as the entire page.

Oversized Navigation Consuming Viewport Height

A desktop navigation bar that stacks three rows of links, a utility bar, and a promotional banner can consume 180px to 250px of viewport height before the actual page content starts.

On a 768px laptop screen, that leaves roughly 520px of visible content space. On a 667px mobile screen with browser UI, it can leave under 400px.

• Fix: consolidate navigation to a single row on desktop
• Fix: collapse promotional banners to under 40px height or remove them from mobile entirely
• Fix: use a hamburger menu on mobile to recover above-fold vertical space

Hiding the CTA Below a Large Hero Visual

CTAs placed above the fold perform 304% better than those below it (Loopex Digital, 2026). Yet a common layout pattern places the CTA directly below a hero image, which pushes it below the fold on a large percentage of screens.

The pattern to avoid: full-width image, then headline, then subheadline, then CTA. By the time users reach the CTA button on a 768px screen, they have already scrolled. Many do not get that far.

Autoplay Video as the LCP Element

Autoplay hero videos are the fastest way to destroy LCP scores. A video file large enough to fill a viewport above the fold is almost never going to load within the 2.5-second LCP threshold, especially on mobile connections.

The 2025 Web Almanac reports only 62% of mobile pages achieve a good LCP. Hero videos are a primary driver of that failure rate. The fix is a static compressed image as the LCP element, with the video loaded after initial paint. Users on poor connections never see the video anyway. Give them a fast, clear hero image instead.

Misusing White Space Above the Fold

There is a difference between intentional white space that creates clarity and accidental white space that wastes fold real estate.

Excessive padding around the logo, oversized line-height in the headline, and large top margins on the CTA all push content further down the page. On mobile, even 20px of unnecessary padding per element compounds quickly across 5-6 stacked components.

How Do You Test and Optimize Above the Fold Content?

Testing above-fold content is not optional at scale. What looks correct in a design tool does not always match real user behavior. The Dutch trampoline retailer Trampoline Plezier added a single CTA button above the fold based on heatmap data and saw a 50% increase in click-through rate (Hotjar case study). The change took hours to implement.

Heatmaps and Scroll Maps

Scroll maps are the most direct tool for understanding where your fold actually sits for real users. They show the percentage of visitors reaching each vertical depth of a page, revealing the exact point where attention drops off.

Click maps show which above-fold elements are getting clicks and which are being ignored. A hero image getting significant clicks often signals users are looking for a link that does not exist, a usability gap worth fixing.

Tools for this:

• Hotjar: scroll maps, click maps, session recordings
• Microsoft Clarity: free, includes heatmaps and session replays
• VWO: heatmaps combined with A/B testing in one platform

A/B Testing CTA and Headline Placement

Moving a CTA from below the fold to above it, changing the headline copy, or testing a shorter hero section against a taller one all qualify as structured A/B tests with measurable outcomes.

Adding a filtering system at the top of category pages, a change informed by scroll map data showing users scrolling all the way down without finding what they needed, led to a 63% increase in mobile conversion rate for bed retailer Time4Sleep (Hotjar case study).

The right sequence: run scroll maps first to identify where attention drops, then form a specific hypothesis, then run the A/B test. Skipping the scroll map step means testing blindly.

Core Web Vitals Monitoring for Above-Fold Performance

Google Search Console’s Core Web Vitals report tracks LCP, INP, and CLS by URL group across mobile and desktop separately. LCP failures almost always trace back to an above-fold asset: an uncompressed hero image, a render-blocking script, or a web font delaying text paint.

As of 2024, 50.5% of websites pass Core Web Vitals, up from 39% in 2022 (emailvendorselection.com). The gap between passing and failing sites often comes down to above-fold asset optimization.

Google PageSpeed Insights identifies the LCP element directly, naming the specific above-fold asset causing the delay. That is the right starting point for any above-fold performance audit.

What Is the Difference Between Above the Fold and Below the Fold?

Above the fold is the initial viewport. Below the fold is everything a user reaches by scrolling. The line between them is not static, but the functional difference is consistent across every device and page type.

Forbes Advisor data shows 74% of viewing time is spent on the first two screenfuls of a page. Above the fold captures the first. Below the fold captures the second, and only if the first gave users a reason to continue.

What Below the Fold Is For

Below-fold content handles everything that would clutter the primary viewport: supporting evidence, detailed specifications, secondary CTAs, testimonials, FAQs, and related content.

This is not a lesser zone. It is where users who are close to converting get the information they need to commit. A product page puts price and add-to-cart above the fold. It puts reviews, specifications, and shipping details below. Both zones serve different stages of the same decision.

Key distinction:

• Above the fold: captures attention, communicates value, initiates action
• Below the fold: builds confidence, provides detail, handles objections

When Below the Fold Matters More

For long-form content, editorial articles, and in-depth guides, the below-fold zone carries most of the value. Users who arrived specifically for detailed information will scroll. The above-fold zone’s job in these cases is simpler: confirm the page is the right one and get out of the way.

A good user experience treats above and below the fold as a single continuous flow, not as two competing zones. The above-fold content sets a visual and informational context that the below-fold content extends. When they feel disconnected, users notice, even if they cannot articulate why. The core web design principles of continuity and hierarchy apply across the entire page, not just the initial view.

Content usability across both zones depends on consistent visual hierarchy: the same typographic scale, spacing system, and grid system running from the top of the page to the bottom. A wireframe that maps both zones together before design begins is the most reliable way to keep them coherent.

FAQ on The Above the Fold

What does “above the fold” mean in web design?

Above the fold is the portion of a webpage visible in the browser window without scrolling. It is the first screen a visitor sees when a page loads. The fold line varies by device, screen resolution, and browser chrome height.

Where does the term “above the fold” come from?

It comes from print newspapers. Broadsheet papers were folded in half on newsstands, so only the top portion was visible. Editors placed key headlines there to attract buyers. Web designers adopted the term in the late 1990s.

Is there a fixed pixel height for the fold?

No. The fold position shifts with every device and browser. Desktop viewports typically sit between 640px and 940px tall. Mobile viewport height averaged 812px in 2024, but browser UI reduces that by 60px to 100px.

Does above the fold still matter in 2025?

Yes. Nielsen Norman Group data shows users spend 57% of their page-viewing time above the fold. That figure has held consistently. The fold matters less as a fixed line and more as a design priority zone.

What elements should go above the fold?

The primary headline, a supporting subheadline, the main call-to-action, and site navigation. On product pages, add price and an add-to-cart button. Every element must justify its position by serving user orientation or conversion.

How does above the fold affect SEO?

Google’s Page Layout Algorithm, active since 2012, penalizes pages where ads dominate the above-fold zone. The Largest Contentful Paint metric also measures load time of the largest above-fold element, directly tying fold design to search rankings.

Does above the fold affect conversion rates?

Significantly. CTAs placed above the fold perform 304% better than those below it. Moving a single CTA button above the fold increased click-through rate by 50% for one e-commerce retailer, according to Hotjar case study data.

How does mobile change the above the fold zone?

Mobile accounts for 63% of global web traffic. Smaller viewports mean less content fits in the initial screen. Mobile bounce rates run 58-60%, compared to 48-50% on desktop. Above-fold content on mobile must communicate value faster.

How do you test above the fold performance?

Use scroll maps in tools like Hotjar or Microsoft Clarity to find where user attention drops. Run A/B tests on CTA placement and headline copy. Monitor Core Web Vitals in Google Search Console to track LCP performance over time.

What is the difference between above the fold and below the fold?

Above the fold captures attention and drives initial action. Below the fold builds confidence with supporting detail, reviews, and specifications. Both zones serve different stages of the user decision. Neither works well without the other.

Conclusion

This conclusion is for an article presenting what is above the fold as one of the most consequential zones in web design, not just visually, but technically and strategically.

The initial viewport determines scroll behavior, Largest Contentful Paint scores, ad viewability, and whether users convert or bounce.

Fold position is not fixed. It shifts with screen resolution, device type, and browser chrome. Designing for a single pixel target is the wrong approach.

Test with scroll maps. Monitor Core Web Vitals. Keep your primary call-to-action within the primary viewport on every breakpoint.

Get the first screen right, and everything below the fold gets a chance to perform.