Google Fontsを非同期で高速に読み込みする方法
Google Fontsを非同期で高速に読み込みする方法です。
当サイトではGoogle Fontsの「Noto+Sans+JP」を使っている。
ところがモバイルでは表示スピードが遅く、パフォーマンスに影響が出ていることが、PageSpeed Insightsでの調査でわかった。原因の一つはフォントの読み込みによるレンダリングブロックである。
Google Fontsを使わないという選択肢はできないので、遅延を解消するための方法を模索していたところ「Web Font Loader」を使うことで、Google Fontsを非同期で高速に読み込みする方法に出会った。
ここでは Google Fontsを非同期で高速に読み込みする方法 を紹介します。
Sponsored Links
Web Font Loaderとは
Web Font Loaderとは、GoogleとTypekit が共同開発したJavascriptライブラリだ。
詳しくはこちらのサイトを読んでみてほしい。
GitHub - typekit/webfontloader
Web Font LoaderでGoogle Fontsを読み込む方法
Web Font LoaderでGoogle Fontsを読み込む方法です。当サイトはWordPressを利用しているので、その辺りの知識がある前提で話を進める。
サンプルコード
利用するフォントは「Noto+Sans+JP」。fontload.jsなどの新しいファイルを作って貼り付けるといいかも。
/*
* Google Fonts 非同期読み込み
*/
window.WebFontConfig = {
google: { families: ['Noto+Sans+JP:400,500,700'] },
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);
})();
あとはfooter.phpへjsファイルの読み込みを記述すればOK。
複数フォントを指定する
複数フォント指定したい場合は下記のようにすればOK。
google: { families: [‘Noto+Sans+JP:400,500,700‘,’Montserrat:400,600‘] },
フォントウェイトは指定しなくても使えるぞ。
ちらつき対策
Web Font LoaderでGoogle Fontsを読み込むと、読み込みまでに多少のちらつきが出る。
気にならない方は無視してもらって構わないが、気になる方向けに対策を書いておく。
Web Font Loaderを使用すると、htmlタグに「.wf-active」クラスが自動で付与される。これを利用して読み込みが間りょするまでは非表示にするCSSを記述する。
/* Google Fontsちらつき対策 */
html * {
visibility: hidden;
}
html.wf-active *{
visibility: visible;
}
Sponsored Links
まとめ
Google Fontsを非同期で高速に読み込みする方法を紹介しました。
この対応によって、PageSpeed Insightsで「レンダリングを妨げるリソースの除外」のメッセージが表示されなくなった。よかったよかった。
ただ、こちらの対応だと、ちらつき防止対策がちょっと気になるなー。超低速通信環境だと、画面が真っ白のままになってしまうような気がするんだけど、大丈夫かな。まあ、当サイトはモバイルユーザー少ないし、気にしないことにします。
おつかれさまでした。