Avatar Website Design

Google Mobile Friendly Test: How to Check with Lighthouse

Google Mobile Friendly Test: How to Check with Lighthouse

Google retired its Mobile Friendly Test in December 2023. If you’ve been using that tool to check your site, you’re probably wondering what to use now. The good news is Google Lighthouse does everything the old tool did and gives you even more useful data about your mobile site performance.

Lighthouse runs directly in Chrome DevTools or through PageSpeed Insights online. It scores your mobile site on performance, accessibility, and best practices. You get a clear report with specific fixes you can make right away.

This guide walks you through testing your site with Lighthouse. You’ll learn how to run the test, read your mobile report, and fix the most common issues that hurt mobile performance. No technical background needed. Just follow the steps and your site will work better on phones.

What is a mobile friendly website today

A mobile friendly website loads fast on phones and adapts its layout to smaller screens without horizontal scrolling. Your site needs text that’s readable without pinching and zooming, buttons large enough to tap with a thumb, and images that scale properly. The standards have gotten stricter since the old google mobile friendly test was retired.

What is a mobile friendly website today

Core mobile requirements

Google now measures mobile friendliness through multiple performance factors in Lighthouse instead of a simple pass or fail. Your site must use responsive design that adjusts content to any screen size automatically. Text needs to be at least 16 pixels tall, tap targets should be 48 pixels apart minimum, and your viewport meta tag must be configured correctly in the HTML.

Mobile sites that meet these technical standards get priority in Google search results and rank higher than sites that don’t.

Pages should load their main content in under 2.5 seconds on a standard mobile connection. Google also checks that you avoid intrusive popups or interstitials that block content when users land on your page from search. Mobile usability errors like small fonts or clickable elements too close together will hurt your rankings now more than ever.

Step 1. Choose your testing tool

You have two main options to replace the old google mobile friendly test. Both use Lighthouse technology but work differently depending on your needs and technical comfort level. Pick the one that fits how you want to test your site.

PageSpeed Insights (online option)

PageSpeed Insights runs in your web browser without installing anything. You visit the PageSpeed Insights website, type in your URL, and click analyze. The tool tests your live site exactly as visitors see it and gives you separate mobile and desktop scores. This option works best if you want quick results or need to test a site you don’t control.

PageSpeed Insights (online option)

PageSpeed Insights is the official replacement Google recommends for the retired Mobile Friendly Test.

Chrome DevTools (desktop option)

Chrome DevTools runs Lighthouse directly in your Chrome browser while you browse. Press F12 or right-click and select "Inspect" to open DevTools, then find the Lighthouse tab. You can test pages before publishing them or run audits on password-protected staging sites. This method gives you more control over test conditions and lets you audit pages that aren’t public yet.

Step 2. Run Google Lighthouse for mobile

Running Lighthouse takes less than two minutes once you know where to find the tool. The process is the same whether you’re checking one page or auditing your entire site. You’ll get mobile-specific results that show exactly how your page performs on phones.

Using PageSpeed Insights

Open your browser and go to PageSpeed Insights at pagespeed.web.dev. Type your full URL in the text box including the https:// part. Click the "Analyze" button and wait 30 to 60 seconds while the tool loads your page on a simulated mobile device.

The tool automatically tests mobile by default and shows you the mobile score first. You’ll see a performance score from 0 to 100 along with separate scores for accessibility, best practices, and SEO. PageSpeed Insights runs the same google mobile friendly test technology that Lighthouse uses but through a simple web interface without requiring any setup.

PageSpeed Insights simulates a mobile device with a slow 4G connection to reflect real-world conditions most visitors experience.

Using Chrome DevTools

Open your site in Chrome browser and press F12 to launch DevTools. Click the Lighthouse tab in the top menu bar (you might need to click the >> arrows to find it). Select "Mobile" under device type, check all the audit categories you want, and click "Analyze page load" to start the test.

Using Chrome DevTools

Chrome runs the audit locally on your computer and takes about 30 seconds to complete. This method works on pages behind login screens or local development servers that aren’t accessible online.

Step 3. Understand your mobile report

Your Lighthouse report shows four main scores at the top, each ranging from 0 to 100. The Performance score matters most for mobile users because it directly measures how fast your page loads and responds. Scores of 90 or above are good, 50 to 89 need improvement, and below 50 means your site has serious problems that drive visitors away.

Performance metrics explained

Lighthouse tracks six specific timing measurements that create your overall Performance score. Largest Contentful Paint (LCP) measures when your main content appears on screen and should happen within 2.5 seconds. First Input Delay (FID) tracks how quickly your page responds when someone taps a button, aiming for under 100 milliseconds. Cumulative Layout Shift (CLS) catches annoying jumps when content moves around as the page loads.

Performance metrics explained

Google uses these Core Web Vitals as direct ranking factors in mobile search results.

Total Blocking Time shows how long your page stays frozen while JavaScript loads. Speed Index measures how quickly visible content fills the screen. Each metric gets a weight in the final score, with LCP and Total Blocking Time counting the most heavily.

Reading the diagnostics section

Scroll past the scores to find specific problems Lighthouse detected on your page. This diagnostics section lists issues ranked by their impact on load time. You’ll see items like "Eliminate render-blocking resources" or "Properly size images" with estimated time savings shown in milliseconds. The report that replaced the old google mobile friendly test gives you actionable fixes instead of just a pass or fail grade.

Step 4. Fix common mobile issues

Lighthouse identifies the same problems across most mobile sites. You can fix three critical issues that the google mobile friendly test used to catch by making simple changes to your HTML and CSS. These fixes take 30 minutes or less and improve your mobile score immediately.

Add viewport meta tag

Your page needs a viewport meta tag in the HTML head section to tell mobile browsers how to scale your content. Without this tag, phones display your desktop site zoomed out and force users to pinch and zoom to read anything. Add this single line of code to fix it:

<meta name="viewport" content="width=device-width, initial-scale=1">

Place this tag inside your <head> section before any other meta tags. The width=device-width part makes your page match the phone’s screen width, and initial-scale=1 prevents automatic zooming. This one tag solves most viewport-related errors Lighthouse reports.

Make tap targets larger

Buttons and links need 48 pixels of space around them so people can tap accurately with their thumbs. Lighthouse flags elements that sit too close together and cause misclicks. Fix this by adding padding or margin to your clickable elements:

button, a {
  padding: 12px 16px;
  margin: 8px 0;
}

Mobile users abandon sites immediately when they accidentally tap the wrong link or button repeatedly.

Optimize images for mobile

Images cause the biggest mobile performance problems because they slow down loading and waste cellular data. Compress your images to under 100KB each and use responsive image tags that serve smaller versions to phones. Replace large hero images with compressed WebP format files that load three times faster than JPEGs.

google mobile friendly test infographic

Next steps for your mobile site

Testing your site with Lighthouse replaces the old google mobile friendly test and gives you deeper insights into mobile performance. Run audits every month to catch new issues before they affect your search rankings. Fix the problems Lighthouse identifies starting with the highest-impact items first, then work your way through smaller optimizations as your schedule allows.

Your mobile site needs ongoing attention as you add new pages and features to your business. If you want a professionally designed mobile site that passes every test without constant maintenance work, Avatar Website Design builds fully responsive websites optimized for all devices from day one. We handle the technical details so you can focus on your business instead of debugging mobile issues.

Scroll to Top