計測
このサイトを制作中の時に、ふと計測したサイトスピード結果。
キャッシュがない状態の 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 にします。そして、以下の 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 へのパスを指定します。テーマ名の部分は、使用中のテーマ名に変更します。
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> タグの class に付与する wf-active を用いて CSS で解決できます。
CSS の指定方法は、Google Fonts を非同期で読み込みサイトスピードを高速化 – FOUT（ちらつき）を CSS で制御で解説しています。
キャッシュを有効にする
サブセット化をしても、ファイルサイズが大きいのが日本語フォント。欧文文字と比較すると、約 15 倍から 25 倍の大きさです。
アクセスの度に大きいサイズのファイルを読み込まないように、ブラウザキャッシュを効かせます。
サーバーの .htaccess にコピペ一発で Simplicity を結構高速化する方法で紹介されているコードを追加します。
Simplicity とありますが、サーバーソフトが Apache であればテーマは問いません。
元ネタは、WordPress テーマ Luxeritas の開発者るなさんがお書きになった[改訂版] .htaccess の見直しでWebページ高速化です。
ブラウザキャッシュは、日本語フォントを読み込むか否かに関わらず利用したいものです。