What Is Above the Fold?
Above the fold refers to the portion of a web page visible without scrolling. The term originates from newspaper printing, the top half of a folded newspaper that faces up on a newsstand. In web design, above-the-fold content is what users see the moment a page loads, before any interaction. It's the most important real estate on a page because it determines first impressions and scroll-through rates.
Why above the fold matters
Research consistently shows that users spend 80% of their attention above the fold. Content below the fold receives far less attention, and the further down the page, the less it's seen. This makes above-the-fold design critical for conversions: your headline, primary CTA, and key value proposition must all be visible without scrolling.
There is no single fold
The phrase comes from newspapers, where the most important stories were printed on the top half of the front page so they could be seen when the paper was folded on a news stand. On the web there is no single fold. Its position depends on the viewport: a 1366 by 768 laptop screen shows far less vertical space than a large desktop monitor, a phone in portrait shows a narrow, tall slice, and browser toolbars, cookie banners and zoom settings all shrink the visible area further. Designers therefore treat the fold as a range rather than a line, and check a few key sizes, typically a common phone, tablet and laptop, rather than one screen. Users do scroll, but eye-tracking research from Nielsen Norman Group has found that people still spend most of their viewing time on the first screenful, so what appears there decides whether they keep going.
How above-the-fold content affects a page
When a page loads, the browser renders the content in the initial viewport first, and several performance metrics depend on it. Largest Contentful Paint (LCP) measures when the largest image or text block in the viewport finishes rendering, so the hero image or main headline above the fold is usually the LCP element. Cumulative Layout Shift (CLS) is often caused by elements above the fold that load late and push content down, such as banners, web fonts or images without dimensions. The layout above the fold also shapes behaviour: visitors quickly judge whether a page is relevant from the headline, supporting line, imagery and the first call to action they see. On a typical Bootstrap 5 landing page, that area is a hero section built with a .container, a .row with .align-items-center, an <h1> (often styled with a class such as .display-4), a .lead paragraph and a .btn-lg call to action, sometimes inside a .min-vh-100 wrapper to fill the screen. Search engines pay attention too: Google's page layout algorithm, introduced in 2012, targeted pages where ads pushed the actual content below the fold, and its guidance on intrusive interstitials discourages pop-ups that cover the main content on mobile.
How browsers render the fold
The fold is defined by the intersection of the document layout and the browser viewport, which is exposed via the CSS viewport units (vh, vw) and the JavaScript properties window.innerHeight and document.documentElement.clientHeight. When a page loads, the browser renders everything the layout engine places within those pixel bounds first, making the above-the-fold zone the highest-priority rendering target. Resources outside this zone can be deferred or lazy-loaded without affecting perceived load time, while resources inside it must arrive and paint as fast as possible to score well on LCP and First Contentful Paint (FCP). From a rendering pipeline perspective, the browser constructs the DOM and CSSOM in parallel, combines them into the render tree, runs layout (reflow), and then paints pixels to screen. Any render-blocking resource, such as a synchronous script tag in the head or an unoptimized CSS file, delays the point at which above-the-fold content becomes visible. Google's PageSpeed Insights and Lighthouse specifically flag render-blocking resources because they push the fold paint later in the critical rendering path, increasing Time to First Byte (TTFB) impact and LCP scores. CSS plays a direct structural role in defining what appears above the fold. Properties like height: 100vh on a hero section guarantee the section exactly fills the viewport, while min-height: 100svh uses the newer Small Viewport Height unit (supported in all major browsers as of 2023) to handle mobile browser chrome more accurately. Flexbox and CSS Grid inside that constrained height allow precise control over what content is visible without overflow, and the overflow: hidden declaration on the container prevents content from accidentally bleeding below the fold boundary. Critical CSS is the technique of inlining only the CSS rules needed to render above-the-fold content directly in the HTML head, then loading the full stylesheet asynchronously using rel=preload with onload. Tools like Critical (npm) and PurgeCSS can extract this subset automatically. By reducing the number of render-blocking stylesheets, browsers can paint the visible viewport sooner, which is the core mechanism behind improving LCP from the CSS side without changing the visual design at all.
Above the fold SEO considerations
Google's Page Layout algorithm penalises pages with too many ads or intrusive interstitials above the fold. Your primary content (not just a large image or banner) should be visible above the fold. From a Core Web Vitals perspective, the Largest Contentful Paint (LCP), your main above-the-fold element, must load in under 2.5 seconds to score well.
Above the fold best practices
State what the page offers in plain words in the first heading, support it with one short line, and show one clear primary action; secondary links can wait until lower down. Give visitors a visual cue that there is more below, such as the top of the next section peeking into the viewport, rather than a perfectly full-height hero that looks like the whole page. Be careful with full-screen heroes on mobile: 100vh can be taller than the visible area while browser toolbars are shown, so the newer 100svh or 100dvh units, or a min-height instead of a fixed height, avoid cutting off the button. For performance, never add loading="lazy" to the hero image, because it delays the LCP element; instead give it explicit width and height attributes and fetchpriority="high", and preload the headline font if it is a web font. Keep cookie banners and announcement bars compact so they do not cover the heading and button on small screens. Do not cram everything into the first screen either: long pages work well when each section earns the scroll, and the job of the top of the page is to make the next section worth reaching. Finally, test on real devices at common viewport sizes and check that the <h1>, main message and call to action are visible without scrolling on a typical phone.
Above the Fold and Canvas Builder
Canvas Builder generates hero sections sized to keep the CTA above the fold on common screen sizes, using Bootstrap 5's viewport-relative utilities and min-height classes. Canvas Builder generates landing pages from a plain-English description, and the hero section it builds is the above-the-fold area, so the prompt is the place to state the headline, audience and main call to action you want visitors to see first. The output uses standard Bootstrap 5 classes such as .container, .row and .btn, so you can adjust hero height, spacing and image loading attributes in the exported code. Preview the page at phone and laptop sizes before you publish.
Frequently asked questions
Where exactly is 'the fold' on a website?
The fold is not a fixed position, it varies by device, browser, and screen resolution. Design for the most common viewport sizes: around 700 to 900px height for desktop, and 600 to 750px for mobile. Your hero CTA should always be visible within these ranges.
What should go above the fold?
Put the most important information there: a clear headline that says what the page offers, a short supporting sentence, a primary call to action and, where useful, an image or trust signal. Navigation should be easy to find. Avoid filling the space with sliders, large ads or pop-ups that hide the main message.
Should my hero image go above the fold?
Yes, the hero section (headline, subheadline, CTA, and hero visual) should all be visible above the fold on common screen sizes. An image that pushes the CTA below the fold on mobile is a conversion problem.
Does lazy-loading images improve or hurt above-the-fold performance?
Lazy-loading images below the fold is strongly beneficial because it defers network requests that are not immediately needed, reducing bandwidth consumption and speeding up the critical rendering path. However, applying loading='lazy' to any image that is visible in the initial viewport is actively harmful: the browser intentionally delays the fetch for lazy-loaded images, which pushes the LCP timestamp later and can cause a measurable drop in Core Web Vitals scores. The correct pattern is to omit the loading attribute (or explicitly set loading='eager') on hero and above-the-fold images and add fetchpriority='high' to the single most prominent image in that zone.
Does above-the-fold content affect SEO?
Indirectly. The content above the fold usually contains the Largest Contentful Paint element, which is a Core Web Vitals metric, and layout shifts there count towards CLS. Google has also demoted pages where ads push the main content below the fold, so the first screen should show real content quickly.