Viewport audit does not flag for initial-scale < 1

[tunetheweb]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://pro-truck.com/

What happened?

(Note related to #12884 )

This has the following meta viewport in the HTML:

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

The initial-scale=0.9 causes the 300 second tap delay impacting FID and INP as noted in this recent blog post: https://www.phpied.com/fixing-inp-with-a-viewport-tag/

The current audit checks isMobileOptimized which only checks for the presence of initial-scale:

lighthouse/core/computed/viewport-meta.js

Line 38 in 6eba650

const isMobileOptimized = Boolean(viewportProps.width || viewportProps['initial-scale']);

We should enhance that to also check that the initial-scale is not < 1 as that also triggers the slowness.

What did you expect?

Audit should fail

What have you tried?

Details above.

How were you running Lighthouse?

PageSpeed Insights

Lighthouse Version

10.3.0

Chrome Version

114

Node Version

N/A

OS

N/A

Relevant log output

https://pagespeed.web.dev/analysis/https-pro-truck-com/wohl517q6h?form_factor=mobile

[adamraine]

Interesting, didn't realize this was dependent on the scale value. I do wonder if this change makes sense for SEO ranking as well though.

If our SEO advice is slightly different from our perf advice then we will need two different audits for this now.

[tunetheweb]

FYI, @yoavweiss dug this up from the Chrome code

I do wonder if this change makes sense for SEO ranking as well though.

If our SEO advice is slightly different from our perf advice then we will need two different audits for this now.

Given that Search is retiring the mobile friendly test and leaving it up to other tools (they recommend Lighthouse!), maybe it's time to remove it from SEO audit at same time and therefore avoid any conflict or duplication of audits?

[adamraine]

We are going to do this, we are not so concerned about the effects on the SEO category.

https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2021_05_fid.md

[paulirish]

our current check is this:

    const isMobileOptimized = Boolean(viewportProps.width || viewportProps['initial-scale']);

we can change it to see if initial-scale is truthy and a number >= 1.