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

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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

0.842秒のLoad Timeのサイトスピード結果

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

試しに、 Noto Sans Japanese を読み込んで再計測してみると…。

7秒のLoad TimeのNoto Sans Japaneseを読み込んだサイトスピード結果

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

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

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

やっぱり使う勇気が出ないな Noto Sans Japanese 。

ただ Noto Sans が大好きな私。諦めきれずサブセット化した Noto Sans CJK JP を読み込ませて再々計測。

約1.4秒の増加にとどまったサブセット化したNoto Sans CJK JPを読み込んだサイトスピード結果

ふむ。約 1.4秒の増加にとどまった。これであれば許容範囲内です。

このサブセット化した Noto Sans CJK JP を、 WordPress で読み込ませる方法をご紹介します。

現在 Noto Sans Japanese を読み込んでいる方に、おすすめの方法です。

基本的なやり方と考え

Noto Sans Japanese の読み込みに時間がかかるのは、ファイルサイズがものすごく大きいため。

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

また、より高速で表示するために、 Noto Sans Japanese ではなく 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 ・ ttf の 3 つ。

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

ファイル名フォントウェイト
Thin100
Light300
DemiLight350
Regular400
Medium500
Bold700
Black900

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

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

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

サーバーに設置しスタイルシートを作成

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

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

noto-fonts フォルダに、 6 つのファイルをアップロードします。

スタイルシートを作成

続いて設置したフォントファイルを呼び出すための、専用のスタイルシートを作成します。

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'),
       url('NotoSansCJKjp-Regular.ttf') format('truetype');
}

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

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

遅延読み込み

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

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

window.WebFontConfig = {
    custom: { families: [ 'Noto Sans CJK JP Subset' ],
              urls: [ '/wp-content/themes/simplicity2-child/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);
})();

FOUT with Web Font Loader を真似して、 sessionStorage を使っています。

3行目には、 noto.css へのパスを指定します。 Simplicity 以外のテーマをお使いの場合には、 simplicity2-child の部分をご変更ください。

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 を指定します。

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

フォントを非同期または遅延で読み込む場合、または読み込みに時間がかかる場合には、フォントがちらついて見える FOUT が発生します。

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

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

CSS の一例は下記のとおり。

#site-title a,
#navi ul li a,
#breadcrumb {
  visibility: hidden;
}

.wf-active #site-title a,
.wf-active #navi ul li a,
.wf-active #breadcrumb {
  visibility: visible;
}

上記の CSS では、サイトタイトル・ナビゲーションメニュー・パンくずリストのフォントのちらつきを抑えています。

visibility:hidden; で、まずはテキストを非表示に。

そしてフォントファイルの読み込みが完了し、 <html> タグに .wf-active が付与されると、 visibility:visible; でテキストを表示します。

この CSS により、下記の動画のように途中でフォントが切り替わることがありません。

ファーストビューで見える要素に対し、 CSS を指定します。

キャッシュを有効にする

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

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

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

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

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


Noto Sans Japanese をそのまま読み込むと、どうしてもサイト表示が遅くなります。

少し手間はかかりますが、サブセット化した Noto Sans CJK JP + Web Font Loader で読み込んではいかがでしょうか。

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

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