Above-the-Fold Content Analyzer

Paste HTML, pick a viewport, and get an estimate of which elements land above the fold, with checks for an H1 up top, enough real text, image-only folds, and oversized fixed headers. This is a structural estimate, not a render.

Parsed locally with DOMParser, no scripts run, nothing is uploaded.

    How the estimate works, and where it stops

    This is an estimator, not a renderer, and it is honest about that. The tool walks your body's elements in document order and assigns each block a rough height: headings get a level-based font size, paragraphs get lines computed from text length and viewport width, images use their height attribute or assume a 16:9 box, navs and headers get a typical 80px. It accumulates those heights until the viewport height is exceeded, and everything before that point counts as above the fold.

    Real rendering depends entirely on CSS. A hero set to 100vh, a multi-column grid, large custom fonts, or a collapsed accordion will all change the real fold. Treat this tool as a smoke detector for one specific failure: pages that open with a screen-high hero image and no indexable text. For exact measurement, open the page in DevTools device mode and look at the actual pixels.

    What a healthy fold contains

    • The H1. The visitor and the crawler should both know what the page is about without scrolling.
    • Real text. Roughly 50 words or more of actual content, an answer or a value statement, not just a tagline on a photo.
    • A fast LCP element. Whatever the biggest above-fold element is, image or headline, it should render quickly.

    Frequently asked questions

    Does above-the-fold content matter for SEO?

    Yes, in two ways. Google's 2012 page layout algorithm demoted pages that pushed content below a wall of ads, and that thinking is folded into core systems now. Separately, the Largest Contentful Paint metric measures how fast your main above-fold element renders. Primary content should start high, both for crawlers and for the human deciding whether to stay.

    How accurate is this estimate?

    It is a structural estimate, not a render. Real layout depends entirely on CSS: a hero set to 100vh, a grid, a font choice, all change the math. The tool's job is catching gross patterns, a page that opens with a screen of images and no text, not pixel-perfect measurement. For that, use DevTools device mode.

    What should be above the fold?

    Three things: the H1 stating what the page is about, an opening answer or value statement so the visitor knows they are in the right place, and the LCP element (usually the hero image or headline) optimized to render fast. Everything else can scroll.

    Does Google penalize ads above the fold?

    Heavy ad density above the fold, yes. The 2012 page layout algorithm targeted exactly that pattern, and it has since been folded into Google's core ranking systems. A normal banner is fine, a fold that is mostly ads with content pushed below is not.