Googleフォントをpreloadで先読みして「ちらつき」を抑制する方法
Googleフォントをpreloadで先読みして「ちらつき」を抑制する方法です。
当サイトでは、パフォーマンス向上のためにGoogleフォントをCDNから読み込むのをやめてローカルに配置したものの、レンダリングがブロックされたことで、Web Font Loaderを使ってGoogleフォントを読み込む方法に変更した。ただ、ちらつき対策が万全ではないことから、今回の改善にたどり着いた。
<link rel="preload" href="fontsの場所" crossorigin>
relの値にpreloadを使用すると、 link要素は利用したいあらゆるリソースの事前読み込み指示になる。そのため、テキストのちらつきを抑制できる上、CLSの抑制にもつながる。
ここでは Googleフォントをpreloadで先読みして「ちらつき」を抑制する方法 を紹介します。
Sponsored Links
Googleフォントをダウンロードしてローカルに配置する
今回はパフォーマンス向上のために、Googleフォントをダウンロードしてローカルに配置して実装する。
手順としては以下の通り。
- Googleフォント のダウンロードする
- ローカル（サーバー）に配置する
- CSSでfont-faceを指定する
まずは「Googleフォントをローカルに配置して使う方法」のページを参考にして、Googleフォントをダウンロードしてローカルに配置してほしい。
preloadを指定する
次に、link rel="preload"にて、Googleフォントを先読みしてレンダリングブロックを回避するを記述をする。
headタグのなるべく最初の方に指定するのがよい。当然ながらCSSより前に追加する必要がある。
<link
rel="preload"
as="font"
href="./fonts/NotoSansJP-VariableFont_wght.ttf"
crossorigin />
href属性には、CSSのurlで指定したパスと同じものをセットすればOK。
以上で作業はおしまい。ちらつきがなくなっていることを確認しよう。
Sponsored Links
参考サイト
参考になります。
rel=preload - HTML: ハイパーテキストマークアップ言語 | MDN
まとめ
Googleフォントをpreloadで先読みして「ちらつき」を抑制する方法を紹介しました。
これで「ちらつき」もなくなったし、Webフォント読み込みによる「レンダリングを妨げるリソースの除外」の問題が完全に解決したのかなっと。
おつかれさまでした。