The above-the-fold checklist for a homepage that converts

Above the fold is the first screen a visitor sees before they scroll, and it is the single most important piece of real estate on your entire site. If that screen does not communicate what you do, who it is for, and what to do next, most visitors will leave before they ever see the rest. After building 450+ sites across SaaS, clinics, and local services, I can tell you: the majority of homepage problems live in this one screen.

Here is the checklist I use on every project, the elements that earn their place, and the things I cut.

The four elements that belong above the fold

Every high-converting homepage I have built shares four elements in its first screen. Not three, not seven. Four.

1. An outcome headline. This is not your company name. It is not your category ("We're a cloud-based platform"). It is a statement about the result your buyer gets. A SaaS tool that speeds up invoicing should say something like "Get paid 3x faster" rather than "The modern invoicing solution." The headline answers "why should I care" in one line.

2. A supporting subhead. One or two sentences that add specificity. The headline hooks, the subhead explains. If your headline is "Get paid 3x faster," your subhead might be "Automated invoicing and follow-ups for freelancers who are tired of chasing payments." Now the visitor knows the what, the who, and a hint of the how.

3. One primary CTA. A single, clearly labeled button. "Start free trial," "Book a demo," "Get a quote." Not "Learn more," which is a punt. Not two buttons of equal weight competing for attention. One button, one action.

4. A trust cue. This is the piece most homepages skip. A row of client logos, a star rating, a "Trusted by 2,000+ teams" line, or a single short testimonial. Something that tells the visitor "other people like you already chose this." Trust cues above the fold do quiet, heavy lifting. They lower the mental barrier before the visitor has invested any time scrolling.

That is it. Headline, subhead, CTA, trust cue. Everything else is negotiable.

What to cut from the first screen

Knowing what to include is half the job. Knowing what to remove is the other half. Here are the things I pull out of above-the-fold sections on almost every project.

Carousels and sliders. I have built sites with carousels because a client insisted, and I have measured the results. Carousels dilute your message. Instead of one clear statement, you rotate through three or four, and the visitor sees whichever one happens to be showing when they land. According to Nielsen Norman Group's research on carousels, users often ignore them entirely because they pattern-match them to ads. One strong message beats three rotating weak ones.

Navigation overload. Your nav bar should be lean. Five to seven items at most. If your above-the-fold area is cluttered with mega-menus and dropdowns, the visitor's eyes scatter. The goal of the first screen is to move them down the page or to the CTA, not to present every page on your site.

Generic hero images. A stock photo of people shaking hands in a glass office adds nothing. If you are going to use an image above the fold, make it specific: a product screenshot, a before-and-after, or an image of the actual outcome. If you cannot find an image that reinforces the message, a clean background with strong typography works better than filler.

Paragraph-length copy. The above-the-fold area is not the place for your brand story. You have roughly five seconds of attention (I wrote about this in detail in the 5-second test post). Keep it tight. Headline, subhead, CTA. The details come below the fold.

Design for mobile first, then expand to desktop

This is the point most teams get backwards. They design the homepage on a wide desktop screen, then shrink it down for mobile. The problem is that mobile is where the majority of their traffic lands.

The mobile fold is tiny. On most phones, you get about 500 pixels of visible height, and a good chunk of that is eaten by the browser bar and the phone's status bar. That leaves room for a headline, maybe a subhead, and a button. If your desktop hero section has a large image, a headline, a subhead, a paragraph, and two buttons, most of that is below the fold on a phone.

Start with the mobile layout. Ask yourself: if this is all someone sees, do they know what I do, who it is for, and what to do next? If the answer is yes, your desktop version will be easy to expand. If the answer is no, your desktop version is probably hiding the problem behind extra screen space.

I build every project in Webflow or Framer with mobile breakpoints first. It forces clarity. You cannot hide behind whitespace and decorative elements when you only have 350 pixels of width and 500 pixels of height.

Proof above the fold builds trust before the scroll

I mentioned trust cues as one of the four core elements, but this point deserves its own section because most people underestimate it.

A visitor who lands on your homepage is skeptical by default. They do not know you, they do not trust you, and they are one click away from leaving. If the first thing they see after your headline is a row of recognizable logos, a "4.9 stars from 300+ reviews" badge, or a one-line quote from a real customer, you have planted a seed of credibility before they have done any work.

This is especially true for local services and clinics, where the decision is personal. A med spa homepage that shows "Rated 4.9 on Google, 200+ reviews" right under the headline is doing more conversion work than a beautiful parallax animation ever will.

The key is specificity. "Trusted by thousands" is weaker than "Trusted by 2,147 teams." A logo bar with five recognizable names is stronger than a paragraph that says "We work with leading brands." Numbers, names, and ratings beat vague claims every time.

Speed is part of the fold equation

You can nail the headline, the subhead, the CTA, and the trust cue, and still lose visitors if the page takes too long to load. Google's own research has shown that as page load time goes from 1 second to 3 seconds, bounce probability increases by 32%. From 1 to 5 seconds, it jumps to 90%.

Above the fold is the first thing that renders, so it needs to render fast. Here is what that means in practice:

Compress your hero image. If you are using a background image, keep it under 200KB. Use WebP format. Lazy-load everything below the fold, but make sure the above-the-fold image is prioritized.

Skip the heavy animations on load. A Lottie or GSAP entrance animation is fine if it fires in under 300 milliseconds. A two-second choreographed reveal means the visitor is staring at a blank or half-rendered screen while your animation loads. First paint matters more than first impression if the visitor leaves before the impression happens.

Cut unnecessary scripts. Every chat widget, analytics pixel, and third-party embed you load on page entry adds weight. Defer what you can. The above-the-fold experience should be HTML, CSS, one image, and your headline. Everything else can wait.

I run Lighthouse and real-device tests on every project before launch. A homepage that scores well on performance but fails the message test will not convert. A homepage that nails the message but loads in six seconds will not convert either. You need both.

Putting it together: the order on the screen

Here is the literal top-to-bottom order I follow for the above-the-fold section on most projects:

1. Navigation bar. Clean, minimal. Logo on the left, five to seven links, one CTA button in the nav (matching the hero CTA).
2. Headline. The outcome statement. Largest text on the page.
3. Subhead. One to two sentences of specificity. Smaller, lighter weight.
4. Primary CTA button. High contrast, clear label.
5. Trust cue. Logo bar, star rating, or short testimonial directly below the CTA.
6. Hero visual (if used). A product screenshot, a relevant image, or clean whitespace. Never a distraction from the message.

That is the order. Notice what is not there: no carousel, no video background, no paragraph of body copy, no secondary CTA competing for attention.

The checklist, summarized

Before you launch (or relaunch) your homepage, run through these questions for the above-the-fold section:

Does the headline state the outcome, not the category? Does the subhead name the buyer and the problem? Is there exactly one CTA, and is the label specific? Is there a trust cue visible without scrolling? Does the section load in under two seconds on a phone? Is the layout designed for mobile first?

If the answer to any of those is no, that is your next fix. Not a redesign, not a new color palette. Just tightening the first screen.

I have seen this checklist turn underperforming pages around without touching anything below the fold. The rest of the page matters, but it only matters if the first screen earns the scroll. If you are not sure whether your current homepage passes, I am happy to take a look. You can start with a strategy review and we will walk through it together.