Lighthouse: Use a <meta name="viewport"> tag with width or initial-scale
Overview
Using the viewport meta tag lets you set the width and scaling of the viewport so that it's correctly sized on all devices, particularly mobile devices.
Not using the viewport meta tag can make your website difficult to read, and also potentially add a significant delay on mobile browsers, impacting First Input Delay.
How does your site score on this audit?
How does not using the viewport meta tag affect page performance?
The viewport meta tag is considered an industry best-practice for mobile website design as it basically enables the browser to optimally display your webpage on mobile screens.
Without this tag, your mobile page performance is affected in the following ways:
Sub-optimal scaling
In the absence of a viewport meta tag, your website is first rendered at typical desktop screen widths and then scaled down to the mobile screen width. This can make your website difficult to read for some visitors.
Increased FID
Most mobile browsers offer a quick zoom feature, where you can double tap the screen to easily magnify content not designed for a mobile screen.
However, if you haven't used a viewport meta tag, mobile browsers generally apply up to 300 ms of delay after the first tap to verify if a second tap follows it. During this period, the page cannot respond to the initial tap, adding several hundred ms to your page's FID.
This not only worsens the page experience for your visitors, but also potentially affects your page's search rankings.
Adding a viewport meta tag can help eliminate this delay, improving the page experience for your visitors.
How does GTmetrix trigger this audit?
GTmetrix will trigger this audit unless all of the following conditions are met:
- Your page's
<head>contains a<meta name="viewport">tag. - The viewport meta tag contains a
contentattribute. - The
contentattribute's value includes the textwidth=.
If your page doesn't contain a viewport meta tag and you click on the audit to expand it, GTmetrix will display the following message:
If your page does have a viewport meta tag, but does not specify the width or initial-scale, GTmetrix will still trigger this audit. For example, if you added the following to your page:
<meta name="viewport">
In this case, you'll find that GTmetrix will trigger this audit, but if you click on the audit to expand it, you will not see any details inside.
How to fix this audit?
If GTmetrix triggers this audit, paste the following code in your page's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Where:
width=device-widthsets the width of the viewport to the width of the device.initial-scale=1sets the initial zoom level when the user visits the page.
Once you do this, GTmetrix should no longer trigger this audit (i.e., you will find it in the No Impacts section of the GTmetrix Report).
