サブセット化しよう。
こんにちは、「ふ」です。
前回の記事ではGoogle Fontsをwebで使用する方法について紹介しました。
Google Fonts 使い方。
〽️ デバイスを問わないwebフォントを使おう。
HTMLの<head>内にリンクを指定することで、デバイスに依存することなく好みのフォントで表示できるというものでした。
とても便利なものですが、1つ気にかかることがあります。
英数字のフォントを読み込ませる場合、そのファイルサイズはたかがしれているのですが、日本語フォントにおいては膨大な文字数を読み込ませることになります。そうするとページパフォーマンスに悪影響が出てしまうのではないか？という点です。
ただ、国語辞典のようなページを作るわけでもない限り、すべての日本語文字を読み込ませる必要はないでしょう。そのためGoogle Fontsには、必要な文字のみを読み込ませる「サブセット化」という方法があります。
サブセットとはもともと「部分集合」という意味の単語です。大量にある日本語の文字の中からそのページに必要なものだけを読み込ませることで、パフォーマンス低下を防止する、という仕組みです。
今回はGoogle Fontsのサブセット化の方法について紹介していきます。また実際にページパフォーマンスがどのように変化するのか検証していきましょう。
さらに、記事後半にはテキストを流し込むと必要な文字を抽出するツールも置いておきます（ページ上部の「文字抽出ツールにジャンプ」からでもアクセスできます）。長文の場合には使ってください。
設定方法。
手順はごく簡単です。
<head>内に記述している、フォントへのurlに読み込ませたい文字を追加するだけです。
<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=Yusei+Magic&display=swap" rel="stylesheet">
⬆︎のコードは「Yusei Magic」というフォントを読み込ませたものです。Google Fontsを読み込ませるときには最低3つの<link>タグを<head>内に記述します。
このうち、上2つの<link>はどのフォントにも共通しているもの。3つ目が、個別フォントのurlです。ここに追記を行います。
"https://「「３....」」display=swap「「１&text=文字」」"
href属性にあるurlの末尾が「display=swap」となっているのですが、その後ろに「&text=読み込ませたい文字」と続けて記述しましょう。
例として、「あいうえお」の５文字だけ読み込ませてみます。
"https://「「３....」」display=swap&text=「「１あいうえお」」"
埋め込んでいる場所はurl内なので、半角スペースなどを含めずに詰め詰めで記述するようにしてください。空白などがあるとうまくいきません。
ひと先づこれで、サブセット化は完了です。
検証（内部）。
<link>タグに文字を指定したので、ちゃんと指定した文字だけが読み込まれているか検証してみます。
<p class = "verify"> あいうえおかきくけこ </p>
あいうえおかきくけこ
指定文字をふくむテキスト要素に、font-familyを指定してみます。
.verify {
font-family: 'Yusei Magic', sans-serif;
}
あいうえおかきくけこ
⬆︎結果、指定した「あいうえお」にだけfont-familyが適用されました。
うまくいっていますね。
ページパフォーマンスを検証。
扨（さて）サブセット化したフォントを読み込ませると、はたしてほんとにページスピードに貢献するのでしょうか？
サブセット化したページとフォントをまるまる読み込ませた場合の読み込みスピードを比較してみました。ツールはGoogleが提供しているPageSpeedInsightsを使用します。
Google Fontsをまるまる読み込んだ場合と、サブセット化して読み込んだ場合のパフォーマンスを比較してみました。
まるごと読み込んだ場合。
はじめにGoogle Fontsの日本語を丸ごと読み込んだ場合の、転送サイズとスピードを調べます。
結果、
・転送サイズ : 29.7KIB
・データ量 : 930ms
でした。
サブセット化した場合。
サブセット化したものを読み込んだ場合。
・転送サイズ : 0.9KIB
・データ量 : 780ms
となっています。
転送サイズ28.8KIB、データ量150msを削減することができました。
そんなに劇的ではなかった。
Google Fontsの読み込みだけを対策しても、ページ全体のパフォーマンスは大して変わりません。
ただ、ページスピードを改善するには、ほかにもさまざまなファクターに対策を施して、その積み重ねで対応していくものです。
実際今回の検証では、150msほどパフォーマンスを短縮することはできています。「対策要素の１つ」としては、サブセット化は十分に貢献しています。
Google Fontsを使う際、「サブセット化」はぜひ取り入れるべきでしょう。
文字抽出ツール。
長文にわたるテキストにサブセットを適用させる場合、必要となる文字を抽出するのは骨が折れることでしょう。そこで当記事では特別ふろく（笑）として、テキストから使用されている文字を抽出するツールを貼っておくことにしました。
長文の場合にはぜひ使ってください。
@1@ ⬇︎に元のテキストを入力し、
@2@ その下の「get_letter」ボタンをクリック。
@3@ ⬇︎に「&text=使用されている文字」という形式で抽出されるので、
@4@ その下の「copy」ボタンで、クリップボードにコピーされます。
「「３<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=Yusei+Magic&display=swap「「１ここにペースト」」" rel="stylesheet">
@5@ Google Fonts読み込み用の３つめの<link>タグ、「swap」の直後にペーストするようにしましょう。
最後までお読みくださり、ありがとうございました。
今回はGoogle Fontsの日本語対策となる「サブセット化」について紹介してきました。ページパフォーマンス検証ではそれほど大きな効果は得られなかったものの、確かな効果は得られています。他の施策と合わせて、ユーザにストレスを与えないwebサイトを目指していきましょう。
ではまた〜 🎶
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。