What "above the fold" means
Above the fold is everything a visitor sees the instant a page loads, before they scroll a single pixel. The term is borrowed from newspapers, where the most important story sat above the physical crease. On the web there is no fixed fold, it moves with every screen size, but the concept still decides what your reader judges you on in the first second.
Why it matters: the largest thing above the fold is almost always your Largest Contentful Paint element, and LCP is a ranking signal inside Core Web Vitals. Get the above-the-fold experience wrong and you are shipping a slow LCP, a jumpy layout, and a first impression that pushes people back to the search results.
Where the fold actually sits
There is no single fold. It depends on the viewport. Here is roughly where the fold lands on common devices, so you can stop guessing what "above the fold" covers for your audience.
| Device class | Typical viewport | Approx. visible height above the fold | What usually fits |
|---|---|---|---|
| Small phone (portrait) | 360 × 640 | ~560px after browser chrome | Logo, one headline, hero image top |
| Modern phone (portrait) | 390 × 844 | ~740px after browser chrome | Header, headline, sub-copy, one CTA |
| Tablet (portrait) | 768 × 1024 | ~950px | Full hero, nav, intro paragraph |
| Laptop | 1366 × 768 | ~660px content area | Hero, nav, part of first section |
| Desktop | 1920 × 1080 | ~940px content area | Hero plus first content block |
Notice the laptop row. A 1366 × 768 screen shows less vertical content than a modern phone once you subtract the tab bar, address bar, and bookmarks. Plenty of teams design a gorgeous tall hero on a big monitor and never check that the headline is cut off on the most common laptop resolution in their analytics.
A real example: don't lazy-load the hero
The single most common above-the-fold mistake is lazy-loading the image the user is already looking at. Lazy-loading is great for images further down the page, but on the LCP hero it delays the paint and tanks your score. Load the hero eagerly and, better still, hint the browser to fetch it early.
<!-- WRONG: the hero is the LCP element, do not defer it -->
<img src="/img/hero.webp" loading="lazy" alt="...">
<!-- RIGHT: eager load + high priority for the above-the-fold hero -->
<img src="/img/hero.webp"
alt="Team working at a standing desk"
width="1200" height="675"
fetchpriority="high"
decoding="async">
<!-- Even better: preload it in the <head> so it starts before the parser reaches the tag -->
<link rel="preload" as="image"
href="/img/hero.webp"
fetchpriority="high">The width and height attributes are not decoration. They reserve space so the layout does not jump when the image arrives, which protects your CLS. Pair this with inlined Critical CSS so the above-the-fold region can paint without waiting on a render-blocking stylesheet.
How to check it on your own site
- Open the page in Chrome, press F12, and toggle the device toolbar (Ctrl+Shift+M). Set it to 390 × 844 and 1366 × 768 and see what is actually visible without scrolling.
- Run Lighthouse (or PageSpeed Insights) and expand the LCP audit. It names the exact element treated as your largest contentful paint, that element is your above-the-fold priority.
- In DevTools, open Performance, record a load, and check the filmstrip. The frame at roughly 1 second tells you what a real visitor sees first.
- In the Network tab, sort by size and confirm your hero image is requested early, not after a dozen scripts. If it starts late, preload it.
- Check the "Avoid an excessive DOM size" and "Largest Contentful Paint element" audits together, a bloated header pushes real content below the fold on small screens.
Common mistakes and how to fix them
- Lazy-loading the hero image. Remove
loading="lazy"from anything above the fold and addfetchpriority="high"instead. - A carousel or auto-rotating slider up top. These load multiple heavy images, ship the wrong one as LCP, and shift layout. Use a single static hero for the first paint.
- Web fonts blocking the headline. If your headline waits for a font file, the above-the-fold text is invisible for hundreds of milliseconds. Add
font-display: swapand preload the one font file the hero needs. - Cookie banners and interstitials that dominate the fold. A full-screen overlay on mobile is treated as an intrusive interstitial and buries your actual content. Keep consent UI compact.
- No reserved space for ads or embeds. An ad slot that loads late shoves your headline down and spikes CLS. Reserve the box with fixed dimensions.
FAQ
Is "above the fold" still a real thing now that everyone scrolls?
Yes. People scroll, but the first viewport still sets expectations and it contains your LCP element. Google measures how fast that first paint happens, so the fold matters for both users and rankings even in a scroll-happy world.
Does putting more content above the fold help SEO?
Not by stuffing it. What helps is making the primary content and headline visible and fast. Cramming keywords or ads into the first viewport hurts, both because it slows LCP and because excessive ads above the fold is a documented quality problem.
Where is the fold on mobile?
It varies, but plan for roughly 560 to 740 pixels of visible height on common phones after browser chrome. Design the hero and headline to land inside that band, then test on a 390-wide viewport.
Should I preload every above-the-fold image?
No. Preload only the single LCP image. Preloading several images competes for bandwidth and can make LCP worse, not better. One high-priority hint beats five.
How does above the fold relate to Critical CSS?
They are two halves of the same job. Critical CSS is the minimum styling needed to render the above-the-fold region, inlined so it paints without a network round-trip. The fold defines the region, Critical CSS makes it appear fast.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.
Subscribe to our newsletter!
