Mobile first, in practice, for a shop with one page
Four decisions cover it. Explicit width and height on every image, tap targets that can be hit, text that resizes, and the telephone number as a link, which together keep Cumulative Layout Shift under 0.1 and Interaction to Next Paint under 200 milliseconds at the 75th percentile. None of that needs a new website.
The four decisions
1. Image dimensions. Give every image explicit width and height so the text stops moving when the picture arrives. That single habit is what keeps Cumulative Layout Shift at 0.1 or below, which is the good threshold.
2. Tap targets. Anything that can be tapped has to be reachable with a thumb, which mostly means spacing rather than size. A menu that requires precision is a menu that produces mistaken taps and back button presses.
3. Text that resizes. Nothing fixed in a size that cannot grow. This is also the cheapest part of the accessibility question, and it costs one decision in the stylesheet.
4. The number as a link. A telephone number that has to be copied is a number that will not be called, and for urgent trades that is the whole enquiry.
What the thresholds actually are
Three numbers, and they are published. Largest Contentful Paint is good at 2.5 seconds or less. Interaction to Next Paint is good at 200 milliseconds or less. Cumulative Layout Shift is good at 0.1 or less. All three are assessed at the 75th percentile of page loads, split between mobile and desktop.
The percentile is the part that matters on mobile. Your own phone on office wifi is not the measurement; three quarters of real visits have to clear the bar, including the ones on a weak connection outdoors.
INP replaced First Input Delay as the stable interactivity metric in 2024. A report that still discusses FID is measuring something retired, which is a quick way to date the advice you are being given.
| Decision | Protects | Effort |
|---|---|---|
| Width and height on images | CLS at 0.1 or below | Minutes per page |
| Spacing of tap targets | Mistaken taps | One stylesheet change |
| Resizable text | Readability and accessibility | One decision |
| Telephone as a link | The urgent enquiry | One line |
What not to do
Do not commission a new website to fix this. On a site of 9 pages, image dimensions, spacing and a link on the number are an afternoon's work for whoever maintains the site.
And do not add a separate mobile version. One page that adapts is easier to keep correct than two pages that drift apart, and the drift always shows up in the four identity values that had to stay identical.
Test it on a real phone outdoors once. Load the page on mobile data away from the office, tap the number, and see whether the call starts. That single test finds more than any report, and it takes two minutes.
Questions and answers
Do I need a separate mobile site?
What is the quickest win?
Why is my own phone not a good test?
Is FID still relevant?
Sources
- web.dev, Web Vitals The three thresholds and the 75th percentile assessment
- Google Search Central, Google Images SEO best practices Image handling, including the fallback src for responsive images
