Webアイコンフォントを使う時にLCP/CLSを改善する方法

Font Awesome などの Web アイコンフォントを使っている方は多いと思います。しかし、Web アイコンフォントが読み込まれるまでに時間がかかってサイトの LCP / CLS が悪化する場合があります。ここでは、読み込み待ちを font-display:swap; で回避しつつ、Web アイコンフォントをファーストビューから削除することで LCP / CLS を改善する方法をご紹介します。

Web フォントが悪影響を及ぼすのは LCP と CLS

Google は、コアウェブバイタル(Core Web Vitals)を検索順位の観点として考慮しています。コアウェブバイタルは FID/LCP/CLS の 3 つから構成されますが、Web アイコンフォントは主に LCP/CLS の 2 つに悪影響を及ぼします。

Web アイコンフォント読み込み完了を待ってからページを描画する場合、読み込み開始から完了までの時間がそのまま LCP を悪化させます。

Web アイコンフォント読み込み完了を待たずにページを描画する場合、使われているフォントが変わることによって文字の大きさも変わり、コンテンツの位置が動きます。これにより CLS が悪化します。

この問題を解決するには、Lazy-loading のように Web アイコンフォントを遅延読み込みさせつつ、ファーストビューで使わないようにします。

Web フォントの Lazy-loading 「font-display:swap;」

JavaScript を非同期で読み込む async, deferや、画面に表示されていない画像を遅延読み込むLazy-loadingのように、Web フォントを遅延読み込みさせる方法があります。それが font-display:swap; です。

以下は Font Awesome 4.7.0 の css ですが、@font-faceの中にfont-display:swap;を指定しています。これで、Web アイコンフォントを読み終わるまでは標準のフォントで画面がレンダリングされます。

@font-face {
  font-family: "FontAwesome";
  font-display: swap;
  ...;
}

これで LCP は改善します。しかし、アイコンフォントは標準のフォントで表示できないため、代わりにバツ印が表示されます。正直、ユーザビリティがあまり良くないです。

Web アイコンフォントをファーストビューで使わない

消極的な対応ではありますが、ファーストビューで Web アイコンフォントを使わなければバツ印は表示されません。問題解決です。ファーストビュー外であれば Web アイコンフォントを使っても CLS は悪化しないです。

「Web アイコンフォントを使わなくても問題ないのではないか？」という視点で、一度ファーストビューを見直してみてください。私は不要だと判断し、ファーストビューから Web アイコンフォントをすべて削除しました。