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>

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

DevTools - Performance 計測結果
DevTools - Lighthouse の分析結果

4. 参考