How Long Should a Homepage Be on Mobile? Count the Swipes, Then Cut

Desktop homepages are designed on wide screens, where sections sit side by side. On a phone, every row becomes a column, and every column stacks. A page that's six comfortable screens on a laptop can turn into seventeen on a phone, and nobody on the team notices because nobody scrolls their own homepage to the bottom on a phone.

The example: about 17 screens

When we ran Calendly's homepage through Cortality's free page scan, rendered 390 pixels wide, the scan measured the page at about 15,000 pixels tall, roughly 17 phone screens. That's a prediction from a free scan of one page, not measured visitor data, and the live page may differ from the render.

For a product as established as Calendly, a long page can be a deliberate choice: there's a lot to show, and many visitors already know what they came for. The useful question for your own page isn't "is long bad?" It's "what's sitting on screens 8 to 17 that a visitor needs before they decide?"

How attention falls off down a page

In Nielsen Norman Group's 2018 eyetracking study, people spent about 57% of their viewing time above the fold, about 74% in the first two screenfuls, and about 81% in the first three. NN/g's summary: people still rarely go beyond the third screenful. The study used desktop screens, so the exact numbers won't carry over to phones, but the shape will: attention bunches at the top and thins out after that.

On a 17-screen page, that means most of the page is shown to a small share of visitors. That's fine for detail that only interested people need. It's a problem for anything that helps every visitor decide.

Step 1: measure your page in phone screens

1. Open your homepage in your browser's device mode at 390 pixels wide.
2. Open the console and run document.documentElement.scrollHeight. That's the page height in CSS pixels.
3. Divide by about 800 (a typical visible screen height on a current phone, after the browser bars). That's your number of screens.
4. Or do it by hand: scroll the page on your own phone and count the swipes.

Write the number down next to your desktop screen count. The ratio is often the surprise.

Step 2: check how far visitors actually get

Google Analytics 4's enhanced measurement sends a scroll event the first time a visitor reaches 90% of the page's depth. Compare scroll events to page views on your homepage, split by device: that's the share of phone visitors who reach the bottom.

That single number is coarse. It tells you how many finish, not where the rest stopped. To see where they stop, you need scroll events at more depths (for example 25%, 50% and 75%, set up in Google Tag Manager) or a tool that records how far visitors get on every part of the page. Our guide to reading a website heatmap covers how to read scroll maps without over-reading them.

Step 3: map what sits where

Make a simple list of your sections from top to bottom with the screen number each starts on. Then mark each one:

• Decides: the visitor needs this to say yes (what it is, who it's for, proof, price or how to start, the main objection answered).
• Supports: useful for people who are already interested (feature detail, integrations, long FAQ, case studies).
• Repeats: says something already said higher up.

Anything marked Decides that starts below screen 3 is a candidate to move up or summarize higher. Anything marked Repeats is a candidate to cut. Our list of page elements visitors often ignore is a good second pass.

Step 4: shorten without losing what matters

• Collapse on mobile, not delete. Feature grids and FAQs can become accordions or short lists on phones.
• Shrink images and spacing. Desktop-sized illustrations and generous padding are often what turns six screens into seventeen.
• Repeat the ask, with context. On a long page, put a button after each Decides section, with one line of proof next to it. See trust signals before the first ask.
• Link out instead of stacking. Detail that only some visitors need can live on its own page, with a clear link.
• Check the first ask. If most phone visitors never get past screen 3, the first button and what it leads to carry most of the load. Button or inline form covers how to check that step.

A long homepage also affects how quickly the first screen loads on a slow connection. If visitors are leaving right away, high bounce rate on a landing page has the checks to run first.

Who this matters to

• SaaS homepages that grew a section per feature launch. See Cortality for SaaS and SaaS homepage best practices.
• Store homepages with many collection rows and banners. See Cortality for Shopify stores.
• Agencies who want a simple, visual way to show a client their mobile page length. See Cortality for agencies.

Where Cortality fits

Our free page leak scan renders your page at desktop and phone widths, measures how tall it is on a phone, and predicts where visitors look. No install needed. It's a prediction from our attention model, not data from your real visitors, so treat it as a place to start.

Cortality's paid product measures how real visitors use every part of your page, including how far they get on a phone, then gives you a ranked list of fixes and re-measures after you ship one. See what a finding looks like and how it works.

Start your free week, and you see your first report before you pay. You save a card at signup, and nothing is charged until 3 days after your first report. Cancel before then and you pay nothing, and any charge can be refunded within 14 days. How the free week works.