Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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 content attribute.
  • The content attribute's value includes the text width=.

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:

Use a viewport meta tag audit
GTmetrix triggers this audit with the above message if your page doesn't contain a viewport meta tag.

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.

Use a viewport meta tag audit
GTmetrix triggers this audit without any details if your page contains a viewport meta tag, but doesn't specify a width or initial-scale.

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-width sets the width of the viewport to the width of the device.
  • initial-scale=1 sets 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).

Use a viewport meta tag audit
GTmetrix will not trigger this audit if your page contains a viewport meta tag and specifies a width or initial-scale.

Summary

8.4.0
 **