You ran Lighthouse and got a passing audit for “Has a <meta name="viewport"> tag with width or initial-scale.” Great. But do you know what happens when it’s missing?
Your users wait an extra 300 milliseconds on every single tap. On mobile, that’s an eternity.
What Lighthouse Is Telling You
Lighthouse checks if your page has a viewport meta tag in the <head>. Specifically, it looks for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">If it’s missing (or malformed), Lighthouse flags it.
Why It Matters
Back in the early smartphone days, mobile browsers had a problem. Websites were designed for desktop screens, and phones had tiny screens. So browsers pretended to be desktop-sized and let users pinch-zoom around.
To figure out if a page was “mobile-friendly,” browsers would wait 300ms after a tap to see if it was actually a double-tap (for zooming). This made every interaction feel sluggish.
The viewport meta tag tells the browser: “Hey, I’m mobile-ready. No need to wait.” That 300ms delay disappears.
Beyond the tap delay, the viewport tag also:
- Ensures your CSS media queries work correctly
- Prevents weird zoom behavior on form inputs
- Helps your page render at the right size on first load
Google considers mobile-friendliness a ranking factor. No viewport tag means your page looks broken on mobile, and that’s bad for SEO.
How to Fix It
Add this line inside your <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">That’s it. If you’re using a modern framework or CMS, this is probably already there. But check anyway. I’ve seen plenty of sites where someone accidentally deleted it during a template refactor.
If you need to prevent users from zooming (like for a kiosk or game), you can add user-scalable=no, but think twice before doing that. Accessibility advocates will rightfully yell at you.
Common Mistakes
Forgetting to include it at all. Especially common when building from scratch or migrating templates.
Putting it in the <body> instead of the <head>. The browser needs to see it before rendering starts.
Using width=1024 or some fixed value. This defeats the purpose. Use device-width so it adapts to whatever screen the user has.
Keep Improving
The viewport meta tag is one of those “table stakes” items. If you’re missing it, fix it now. But there’s a lot more to mobile performance than this one tag.
Check out our guide on fixing First Contentful Paint for more ways to speed up your site, or set up Real User Monitoring to see how your mobile users are actually experiencing your site.
