高速で Noto Sans 日本語を使う方法

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

転送サイズが最適化された Noto Sans JP が正式版としてリリースされたため、「Google Fonts を非同期で読み込みサイトスピードを高速化」のやり方がおすすめです。

アーリーアクセス版の Noto Sans JP を読み込むと、フォントの表示までに時間がかかります。

より速くフォントを表示するために、サブセット化した Noto Sans CJK JP を WordPress で読み込む方法の紹介です。

計測

このサイトを制作中の時に、ふと計測したサイトスピード結果。

キャッシュがない状態の Load Time は 0.842秒。ブラウザは全てのページリソースを 1秒未満で読み込んでいました。

試しに、アーリーアクセス版 Noto Sans JP を読み込んで再計測してみると…。

わお! 一気に 7 秒近くも読み込み時間が増加。何回か計測すると 10 秒を超えることも。

Web Font Loader を使って非同期で読み込んだので、レンダリング開始までは影響なし。ただ、フォントが表示されるまで、すごい時間がかかります。

しかも、計測環境は 5/1 Mbps 28ms RTT の有線接続と最高の通信速度。モバイルであれば、もっとひどい計測結果に。

そこで、サブセット化した Noto Sans CJK JP を読み込ませて再々計測すると…。

約 1.4 秒の増加にとどまりました。サブセット化するだけで、圧倒的に読み込みスピードが速くなります。

基本的なやり方と考え

アーリーアクセス版 Noto Sans JP の読み込みに時間がかかるのは、ファイルサイズがものすごく大きいためです。

高速で表示するには、文字数を減らしファイルサイズを小さくするサブセット化が必須です。

また、より高速で表示するために、Noto Sans JP ではなく Noto Sans CJK JP を使います。

理由は Noto Sans CJK JP は、Android と Chrome OS にシステムフォントとして採用されているから。

ローカルにあるフォントファイルを使えば、サーバーに設置するフォントファイルの読み込みが不要になります。しかも、書体はほぼ一緒。

さらに、サーバーに設置するフォントファイルは、Web Font Loader を使い非同期で読み込みます。これでレンダリングブロックを回避。

加えて 2 回目以降のアクセスに備えて、ブラウザキャッシュを効かせます。

サブセット化後のファイルをダウンロード

まずは、サブセット化された Noto Sans CJK JP のファイルを入手します。

GitHub の minoryorg/Noto-Sans-CJK-JP にアクセスし、使用するフォントウェイトのファイルをダウンロードします。

ASCII ・非漢字・ JIS第 1 水準漢字にサブセット化されていて、ほとんどのサイトでは十分な文字数。

必要なファイルの拡張子は、woff2 ・ woff の 2 つ(IE を無視していいのなら woff2 のみでも可)。

ファイル名とフォントウェイトの関係は以下のとおりです。

ファイル名 フォントウェイト
Thin 100
Light 300
DemiLight 350
Regular 400
Medium 500
Bold 700
Black 900

これ以降は、通常のフォントウェイトの Regular、太字の Bold を例に説明します。

ダウンロードするファイルは、以下のとおりです。

  • NotoSansCJKjp-Regular.woff2
  • NotoSansCJKjp-Regular.woff
  • NotoSansCJKjp-Bold.woff2
  • NotoSansCJKjp-Bold.woff

サーバーに設置

ダウンロードした 4 つのファイルをサーバーに設置します。

使用している子テーマの直下に 1 つフォルダを作成し、フォルダ名を noto-fonts にします。

作成した noto-fonts フォルダに、4 つのフォントファイルをアップロードします。

スタイルシートを作成

次にすることは、設置したフォントファイルを呼び出すためのスタイルシートの作成です。

先程作成した noto-fonts フォルダの中に 1 つファイルを作成し、ファイル名を noto.css にします。

noto.css に、以下の CSS を追加します。

