- Google retired the Mobile-Friendly Test and Search Console's Mobile Usability report in December 2023.
- Test with Lighthouse, Chrome device mode and, most importantly, real phones.
- Google uses the mobile version for indexing, so the mobile page needs the same content as desktop.
- The common fixes are layout, text size, tap targets, pop-ups and slow images.
Why a mobile-friendly website check still matters
For years, the quick way to check a site was Google's Mobile-Friendly Test. Google retired it, along with the Mobile Usability report in Search Console and the test's API, on 1 December 2023. The checks still matter; Google just expects you to use other tools.
Mobile matters for two reasons:
- Google indexes the mobile version. Google uses the mobile version of a page's content for indexing and ranking. If your mobile page hides content, headings, links or structured data that the desktop page has, Google may not see them.
- Your visitors are on phones. For many businesses, most first visits come from a phone, often from a search or a link in an email. A page that's hard to read or use on a phone loses enquiries, whatever Google thinks of it.
How to check whether your website is mobile friendly
Use these four checks together. Each catches different problems.
| Check | Tool | What it tells you |
|---|---|---|
| Real phones | Your own iPhone and an Android phone | What visitors actually experience: reading, tapping, forms |
| Lighthouse | Chrome DevTools (Lighthouse tab) or PageSpeed Insights | Mobile performance, accessibility and best-practice issues such as text size and tap targets |
| Device mode | Chrome DevTools (toggle device toolbar) | How layouts behave at different screen sizes |
| Core Web Vitals | Search Console (Experience) and PageSpeed Insights | Real-user speed and stability on mobile |
Use URL Inspection in Search Console too: run a live test and view the screenshot and rendered HTML to see the page as Google's smartphone crawler does.
1. Test on real phones
Nothing replaces using the site on an actual phone. On your key pages (homepage, main service pages, contact page), check:
- Can you read the text without zooming?
- Does anything spill off the side of the screen, forcing you to scroll sideways?
- Can you tap links and buttons accurately with a thumb?
- Does the menu open, close and work?
- Can you fill in and submit the contact form, with the right keyboard (numbers for phone fields, @ for email)?
- Does the phone number start a call when tapped?
- Do pop-ups or the cookie banner cover the content, and can you close them easily?
Test on at least one iPhone and one Android phone, because Safari and Chrome on mobile behave differently. See cross-browser testing for more.
2. Run Lighthouse in mobile mode
Open your page in Chrome, open DevTools, go to the Lighthouse tab, choose Mobile and run it. Or paste the URL into PageSpeed Insights, which runs Lighthouse for you and shows real-user data too. Look at:
- Performance: slow loading on a mid-range phone and network
- Accessibility: contrast, labels and tap target issues
- Best practices and SEO: the viewport tag, legible font sizes, crawlability
3. Check layouts in device mode
In DevTools, toggle the device toolbar and drag the width from wide to narrow. Watch for the points where the layout breaks: overlapping text, images that overflow, tables that run off-screen, buttons that wrap awkwardly.
4. Check Core Web Vitals on mobile
In Search Console, the Core Web Vitals report has a separate mobile view based on real visits. Poor mobile scores usually come from large images, heavy scripts and layout shifts. See our guide to Core Web Vitals.
Common mobile problems and how to fix them
| Problem | How to spot it | Fix |
|---|---|---|
| Page is shown zoomed out, like a tiny desktop page | Text is unreadable without pinching | Add the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1"> and use a responsive layout |
| Content wider than the screen | Sideways scrolling; Lighthouse flags it | Make images and embeds scale (max-width: 100%); wrap wide tables so they scroll inside their container |
| Text too small | You need to zoom to read | Use a base font size around 16px for body text, with comfortable line height |
| Tap targets too small or too close | You tap the wrong link | Make buttons and links large enough to tap, with space between them |
| Intrusive pop-ups | A pop-up covers the content as soon as the page opens | Delay or shrink pop-ups on mobile; make them easy to close |
| Slow loading | Long wait on mobile data; poor LCP | Compress and resize images, lazy-load below-the-fold images, cut unused scripts |
| Layout jumps while loading | Buttons move as you tap; poor CLS | Set image and embed dimensions; reserve space for banners and ads |
| Content missing on mobile | Sections hidden on mobile that desktop shows | Show the same main content on both; use expandable sections rather than removing content |
| Forms hard to complete | Tiny fields, wrong keyboard, no labels | Large fields, visible labels, correct input types (tel, email) |
| Unplayable or unsized media | Videos overflow or don't play | Use responsive embeds and formats that play on mobile browsers |
How to make a website mobile friendly
If your site isn't responsive at all, meaning it was built only for desktop, small fixes won't be enough. The long-term fix is a responsive design, where the same page adapts its layout to the screen width. Most modern themes and website platforms are responsive by default, so on an older site this is usually part of a redesign. Follow our website launch checklist if you go that way.
If the site is responsive but has problems, work through them in this order:
- Fix anything that blocks a task: forms that can't be submitted, menus that don't open, pop-ups that can't be closed.
- Fix readability: text size, contrast and content that runs off the screen.
- Fix speed: images first, then scripts. See Core Web Vitals and, on WordPress, how to speed up WordPress.
- Check content parity: make sure the mobile page has the same main content, headings, structured data and links as desktop.
Mobile-first design, briefly
Mobile-first design means designing for the smallest screen first, then adding layout for larger screens. It forces you to decide what matters most on each page, which tends to improve the desktop version too: clearer headings, shorter paragraphs, one obvious call to action.
Questions
Is there still a Google Mobile-Friendly Test?
No. Google retired the Mobile-Friendly Test, its API and Search Console's Mobile Usability report on 1 December 2023. Lighthouse, PageSpeed Insights, Chrome device mode and testing on real phones cover the same checks.
How do I check if my website is mobile friendly?
Use the site on real phones, run Lighthouse or PageSpeed Insights in mobile mode, check layouts in Chrome's device mode, and review the mobile Core Web Vitals report in Search Console.
Does mobile friendliness affect SEO?
Yes. Google uses the mobile version of your pages for indexing and ranking, so content missing on mobile may not count, and a poor mobile experience hurts the visitors you do get.
What is a mobile-friendly website?
One that adapts to the screen it's viewed on, with readable text, easy-to-tap buttons, no sideways scrolling, fast loading and forms that are simple to complete on a phone.
What is the viewport meta tag?
A line in the page's code that tells mobile browsers to match the page width to the device. Without it, phones show a shrunk-down desktop page.
Every guide is checked against the platform it describes before it’s published, and re-checked when the platform changes.