Lighthouse reports deprecated API: H1UserAgentFontSizeInSection - but I can find no reference to this?

[ConduciveMammal]

Summary

I’m aiming for a perfect Lighthouse score on my website.

The only remaining issue is a warning under “Deprecated APIs” referencing H1UserAgentFontSizeInSection. I’ve Googled the term and found no documentation or references to it—aside from my own Reddit post. It seems to be completely undocumented.

Can anyone clarify what this warning actually means and what changes I might need to make to resolve it?

Lighthouse CLI version: 12.4.0

[adamraine]

We pull in the deprecation descriptions from the chrome-devtools-frontend package. This one is relatively new and hasn't made its way into the package yet so you only get the error code.

I dug up the description used in DevTools:

The website has an <h1> tag within an <article>, <aside>, <nav>, or <section>, and relies on deprecated UA stylesheet rules for the resulting font size. See the second block of 'x h1' styles in https://html.spec.whatwg.org/multipage/rendering.html#sections-and-headings. These special rules are deprecated and will be removed. See whatwg/html#7867.

We should definitely update the package and pull in the latest strings.

cc @paulirish

[zcorpan]

https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements#specifying_a_uniform_font_size_for_h1 has advice for web developers which should make the warning go away and ensure you get the same rendering across browsers.

[zcorpan]

I dug up the description used in DevTools:

Chromium's console message was updated in https://chromium-review.googlesource.com/c/chromium/src/+/6384455

Found an <h1> tag within an <article>, <aside>, <nav>, or <section> which does not have a specified font-size. The size of this heading text will be changing in this browser in the near future. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifying_a_uniform_font_size_for_h1 for more information.

[ConduciveMammal]

Thanks for the info guys!

I've looked at the problematic page and reviewed the H1, looking at the CSS, I've already given it a dedicated font-size of 27px, is this not what it's requiring?

[adamraine]

There is a brief period after the first paint where the stylesheet hasn't loaded in yet, and so the page has a flash of unstyled text. Looks like Chrome detects the unstyled h1 before the CSS loads in and issues the deprecation warning.

I will ask upstream if this is intended behavior.

[zcorpan]

Using MDN's suggested CSS in a stylesheet that blocks the first paint (e.g. in a <style>) should address the issue even if the intended CSS is loaded "async".

<style>
:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}
</style>

(Arguably, loading CSS async with a flash of unstyled text is not ideal, and might also impact CLS.)