早期アクセスだったNotoが2019年ごろから、正式にリリースされた。
こちらのURLに差し替えると、かなり速度が向上する。
<!--<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">速度改善のキーワードは以下の２つ。
サブセット化
フォントに含まれている文字の中から必要な文字だけを抜き出してファイルサイズを小さくする手法。
例えば、Google Fonts の Noto Sans JP では 120 つの @font-face が登録され unicode-range を使用することで Unicodeコードポイントでの適用範囲を指定している。
以下、ソースの実態。
/* [0] */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://fonts.gstatic.com/s/notosansjp/v18/-F62fjtqLzI2JPCgQBnw7HFow2os2HUP5pp0erwTqsSGs8dLiZ-nVOFVLsE_RS1PblwsiBhLorUfH78.0.woff2) format('woff2');
unicode-range: U+28946, U+28949, /*...(中略)...*/ U+2f9de-2f9df, U+2f9f4;
}
/* [1] */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(https://fonts.gstatic.com/s/notosansjp/v18/-F62fjtqLzI2JPCgQBnw7HFow2os2HUP5pp0erwTqsSGs8dLiZ-nVOFVLsE_RS1PblwsiBhLorUfH78.1.woff2) format('woff2');
unicode-range: U+243bc, U+243d0, /*...(中略)...*/ U+286d7, U+286fa;
}
...つまり、指定してあるコードポイントの文字ごとにファイル分割を行い、ページ内で使用されている文字に該当するフォントファイルのみを読み込んでいるため、最小限のファイルサイズにとどめることができている。
ちなみにこの unicode-range の指定は、コードポイントのアルファベット順番などではなく、パターン分析によってよく使う文字列を抽出された結果を利用しているらしい。
ソース：https://blog.ikunaga.net/entry/google-japanese-font-speed-up-method/
font-display プロパティ
font-display: swap の指定により、先にシステムフォントを表示させ、フォントのダウンロードが終えてから CSS で指定しているフォントに切り替えられるようになった。
さらに高速化するには
下記のように実装するとLighthouseの点数が上がる。
<!--
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
-
- 4. In the unlikely event that a visitor has intentionally disabled
- JavaScript, fall back to the original method. The good news is that,
- although this is a render-blocking request, it can still make use of the
- preconnect which makes it marginally faster than the default.
-->
<!-- [1] -->
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<!-- [2] -->
<link rel="preload"
as="style"
href="$CSS&display=swap" />
<!-- [3] -->
<link rel="stylesheet"
href="$CSS&display=swap"
media="print" onload="this.media='all'" />
<!-- [4] -->
<noscript>
<link rel="stylesheet"
href="$CSS&display=swap" />
</noscript>参考：https://csswizardry.com/2020/05/the-fastest-google-fonts/