Core Web Vitals UK
Fix LCP, INP and CLS. Measure with PageSpeed Insights and Search Console for UK ranking signals.
Read guideWhat Is Mobile-First Indexing?#
Mobile-first indexing means Google predominantly uses the mobile version of your website for crawling, indexing, and ranking — not the desktop version. Google switched to mobile-first indexing for all new websites in 2019 and completed the rollout across all existing sites in 2023. This is a fundamental shift: if your mobile experience is degraded, missing content, or broken, Google's view of your entire website is negatively affected, regardless of how excellent your desktop site is.
The practical implication is clear — every SEO decision you make must consider mobile users first. Content that exists only on desktop, images that aren't served on mobile, or navigation that breaks on small screens will all hurt your rankings in ways that were not possible before mobile-first indexing became the standard.
💡 Check Your Mobile Status
Open Google Search Console and navigate to Settings → Crawling. You will see confirmation of whether Google is crawling your site with a smartphone user agent (mobile-first) or a desktop agent. Nearly all sites built after 2019 should show smartphone crawling. If yours does not, investigate immediately.
Responsive Design vs Separate Mobile Sites#
There are three main approaches to delivering a mobile-friendly website, and Google has a clear preference among them.
Responsive Design (Recommended)
One URL, one set of HTML content, CSS adapts the layout to any screen size. This is Google's strongly recommended approach — it avoids duplicate content, simplifies crawling, and consolidates all backlink equity to a single URL. All modern website platforms default to responsive design.
Dynamic Serving
Same URL but the server delivers different HTML to mobile and desktop user agents. Technically acceptable but complex — requires correct Vary HTTP headers and risks delivering mismatched content if implementation is inconsistent.
Separate Mobile URLs (m. subdomain)
A separate mobile site at m.example.com. Increasingly problematic — creates duplicate content issues, splits link equity, and is difficult to maintain consistently. Avoid for new builds and consider migrating to responsive if you currently use this setup.
What Responsive Means in Practice
Fluid grids, flexible images, and CSS media queries that reflow layout at different breakpoints. Text remains readable without zooming (minimum 16px body font), tap targets are sufficiently large, and no horizontal scrolling occurs on any common device width.
Mobile Page Speed: The Critical Performance Factor#
Mobile users are on variable network connections — 4G, 5G, or sometimes weaker signals — and are often multitasking. Google data consistently shows that as mobile page load time increases from 1 to 3 seconds, the probability of a user bouncing increases by 32%. From 1 to 6 seconds, that jump reaches 106%. Page speed on mobile is therefore both a ranking factor and a direct revenue factor for any site that depends on conversions.
Run your most important pages through PageSpeed Insights (pagespeed.web.dev) and specifically look at the Mobile tab. The score and field data will show you real-world Core Web Vitals performance from Chrome users on mobile devices. Common mobile-specific speed issues include uncompressed images served at desktop resolutions, render-blocking third-party scripts (ads, chat widgets, analytics), excessive DOM size slowing down rendering, and poor server response times (TTFB) from unoptimised hosting.
1
Serve Appropriately Sized Images for Mobile
Use the HTML srcset attribute or CSS max-width: 100% combined with responsive image techniques to serve smaller image files to mobile devices. A 2000px wide hero image served to a 390px wide phone screen is wasteful bandwidth that directly inflates LCP scores. Modern CMS platforms like WordPress (5.0+) generate srcset automatically — ensure this feature is active.
2
Minimise and Defer Non-Critical JavaScript
JavaScript is the most common cause of poor INP (Interaction to Next Paint) scores on mobile. Audit your site's JavaScript with Chrome DevTools Coverage tool to identify unused code. Defer or lazy-load third-party scripts — chat widgets, marketing pixels, social embeds — that are not essential for above-the-fold rendering.
3
Implement a Content Delivery Network (CDN)
A CDN stores cached copies of your static assets (images, CSS, JS) on servers geographically distributed around the world, reducing the physical distance between a mobile user and the files they need. CDNs can reduce TTFB by 50–80% for users distant from your origin server — one of the single highest-impact speed improvements available.
4
Enable Browser Caching and Compression
Browser caching stores static resources locally on users' devices so repeat visits load significantly faster. GZIP or Brotli compression on your server reduces text-based file sizes by 60–80% before they are transferred. Both are server-level settings available on virtually all modern hosting platforms, often configurable in .htaccess or via hosting control panel.
Mobile UX Factors That Affect Rankings#
Google's Page Experience signals go beyond raw speed to encompass the overall quality of using your site on a mobile device. Key UX factors evaluated include:
- Tap target sizing: Buttons and links should be at least 48×48 CSS pixels with adequate spacing between them to prevent accidental taps. Small, tightly packed links are flagged by Google's mobile-friendly test as problematic.
- No horizontal scrolling: All content should fit within the viewport width without requiring left-right scrolling. Absolute-width elements (fixed-pixel images, wide tables without overflow handling) commonly cause this issue.
- Legible font sizes: Body text should be at least 16px — smaller text forces users to pinch-zoom, degrading the experience and signalling poor mobile optimisation.
- No intrusive interstitials: Full-screen pop-ups that obscure content immediately after a mobile user lands on your page are penalised by Google. Small banners for cookie consent or app download suggestions are acceptable; full-screen overlays are not.
- Accessible navigation: Mobile navigation should be clearly accessible — hamburger menus, sticky headers, and breadcrumb navigation all aid usability and encourage deeper engagement from mobile visitors.
Mobile SEO Content Considerations#
A common mistake when moving to mobile-first is "simplifying" the mobile experience by hiding content behind tabs, accordions, or "Show More" toggles. While these UI patterns are acceptable for UX, Google confirmed in 2020 that content hidden in expandable sections on mobile is treated as fully accessible and ranked accordingly — provided the content is present in the HTML, not loaded dynamically via JavaScript after user interaction. The key is ensuring all important content exists in the mobile HTML source code, even if it's visually collapsed.
Additionally, structured data must be implemented on mobile pages. If your desktop pages have schema markup but your mobile pages do not (a common mismatch with older dynamic serving setups), Google will not see your structured data since it now crawls mobile first. Use Google's Rich Results Test and specify a mobile user agent to verify schema is visible on mobile.
Mobile SEO Audit Checklist#
| Check | Tool | Pass Criteria |
|---|---|---|
| Mobile-friendly test | Google Mobile-Friendly Test | Page is mobile-friendly |
| LCP (mobile) | PageSpeed Insights | Under 2.5 seconds |
| INP (mobile) | PageSpeed Insights / CrUX | Under 200ms |
| CLS (mobile) | PageSpeed Insights | Under 0.1 |
| Tap target sizes | Lighthouse audit | 48×48px minimum |
| Font sizes | Lighthouse audit | 16px minimum body text |
| Viewport meta tag | Source code check | Present and correct |
| No horizontal scroll | Manual testing | No overflow on 375px width |
| Intrusive interstitials | Manual / GSC | None on mobile landing |
| Schema on mobile | Rich Results Test (mobile) | All schema present |
📌 Test on Real Devices
Browser DevTools device simulation is useful but imperfect. Always test key pages on real physical devices — particularly older or mid-range Android phones which represent a large share of mobile users and often expose performance issues that high-end devices mask. Services like BrowserStack allow remote testing on hundreds of real device and browser combinations.