DebutBoard / Guides / Speed and phone screens: the basics
Speed and phone screens: the basics that matter
Most people will see your site on a phone, often on a so-so connection. This guide covers how to tell whether it holds up, what Google measures, and which fixes make the biggest difference on a small site.
You probably built and approved your site on a laptop with fast Wi-Fi. Your customers will mostly see it on a phone, maybe in a parking lot with one bar of signal. Those are two very different experiences, and the second one is the one that counts.
Google cares about this too. It judges your site by its phone version. In a June 2024 announcement, Google said that after July 5, 2024, it would crawl the last remaining sites only with its smartphone crawler, and that content not reachable on a phone wouldn't be indexed. If something only exists on your desktop layout, assume Google can't see it.
What Google measures: Core Web Vitals
Core Web Vitals are three measurements of how a page feels to a real visitor. Here they are in plain words, with the targets Google's web.dev site calls "good":
| Measure | What it means | Good |
|---|---|---|
| Largest Contentful Paint (LCP) | How long until the main thing on the screen, usually the big photo or headline, has shown up. | 2.5 seconds or less |
| Interaction to Next Paint (INP) | How quickly the page reacts when someone taps or clicks something. | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | How much things jump around while the page loads, like a button moving just as you tap it. | 0.1 or less |
A page meets a target when at least 75 out of 100 real visits do, counted separately for phones and computers. INP replaced an older measure, First Input Delay (FID), on March 12, 2024, so older articles may mention FID instead.
How much does it matter for ranking? Google's page experience documentation says Core Web Vitals are used by its ranking systems, and that other page-experience factors don't directly help a site rank higher. Google is also clear that relevant, helpful content comes first. Treat speed as something you fix because customers leave slow pages, not as a ranking trick.
How to test your site
Go to PageSpeed Insights, paste your address and run it. The report has two parts, and the difference matters for a new site:
- Real-visitor data (Google calls it field data), at the top, is from real Chrome users (the Chrome UX Report). It only appears when there's enough real-visitor data. A new or quiet page falls back to data for your whole site, and a brand-new site usually has none at all. That's normal.
- Test data (lab data), below, is a test Google's Lighthouse tool runs on the spot with a simulated phone. It's always there, and it's what you'll use at first. Scores move a bit from run to run, so run it two or three times before you panic or celebrate.
Once your site has some traffic, Search Console's Core Web Vitals report shows the same field data across all your pages.
Old advice you can skip: Google's Mobile-Friendly Test and Search Console's Mobile Usability report were retired on December 1, 2023. Google suggests other tools instead, such as Lighthouse, which is built into PageSpeed Insights and into Chrome's developer tools.
The fixes that matter most on a small site
1. Images
On most small-business sites, images are the biggest weight by far. A photo straight off a modern phone can be several megabytes; on a web page it rarely needs to be more than a few hundred kilobytes.
- Resize before you upload. An image shown 800 pixels wide doesn't need to be 4,000 pixels wide.
- Use a modern format like WebP or AVIF if your site builder supports it. Many convert automatically.
- Set the width and height on images (or reserve the space with CSS). web.dev lists missing image dimensions as a common cause of layout shift: the page jumps when the image finally arrives.
- Lazy-load images further down the page with
loading="lazy", so they load as people scroll. But never lazy-load the main image at the top. That's usually the "largest content" LCP measures, and delaying it makes the page look slower.
If someone else built your site, these make a good short question for them: "Are our images resized and compressed, do they have their sizes set, and is the top image left out of lazy loading?"
2. Things you added that you don't need
Every chat bubble, social feed, review widget, popup tool, tracking script and slider adds weight and often hurts INP. Go through what's on the page and ask whether each one earns its place. Removing one unused widget can help more than any technical tweak.
3. Video at the top
A background video in the header looks great on a fast connection and costs a lot on a slow one. A still photo with a "watch the video" link usually serves phone visitors better.
4. Fonts
Each font family and weight is another file to download. Two families with a couple of weights each is plenty for most sites.
5. Hosting and plugins
If your pages are slow even with light images and few add-ons, the problem may be the host or a heavy theme. On WordPress, a pile of plugins is a common cause. That's a conversation for your host or designer, and the PageSpeed report gives you something concrete to bring to it.
The phone-screen checklist
Do these on an actual phone, not a narrowed desktop window.
- No sideways scrolling. If the page wiggles left and right, something is wider than the screen, often a wide image, table or embedded map.
- Text you can read without zooming. If you're pinching to read the hours, so is everyone else.
- Buttons you can tap. Links crammed close together lead to wrong taps. Main buttons should be big enough for a thumb.
- A tappable phone number near the top of the page, set up as a
tel:link so it offers to call. - Forms that bring up the right keyboard. Phone fields should open a number pad and email fields should show the @ key. Your designer can set this with the field type.
- No popup covering the page the moment it loads. On a small screen, a popup that's hard to close is a reason to hit Back.
- The menu opens and closes, and every item in it works.
Then do one more test: turn off Wi-Fi, walk to the far end of your parking lot, and load your home page. That's your customer's first impression.
Sources
- Google Search Central Blog, Mobile-first indexing has landed (June 2024)
- web.dev, Web Vitals (thresholds and the 75th percentile)
- Google Search Central Blog, Introducing INP to Core Web Vitals
- Google Search Central, Understanding page experience in Google Search results
- PageSpeed Insights, About PageSpeed Insights (field and lab data)
- Google Search Central Blog, More on page experience (Mobile-Friendly Test retirement)
- web.dev, Optimize Cumulative Layout Shift and Browser-level image lazy loading
More guides
Just launched a site? List it on the debut board. It's free, there's no account, and new listings are reviewed before they go up.