The first screenful of your website does most of the work. Nielsen Norman Group research shows that 57% of users’ page viewing time is spent above the fold — before a single scroll. If your above-the-fold content doesn’t communicate what you do, who it’s for, and why someone should stay, most visitors won’t scroll to find out.
Above the fold is not a design aesthetic. It’s a conversion decision. Every element in that first viewport either earns its place by moving a visitor toward an action or it’s costing you conversions.
What “Above the Fold” Actually Means Now
The print-era term referred to the top half of a folded newspaper — what you could see on a newsstand without picking it up. On the web, it means whatever a visitor sees without scrolling, on their specific device.
The challenge: there is no single fold. A 27-inch desktop monitor shows dramatically more content than a 6-inch smartphone in portrait orientation. The most common viewport dimensions in 2024 for US traffic:
- Mobile (portrait): 375–430px wide, 667–932px tall
- Tablet (landscape): 768–1024px wide
- Desktop: 1280–1920px wide, 600–900px visible height (accounting for browser chrome)
Designing for the fold means designing for all of these simultaneously — which is why mobile-first design matters. If your above-the-fold content doesn’t work at 375x667px, roughly half your visitors start at a disadvantage.
The Five Elements That Belong Above the Fold
Not every page is the same, but for a business homepage or landing page, five elements should be visible before the scroll:
1. A headline that states what you do Not a tagline. Not a slogan. A statement that tells a first-time visitor what they get. “Custom WordPress websites, hand-coded from scratch” is useful. “Where your vision becomes reality” is not.
2. A sub-headline that specifies who it’s for or what the outcome is One sentence. “For US and EU businesses that need a site that actually performs.” This qualifies the visitor — the wrong visitors leave faster, and the right visitors lean in.
3. A primary CTA One button. Specific label. “Get Started” is fine. “Get My Free Audit” is better. “Learn More” is too vague to click with intent. The CTA should be visible without hunting — contrasting color, adequate size, and positioned where the eye naturally lands after reading the headline.
4. One trust indicator Not a carousel of six logos. One signal that communicates credibility: years in operation, number of projects, a specific client name if you have permission, a specific measurable result. “200+ projects since 2014” is a trust signal. “We are committed to your success” is not.
5. Visual context An image, illustration, or video that communicates the nature of the business without the visitor having to read to understand it. For a web agency: screenshots of actual work. For a local service business: the team or the work environment. Generic stock photos of smiling people at laptops communicate nothing and are now actively distrusted.
What Kills Above-the-Fold Performance
Navigation With Too Many Options
A navigation bar with 8+ items forces a decision before the visitor understands the site. Each additional navigation link reduces the chance a visitor’s eye goes to the primary CTA. Most business sites need 4–5 navigation items maximum. If you have more, group them or move them.
Slow-Loading Hero Images
A hero image that takes 2 seconds to load while the layout jumps around is a Core Web Vitals failure — specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Google measures both as ranking signals.
The solution is not to avoid hero images. It’s to deliver them properly:
- Use WebP or AVIF format instead of JPEG/PNG (30–50% smaller with same quality)
- Set explicit
widthandheightattributes on theimgtag to prevent layout shift - Preload the hero image in the HTML
<head>so it’s fetched before the parser reaches the<img>tag - Size the image to the actual display dimensions, not the original file dimensions
If your hero image is a 3MB JPEG at 4000px wide and you’re displaying it at 1400px, you’re loading 3x more data than necessary on every single page visit.
Auto-Playing Video
Auto-play video above the fold increases page weight and competes with the headline for attention. It also causes layout shift on slower connections. If you use video, use it with preload="none" and a play button — let the visitor choose. Auto-play with sound is universally disliked and will increase your bounce rate.
No Clear Headline Hierarchy
When the headline, the navigation logo, the hero image caption, and the CTA all appear to have the same visual weight, nothing takes priority. The visitor’s eye doesn’t know where to go. This is a typographic hierarchy problem — the headline should be the largest text element on the page, significantly larger than body copy, with the sub-headline noticeably smaller than the headline and the CTA label smaller still.
The Technical Side of Above-the-Fold Optimization
Design is one half. The technical execution is the other. A perfectly designed above-the-fold section that loads slowly or causes layout shift will underperform a simpler design that loads instantly.
Eliminate render-blocking resources
CSS and JavaScript that load in the <head> before the browser can render anything are render-blocking. Critical CSS — the styles needed to display the above-the-fold content — should be inlined in the <head>. Everything else should be deferred.
Page builders like Elementor and Beaver Builder load their entire CSS framework regardless of what’s on the page, because they can’t know which components you’ve used without processing all of them. This is why Elementor sites often have 500KB+ of CSS loading before the first pixel renders. A hand-coded site loads only the CSS it uses.
Use a CDN for faster asset delivery Images and fonts loaded from a CDN arrive faster for visitors who are geographically distant from your server. Cloudflare is free at the basic tier and adequate for most business sites. Kinsta includes it by default.
Preload fonts
Custom fonts that are not preloaded cause a Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) — the visitor sees blank text or default fonts briefly before the custom font loads. Both are jarring and affect perceived quality. Add a <link rel="preload"> for any web font used in the headline.
Check Core Web Vitals for above-the-fold metrics The two Core Web Vitals most directly tied to above-the-fold design are:
- LCP (Largest Contentful Paint) — should be under 2.5 seconds
- CLS (Cumulative Layout Shift) — should be below 0.1
Both are measured and reported in Google Search Console. You can also test any URL at honest.designodin.com.
Message Match Matters More Than Design
If you’re running paid ads, above-the-fold optimization includes message match: the headline on the landing page should mirror the ad copy that brought the visitor there. A visitor who clicks a Google Ad for “custom WordPress website” and lands on a page that says “Digital Solutions for the Modern Enterprise” has no confirmation they’re in the right place.
Message match is not a design problem — it’s a strategy problem. But the solution is implemented in the above-the-fold section: the headline should contain the keyword or phrase from the ad, and the visual context should reinforce it.
Poor message match is one of the most common reasons paid traffic underperforms. Google Ads Quality Scores drop when landing page relevance is low, which increases your cost-per-click. The above-the-fold section is the primary input into landing page relevance scores.
Above the Fold for Different Page Types
The principles apply everywhere, but the implementation differs:
Homepage: Communicate what the business does, who it’s for, and one action to take. Not everything you offer — the most compelling version of the best thing.
Service page: Communicate the specific service, the outcome, and the next step. Testimonials or results specific to this service belong here, not in a generic sidebar.
Landing page: Single headline. Single CTA. No navigation (remove it — navigation links are conversion leaks on landing pages). Everything supports one action.
Blog post: The featured image and the opening paragraph are your above-the-fold content. Both should make the visitor want to keep reading. The opening paragraph should start mid-argument, not with preamble.
FAQ
Does above the fold still matter on mobile? More than on desktop. Mobile visitors scroll less, have less patience, and are often in higher-distraction environments. The above-the-fold content on mobile is doing even more work. Design for the mobile viewport first.
Should I put the CTA above or below the fold? Above the fold — always, for the primary CTA. Also repeat it after key content sections (after testimonials, after a key feature explanation) for visitors who scroll before deciding.
How large should a hero image be for fast load times? For desktop, a 1400px wide image at 80% quality in WebP format is typically 100–250KB — acceptable. For mobile, serve a smaller version (768px wide or less) using responsive images. Never serve a desktop-size image to a mobile device.
What is Largest Contentful Paint and why does it matter? LCP measures when the largest visible element above the fold finishes loading. For most pages, that’s the hero image. Google uses LCP as a Core Web Vitals ranking signal. An LCP above 4 seconds is rated “poor” and negatively affects search rankings.
How many CTAs should be above the fold? One primary CTA. If you need a secondary option (e.g., “View Portfolio” alongside “Get Started”), ensure clear visual hierarchy — one button is filled/colored, the other is outlined or text-only. Two equally styled CTAs create decision paralysis.
What should I cut from my current above-the-fold section? Start by cutting: auto-play video, social media icon links, a news ticker, a full-width rotating image carousel (sliders reduce conversions — static images convert better), and any text that doesn’t answer “what is this and why should I care?”
Getting above-the-fold right is one part design, one part technical implementation. A custom WordPress development engagement with Designodin includes conversion architecture as a defined deliverable — not an afterthought. If you want to know what your current above-the-fold section is costing you, get started here.