炭火Blog

[Cloudflare]Webフォントの読み込みを高速化する試み

※このページにはプロモーションが含まれています。

  1. Googleフォントをお手本に
  2. 無料CDNのCloudflareを使う
  3. フォントファイルを分割して読み込ませてみる

WordPressで作られたWebページの読み込みを速くするためにWebフォントを分割した場合の変化を調べました。

速度を上げるために工夫をしてきたのですが、最後に残った壁がWebフォントの容量の大きさです。

今まで行った高速化対策は下のとおりです。

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点が必須になります。

Amazonセールとイベント

無料CDNのCloudflareを使う

現在当ブログが利用しているのはシン・レンタルサーバーというエックスサーバー株式会社のサービスです。シン・レンタルサーバーでもHTTP/2での接続を行えますが、CloudflareだとHTTP/3を使用できるのでCloudflareを利用してのテストをします。

転職のためのプログラミングスクール【無料PHPスクール】

フォントファイルを分割して読み込ませてみる

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オリジナルテーマ制作入門
1冊ですべて身につくWordPress入門講座

関連投稿

週間アクセスランキング

管理者 ほんだ

数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。

Home
Blogging
[Cloudflare]Webフォントの読み込みを高速化する試み