Buying Software

What a Trades Website Must Do on a Phone Before Scrolling

By Mudabbir Hasan, Co-founder · Published · Last updated

On a phone, a trades website should show what you do, where you work and a one-tap way to call or ask for a quote before anyone scrolls. Google's published targets for a good experience are Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less and Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of visits.

What should a visitor see on the first phone screen?

Someone with a leaking tap or a flat battery is deciding in seconds whether to ring you or go back to the results. The first screen should answer four questions without a scroll. This list is our recommendation, not a Google rule.

  • What do you do? Your trade and the main jobs, in plain words.
  • Where do you work? The town or area, so a visitor outside it can leave quickly.
  • How do I reach you now? A call button that dials when tapped.
  • Why should I trust you? One piece of proof: an accreditation, an insurance statement, a real review or a photo of finished work.

A short quote form can sit just below. A visitor who cannot talk, perhaps because they are at work, then has a second route that does not need a call.

The first phone screen

  1. What you doTrade and main jobs, plain words
  2. Where you workTown or area
  3. Call nowOne tap to dial
  4. One piece of proofAccreditation, insurance, a real review
  5. Short quote form

How big should the call button be?

Google's web.dev guidance on tap targets gives a minimum recommended touch target of around 48 device-independent pixels, which it says is roughly 9 millimetres, about the size of a finger pad. It recommends about 8 pixels of space between targets horizontally and vertically so a press does not land on the neighbour. Make the call button at least that large and keep it apart from the menu icon.

How fast must a trades website load?

web.dev publishes three targets for a good experience. The measure is the 75th percentile of page loads, which means three out of four visits should meet it, and web.dev says to segment the data across mobile and desktop.

  • Largest Contentful Paint (loading): within 2.5 seconds of when the page first starts loading.
  • Interaction to Next Paint (responsiveness): 200 milliseconds or less.
  • Cumulative Layout Shift (visual stability): 0.1 or less.

For a trades site the layout shift number deserves attention. If a banner or image loads late and pushes the page down, a customer aiming at the call button can tap the wrong thing. That consequence is our reading of the metric, which web.dev describes as measuring visual stability.

Google's Core Web Vitals targets

  • ≤ 2.5 s

    Largest Contentful Paint (loading)

  • ≤ 200 ms

    Interaction to Next Paint (responsiveness)

  • ≤ 0.1

    Cumulative Layout Shift (stability)

  • 75th pct

    of visits, mobile and desktop segmented

Source: web.dev.

What usually makes a trades website slow?

Google's pages give the targets and not the causes, so this part is our experience of how small business sites tend to go wrong. Treat it as a list of things to check, with no figures attached.

  • Photos straight from a phone camera, uploaded at full size. A gallery of finished jobs is good proof, but each image should be resized and compressed before it goes on the page.
  • A large image or slider at the top. The largest element on the first screen is usually what Largest Contentful Paint measures, so a heavy hero image sets your loading time.
  • Chat, booking and review widgets that load extra scripts on every page. Keep the ones you use and drop the rest.
  • Images and banners with no reserved space, which cause the layout shift described above.
  • A page builder or theme that ships far more code than a seven-page trades site needs.

Slow-site suspects (our experience)

  • Phone photos uploaded at full size

  • A heavy image or slider at the top

  • Chat and review widgets on every page

  • Images with no reserved space

  • A theme that ships far more code than needed

What counts as proof on the first screen?

Use only proof that is true and checkable. A real accreditation number a customer can look up beats a generic badge. A photo of your own van or your own finished work beats a stock image of a smiling person in a hard hat. A review quoted with the customer's permission beats an unsigned line. If you do not yet have one of these, leave the space out rather than fill it with something invented, because a visitor who spots a stock photo trusts the rest of the page less.

Does Google rank the phone version of my site?

Yes. Google's mobile-first indexing documentation says Google uses the mobile version of a site's content, crawled with its smartphone agent, for indexing and ranking. Three details matter for a small business site:

  • Do not trim content on the phone version. Google notes that indexing comes from the mobile site, so hiding text there can cost traffic.
  • Keep headings, title and meta description equivalent on both versions.
  • Do not lazy-load primary content that needs a user interaction. Google says it will not load content that requires interactions such as a tap or a swipe, so a gallery that only fills in after a click may not be seen.

Do Core Web Vitals affect Google rankings?

Google says it highly recommends achieving good Core Web Vitals for success with Search, and says they align with what its core ranking systems seek to reward. It does not say that a good score guarantees a position. Better to see the three targets as a way to avoid losing the customer after they have found you.

How can you check your own site?

Open your site on your own phone on mobile data, not home wifi. Count how long before you can read the heading and press the call button. Then look at the Core Web Vitals report in Google Search Console, which Google points site owners to for how their pages perform, or use the tools web.dev lists for measuring the three metrics.

What is the next step?

If the call button is below the fold or the page feels slow on mobile data, the fix usually starts with the design of the first screen and the weight of the images. MetaBuf builds a free demo website for local trades businesses so the owner can see their site first. The demos in our local work gallery are fictional businesses shown to illustrate the approach, and none is a real client.

See how MetaBuf approaches website design and development

Sources

Related guides

Talk to an engineer about your project

Start with a free project call. We learn what you are building and recommend the right next step, with no pitch.

Book a call