@font-face {
  font-family: 'Noto Sans CJK JP Subset';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans CJK JP'),
    local('NotoSansCJKjp-Regular'),
    local('NotoSansJP-Regular'),
    url('NotoSansCJKjp-Regular.woff2') format('woff2'),
    url('NotoSansCJKjp-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Noto Sans CJK JP Subset';
  font-style: normal;
  font-weight: 700;
  src: local('NotoSansCJKjp-Bold'),
    local('NotoSansJP-Bold'),
    url('NotoSansCJKjp-Bold.woff2') format('woff2'),
    url('NotoSansCJKjp-Bold.woff') format('woff');
}

システムフォントを優先し読み込むように、しつこいほど local() を指定しています。

非同期で読み込み

サーバーに設置したフォントファイルを、 Web Font Loader を使い非同期で読み込みます。

javascript を追加するファイルに、以下のコードを追加します。<script></script> タグで囲み、<head> タグ内か </body> タグ直前にインラインで追加しても構いません。

window.WebFontConfig = {
  custom: { families: ['Noto Sans CJK JP Subset'],
  urls: ['/wp-content/themes/テーマ名/noto-fonts/noto.css'] },
  active: function() {
    sessionStorage.fonts = true;
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

3 行目には、noto.css へのパスを指定します。テーマ名の部分は、使用中のテーマ名に変更します。

コードは、FOUT with Web Font Loader を参考にしました。

font-familyを指定

あとは CSS で font-family を指定し、サイトにフォントを表示します。

body {
  font-family: 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', sans-serif;
}

最初に Noto Sans を指定しているのは、ガイドラインの Guidelines for Using Noto のとおりにしているためです。

次にローカルにフォントファイルがあることを期待し、Noto Sans CJK JP を指定しています。

そして最後にサーバーに設置した Noto Sans CJK JP Subset を指定します。

フォントのちらつきを制御

Web フォントを読み込む場合は、フォントがちらついて見える FOUT が発生します。

FOUT とは、以下の動画のように途中でフォントが切り替わる現象です。システムフォントの「Noto Sans CJK JP」から、Web フォントの「さわらび明朝」に切り替わっています。

この FOUT は、Web Font Loader が <html> タグに付与する .wf-active クラス名を用いて CSS で解決できます。

CSS の指定方法は、下記のページで解説しています。

Google Fonts を非同期で読み込みサイトスピードを高速化:FOUT(ちらつき)を CSS で制御

キャッシュを有効にする

サブセット化をしても、ファイルサイズが大きいのが日本語フォント。

欧文文字と比較すると、約 15 倍から 25 倍の大きさです。

アクセスの度に大きいサイズのファイルを読み込まないように、ブラウザキャッシュを効かせます。

サーバーの .htaccess に「コピペ一発で Simplicity を結構高速化する方法」で紹介されているコードを追加します。

Simplicity とありますが、サーバーソフトが Apache であればテーマは問いません。

元ネタは、WordPress テーマ「Luxeritas」の開発者るなさんがお書きになった「[改訂版] .htaccess の見直しでWebページ高速化」です。

ブラウザキャッシュは、日本語フォントを読み込むか否かに関わらず利用したいものです。

おわりに

アーリーアクセス版 Noto Sans JP をそのまま読み込むと、どうしてもサイト表示が遅くなります。

少し手間はかかりますが、サブセット化した Noto Sans CJK JP + Web Font Loader で読み込むとサイト速度が犠牲になりません。

FOUT が発生してもいいのであれば、Web Font Loader ではなく <link rel="preload"> で読み込んでも OK 。

レンダリングが開始される時間は、<link rel="preload"> の方が速いです。

<link rel="preload"> での読み込み方法は、下記のページをご参考ください。

AMP にも対応!Google Fonts を preload で先読みし最適化

コメント

  1. はじめまして。
    教えてください(T_T)

    >> javascript を追加するファイルに以下のコードをコピペします。
    >> Simplicity をお使いであれば、子テーマの javascript.js に追加。

    とありますが、とある海外のテンプレートを使っています。
    テンプレ内のカスタムJSコードに↑のJSを入れても、SAVEすると消えてしまう減少が起き、テンプレ配布元に問い合わせたところ、他のシンプルなJSはきくので、もしかしたら書き方が間違っているか何か原因があるので、JSを追加するプラグインのようなものを追加してみてはどうかというアドバイスをもらい、プラグイン2つほど試しましたがどうにもうまくいきません。

    なので、こちらで説明されている通り、直接jsファイルに書き込もうと思うのですが、小テーマフォルダはあるのですがJSファイルが入っていません。
    そういう場合、一般的にはどこに書き込めばいいか、アドバイスいただけますでしょうか・・・?JSフォルダを新たに作るのか、どこかのJSフォルダに書き込むのか・・・

    JSの知識がなく、さっぱりです。しかし、こちらの記事で書かれている通り、フォントのアップと、CSSファイルの追加までは完了しています。

    途方にくれています。もしわかれば教えてください><

    • カスタム JS コードがどういう機能なのかが分かりませんが、下記の 2 つが保存できない原因かもしれません。

      • ブラウザのキャッシュが邪魔をしている
      • サーバーの WAF が誤認している

      一応このコメントを書く前に、この記事に書いていることを公式テーマの Twenty Seventeen で試してみました。それで問題はなかったため、コードが原因ではないと思います。

      私であれば、とりあえずブラウザのキャッシュを削除し、再度試してみます。それでも上手くいかなければ、 FTP ソフトを使い下記の方法でカスタマイズを行います。

      まず、お使いの子テーマフォルダの直下に 1 つファイルを作成し、ファイル名を javascript.js とします。作成した javascript.js ファイルに、 Web Font Loader のコードを追加します。

      次に、お使いの子テーマの function.php に下記のコードを追加し、 javascript.js ファイルを読み込みます。

      add_action( 'wp_enqueue_scripts', function() {
          wp_enqueue_script( 'javascript', get_stylesheet_directory_uri() . '/javascript.js', array(), false, true );
      });

      この方法で上手くいくとは思うのですが、もしかすると WAF に阻まれるかもしれません。もし、上手くいかない場合には、一旦 WAF を無効にする必要があります。

      サーバーの WAF 設定は、「 WordPress403 Forbidden の原因は WAF !対処し解決する方法!:ロリポップ、さくら、ヘテムルのサーバー」がご参考になると思います。

    • (メールからの続き)

      まず、 function.php に追加した私が提案したコードを削除します。子テーマ直下に作成した javascript.js ファイルは、そのまま残します。現在の javascript.js ファイルには、何も問題ありません。

      次に、子テーマフォルダ直下に、 script.php ファイルを作成。 script.php ファイルに下記のコードを追加します。

      <?php
      
      add_action( 'wp_enqueue_scripts', function() {
          wp_enqueue_script( 'javascript', get_stylesheet_directory_uri() . '/javascript.js', array(), false, true );
      }, 1 );

      最後に、子テーマの function.php に、下記のコードを追加します。

      require __DIR__ . '/script.php';

      カスタム JS の方法か、こっちの方法か、どちらかが上手くいけばいいのですが。

  2. できました!
    途中ですでにnotoに変わっていたのに、Font-weightがレギュラーになっているので気づかなかったみたいです。900は900で、WPテンプレのカスタムCSSエリアに、!importantで読み込ませてあげなくちゃ効かなかったみたいです。
    また、テンプレにデフォルトで入っているmodules.min.cssみたいなやつから、フォント指定が邪魔してくるので、もう直接そこのfont-familyも強引にNOTOにしちゃいました。いいのかな?とちょっと不安ですが。

    読み込みが早くなった気がしないでもないです。実際よくわからないので、なにか計測ツールつかってみますね。
    本当に丁寧に教えていただき、ただただ感謝です。本当にありがとうございました!

    • 良かったです。ホッとしました。

      昨日拝見した時には <link rel="stylesheet" href="/wp-content/themes/dishup-child/noto-fonts/noto.css" media="all"> が見当たらなかったのですが、現在は出力されています。

      WEBPAGETEST で計測したところ、しっかり非同期でフォントファイルが読み込まれていました。

  3. 本当に、突然のメッセージにもかかわらず、いろいろと丁寧に教えてもらって、感動してます!ありがとうございます。

  4. シンプルで分かりやすく、丁寧な記事をありがとうございました。
    お陰さまでWebフォントを使いつつ、ある程度の高速化もかないました。
    感謝いたします。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。