Web Vitals patterns: Third-party fonts を試す

1. このページの目的

Web Vitals patterns の Third-party fonts を試す。

2. デモ

利用するフォントは、日本語を含むフォントに変更した。

CSSも少し変更した。

HTML

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans JP', sans-serif;
        }
    </style>
</head>

外部CSSではなく、インラインで font-family を宣言している。
<link rel=preconnect ...> による事前接続。
外部のCSS側の @font-face 宣言では、font-display: swap が指定されている。

3. パフォーマンス解析結果

DevTools - Performance 計測結果

デフォルトのフォントと今回外部から読み込んで適用するフォントの形が違うので、Layout Shift が多少発生するのは仕方ない。CLS への大きな影響はない。

DevTools - Lighthouse の分析結果

DevTools の Lighthouse でテストすると、「Eliminate render-blocking resources」として https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swapが指摘されるが、このファイルはなんとしてでも最初に読み込まければいけないので、これは仕方ない。

4. 参考

Web Vitals patterns