[Cloudflare]Webフォントの読み込みを高速化する試み
※このページにはプロモーションが含まれています。
WordPressで作られたWebページの読み込みを速くするためにWebフォントを分割した場合の変化を調べました。
速度を上げるために工夫をしてきたのですが、最後に残った壁がWebフォントの容量の大きさです。
今まで行った高速化対策は下のとおりです。
- 表示に関わるプラグインの不使用
- ウィジェットの不使用
- ECサイトリンクはPHPのみで作成
- Google AdSenseはスクロールで発火
- Google AnalyticsはCloudflare Zarazを使用
- ファーストビュースタイルシートのインライン化
- ヘッダー画像以外にloading=”lazy”
Webフォントを使用しなければすべて解決となるのですが、今使用しているフォントはなんとか使いたいのです。
そこでGoogleフォントがどのようにして巨大な日本語フォントを配信しているかを調べます。
Googleフォントをお手本に
GoogleフォントのサイトでNoto Sans Japanese フォントウェイト400を読み込ませるためには、下記のコードを追加します。
<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&display=swap" rel="stylesheet"> preconnectで事前にフォントのあるサーバに接続した後、フォントのCSSを読み込んでいます。
このCSSにはunicode-rangeが定義されていて120分割されたファイルをGoogle社の高速サーバーからHTTP/2以上の通信を使って同時にダウンロードさせています。
分割して同時にダウンロードが可能なら容量の大きい日本語の問題は解決できるのではと、あまり期待はせずに試してみることにします。
ちなみにGoogle社のCDNから日本語フォントを配信するとなぜPageSpeed Insightsの点数が激減するかというとフォントをダウンロードする以外の通信の回数が多いためのようです。
WordPressがあるサーバーにフォントを分割してセルフホスティングし、HTTP/2で同時に配信できる方法がないかが今回のテーマになります。
ここまでをまとめると下の2点が必須になります。
- 分割して同時にダウンロードさせる
- HTTP/2以上の環境が必要
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭り無料CDNのCloudflareを使う
現在当ブログが利用しているのはシン・レンタルサーバーというエックスサーバー株式会社のサービスです。シン・レンタルサーバーでもHTTP/2での接続を行えますが、CloudflareだとHTTP/3を使用できるのでCloudflareを利用してのテストをします。
フォントファイルを分割して読み込ませてみる
Googleフォントのようにunicode-rangeを使ってフォントを分割するとスタイルシートの記述が膨れ上がってしまいます。
今回はサブセット化で使った手法でフォントを抜き出してフォントファイル自体を分割します。
できれば使用頻度の高い順でフォントをまとめられれば良いと考え、たどり着いたサイトが下のリンクになります。
Google Fontsのunicode-rangeを使ったサブセット方法
ページ中程のリンクから120分割された文字とUnicodeの一覧表があり大変助かりました。
この一覧表を見ると上から20個のファイル作れば、常用漢字+α（約3000字）・ひらがな・カタカナ・英数と通常の使用にには十分だと考えましたので、サブセットフォントメーカーとWOFFコンバーターを使用し20個のフォントファイルを作成します。
使用するフォントによってファイルサイズが変わりますが、一般的に角ゴシックより丸ゴシックのほうがサイズが大きくなります。当サイトではで使用しているZEN丸ゴシックはNoto Sans Japaneseに比べると15%程度のサイズ増になります。
常用漢字から普段あまり使用しない漢字300文字を減らして作成したフォントファイルのサイズは400kbでしたが、今回作成した20個のファイルを合計すると650kbとなり、文字数の増加に比例して容量も増加しています。
すべてのファイルをpreloadする
できた20個のwoff2ファイルとicomoonアイコンフォントの合計21個のフォントファイルをすべて下のコードを例にpreloadさせます。
<link rel="preload" href="/fonts/font-20.woff2" as="font" type="font/woff2" crossorigin>スタイルシートに下のコードを追加してフォントを読み込ませます。
@font-face {
font-family: 'Sumibi-Blog';
font-style: normal;
font-weight: 400;
src: url(/fonts/font-20.woff2) format("woff2");
font-display: swap;
}作成したすべてのファイルを読み込ませたあとGTmetrixでどのようにフォントファイルがダウンロードされているかを調べた結果が下の画像です。
確かにフォントが同時にダウンロードされています。点数もAAどころかどちらも100%です
しかし目的のPageSpeed Insightsの測定では、400kbの一つのフォントファイルで計測したときに比べて10ポイント程度のスコアダウンです。
そこで、preloadファイルの数を変更してみます。
一部のファイルをpreloadする
技術的なことはわからないので、必ず必要であろう3つだけををpreloadして測定したのが下の画像です。
GTmetrixのスコアはどちらも100%と変わらずでした。
PageSpeed Insightsのスコアは大分良くなって96から97点くらいになります。すべてのファイルを同時にダウンロードしたほうが早くなると思うのですが、よくわかりません。
調べてみると、モバイル環境とデスクトップ環境では読み込み方法が違うようです。スマートフォンの性能によっても読み込み方が変わるようです。
実際に感じることはfont-display:swapによってフラッシュが起こってしまうことです。font-display:optionalが使えればフラッシュは無いと思うのですが、フォントの読み込みが遅いと初回のアクセスではWebフォントが表示されなくなります。
今の所はどの設定でWebフォントを読み込ませるのが判断しにくいのですが、無料のCDNを使えば予想していたよりページの高速化が図れることは確認できると思います。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。