webサイトを作成したあとに、PageSpeed Insightsでスピードテストを行うと
だいたい「フォントに読み込みに時間かかってますね」って言われます。
どうにか解決できないものかと色々調べてみたら、Google fontsを遅延読み込みさせれば少しは良くなるとのこと。
初期コード
<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:wght@400;500&display=swap" rel="stylesheet">こんな感じの初期コードがあったとします。
解決コード
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap" rel="stylesheet" media="print" onload="this.media='all'">それをこんな感じにします。
補足
付け加えたのはpreloadとmedia=”print” 〜 の部分。
- preloadで先読みしてあげる
- 印刷用css「media=”print”」で印刷ページ以外では読みこまれないようしておく
- 「onload=”this.media=’all'”」で読み込みが完了したらmediaをallに変えてサイト全体に反映させる
みたいな流れ。
なお、一番いいのはGoogle fontsからフォントデータをダウンロードして、余計な文字データを削除して軽くして、自前のサーバーにアップして〜etc…..
ってやるのが一番早いかもしれないけど
クライアントや誰にとって何がいらない文字データかわからないし、読み込んだ方が後々更新が便利だったりするんで今はこのやり方がベストかなって思ったり。
