Google FontsのNoto Sans Japaneseが重い?記述を変えたら速くなるかも!

「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を読んで高速化できたというレビューの中に、Webフォントの「Noto Sans Japaneseが重いようなので、サイトから外してみました」と書かれていたので、そのフォローとしてこのnoteを書きました。
Google Fontsから読み込む際の記述を変えれば、速くなるかも知れません。

Noto Sans Japaneseで表示が遅くなる?

書籍を読んで、実際に高速化してみたという記事の中に…

WEBフォントの「Noto Sans Japanese」って読み込むのめちゃくそ重いんですね

という声がありました。

かつては遅かったかも…?

かつて、Google FontsからWebフォントが読み込まれるまでの間は、ページ上にはそのフォントを利用している文字(文章)が表示されませんでした。

文字が書かれている部分が真っ白な状態のままフォントのダウンロードが終わるのを待ち、ダウンロードが終わった時点で全ての文字が表示されました。

とくに、Noto Sans Japaneseの先行アクセスを利用していた場合は、状況によりフォントファイルの総容量が約4〜8MBにもなったため、通信環境によっては、これによって「表示が遅い」と感じることがあったかもしれません。

2つの対策が打たれた今なら、速いはず

しかし、2018年10月に正式版(Noto Sans JP)になってからは、フォントを分割して配信して、ページの表示に必要なフォントファイルのみをダウンロードさせるようになったため、ダウンロードさせる容量が減り、以前よりも早くダウンロードが終わるようになりました。

出典:

また、2019年5月14日に「font-display」プロパティにも対応しました。

このfont-displayプロパティのfont-display: swapを活用すれば、先に文字をシステムフォントで表示させ、フォントをダウンロードし終わってからCSSで指定しているWebフォントに差し替えられます。

今まではフォントをダウンロードし終わるまで文字が表示されなかったものが、フォントをダウンロードしていない状態でも文字を表示できるようになるため、早い時点でページ上の文章を表示できます。
※このプロパティは、2019年5月21日以降は初期値としてGoogle Fontsの埋め込みコードに設定されています。

出典:

2019年5月20日以前の導入なら、記述を見直そう

2019年5月20日以前からGoogle FontsでNoto Sans JP(Japanese)を導入している場合、

・早期アクセス版を正式版に切り替える
・font-displayプロパティを活用する

ことで、表示速度を改善できるかもしれませんので、新しい記述を試してみましょう。

見分けかた

Noto Sans Japaneseの読み込みコードに「earlyaccess」が含まれている場合、早期アクセス版を利用しています。正式版の利用に切り替えましょう。

早期アクセス版を利用している例:

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

Noto Sans Japanese / JPの読み込みコードに「display=swap」等が含まれていない場合、font-displayプロパティが有効になっていません。設定してみましょう。

font-displayプロパティが有効になっていない例:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

設定方法

早期アクセス版から正式版に乗り換えたい方も、font-displayプロパティを有効にしたい方も、同じ方法で変更できます。

Google FontsのNoto Sans JPのページに行き、右上の「+ SELECT THIS FONT」をクリックし、右下の「SELECTED FONT」をクリック。

必要であればカスタマイズしつつ(分からなければそのままでOK)、利用方法に応じたコードをコピーして、既存のHTMLコード行を置き換えます。

このような、URL内に「display=swap」オプションが記述されたコードで、旧コードを置き換えることになるはずです。

<!-- LINKタグで呼び出す場合 -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">

/* @importで呼び出す場合 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

※上記から直接コピペしてもOKですが、公式サイトから最新のコードを引っ張ってくる形がベストです。なにごとも公式が一番安心です。念のため。

また、いままで早期アクセス版のNoto Sans Japaneseを使用していた場合は、CSS内のフォント名を「Noto Sans Japanese」から「Noto Sans JP」に書き換えましょう。

/* 例えば、これを… */
.hoge {
 font-family: 'Noto Sans Japanese',   sans-serif;
}

/* こうする */
.hoge {
 font-family: 'Noto Sans JP',   sans-serif;
}

これで完了です!
フォントが期待通りに表示されているかどうか、確認しましょう。

そもそもfont-displayプロパティって?

font-displayプロパティそのものに関しては「ウェブフォントの最適化(Web Fundamentals)」内の項目「font-display を使用する」をご参照ください。

英語ですが、font-displayの値を変えることで、どのように動作が変わるかのデモが「Font-display playground」に用意されています。

本文はここまで。以下は興味がある人向けです…

読み込んでみた結果

テストファイルを用意し、フォントの読み込み部分(linkタグとCSS記述)だけを変更して、DevToolsのようすとPageSpeed Insightsのスコアをみてみました。あくまで参考程度に…。

早期アクセス版を利用した場合、ページ全体で転送量3.2MB、PageSpeed Insightsモバイル版スコア48点

正式版を利用した場合、ページ全体で転送量435KB、スコア86点。

正式版でdisplay=swapを利用した場合、スコア99点。

正式版でdisplay=fallbackを利用した場合、スコア77点。
swap以外のプロパティも試した結果。ブロックしている時間が(この時の場合は)swapよりも長くなったからスコアが下がったということかな。

宣伝

8/23(金)「ウェブサイト高速化Night」@大分に登壇します!^^
→無事に終了いたしました、ありがとうございます!

書籍も好評発売中です! m(_ _)m


この記事が気に入ったらサポートをしてみませんか?