コア ウェブ バイタル対策のウェブフォント徹底攻略法！ これでダメならあきらめろ
ウェブフォントは、コア ウェブ バイタルのLCPとCLSの数値を悪化させる可能性がある。簡潔に言うと次のような理由からだ。
●ネットワーク経由でフォントを読み込むのでそのほかの要素の読み込みを遅くするかもしれない（特に日本語Webフォントは影響が大きい）
→ LCPに悪影響
●ウェブフォントの読み込みが遅れることで、読み込まれたときにレイアウトのズレが生じるかもしれない
→ CLSに悪影響
そこで、こちらの記事では、さまざまな技術的な側面からウェブフォントのコア ウェブ バイタル最適化を模索している。最終的に次の3つの対処策を提案している。
●font-display:optionalの利用でCLS悪化を防止
●読み込み時間の短縮化（フォントファイルのサブセット化やフォーマット変更、HTTP/2による分割送信）
●フォントファイルの優先読み込み（preload）
正直なところ、SEOを優先するのであればウェブフォントを利用しないほうがいいという考え方もある。コア ウェブ バイタルに与える影響を心配しなくてもよくなるからだ。最適化に必要なコストもなくなる。
しかしながら、デザイン性を重視するのであればウェブフォントのほうがだんぜん美しく見せられる。
Web FontによるCore Web Vitalsへの影響と使い続ける方法
【Web FontによるCore Web Vitalsへの影響】
[LCP]
⇒フォント適用待ちによってコンテンツ描画が遅延
①DOMContentLoadedの時点で最大コンテンツの描画開始
②重いWebフォントのロード待ち
③Webフォントによる文字の再描画待ち
④ようやく最大コンテンツ箇所が表示される[CLS]
⇒文字サイズが大きいフォントによりレイアウトが移動
①重いWebフォントのロード待ち
②Webフォントによる文字の描画を待たずにローカルフォントで一旦表示
③Webフォントのロードが完了
④再度、フォントを描画
⑤文字のサイズが大きく異なり、レイアウトがずれてしまう
[LCP]
⇒フォント適用待ちによってコンテンツ描画が遅延
①DOMContentLoadedの時点で最大コンテンツの描画開始
②重いWebフォントのロード待ち
③Webフォントによる文字の再描画待ち
④ようやく最大コンテンツ箇所が表示される[CLS]
⇒文字サイズが大きいフォントによりレイアウトが移動
①重いWebフォントのロード待ち
②Webフォントによる文字の描画を待たずにローカルフォントで一旦表示
③Webフォントのロードが完了
④再度、フォントを描画
⑤文字のサイズが大きく異なり、レイアウトがずれてしまう
【CWVに影響しないWebフォントの使い方】
＜基本方針＞
①再描画させない
一度ローカルフォントで表示し、その後Webフォントで再描画すると、レイアウトがずれる
⇒CLSの悪化を招く（FOIT/FOUT問題）
②描画に時間をかけさせない
ブラウザに大きなサイズのWebフォントを読み込ませ、文章をレンダリングさせる事は、コンテンツの表示に時間をかけてしまう事になる
⇒LCPの悪化を招く
＜基本方針＞
①再描画させない
一度ローカルフォントで表示し、その後Webフォントで再描画すると、レイアウトがずれる
⇒CLSの悪化を招く（FOIT/FOUT問題）
②描画に時間をかけさせない
ブラウザに大きなサイズのWebフォントを読み込ませ、文章をレンダリングさせる事は、コンテンツの表示に時間をかけてしまう事になる
⇒LCPの悪化を招く
【CWVに影響しないWebフォントの使い方】
＜対処方針＞
①font-display:optionalの利用
Webフォントの適用を試みるが、100ミリ秒以上かかる場合は、ローカルフォントで描画し、終了する。
②ローディングの時間を極力短縮する
早くWebフォントをダウンロードさせ、font-display:optionalに間に合うようにする
③描画に必要なファイルを先にロードする
Preloadを用いて、先に必要なWebフォントを読み込む
＜対処方針＞
①font-display:optionalの利用
Webフォントの適用を試みるが、100ミリ秒以上かかる場合は、ローカルフォントで描画し、終了する。
②ローディングの時間を極力短縮する
早くWebフォントをダウンロードさせ、font-display:optionalに間に合うようにする
③描画に必要なファイルを先にロードする
Preloadを用いて、先に必要なWebフォントを読み込む
コア ウェブ バイタルの不良ページがゼロまで減少！ GYAO!はどのようにして表示パフォーマンスを改善したのか？
【GYAO!（ギャオ）のトップページ改善施策】
●WebPの採用による画像サイズの削減と遅延読み込み
●preloadによる初期画面に必要な画像の事前読み込み
●高さ確保による広告レイアウトシフト改善と、不要なアニメーションの削除
●MessageQueueを使用したデータの非正規化による読み込み速度の高速化
●GraphQLを使用して初期画面に必要な情報のみを表示する
SEOコンサルタントのまとめ
元記事をよく読んで勉強したいと思います。