Google Fontsは簡単に使えてお手軽ですが、ページの表示速度を計測できる「Page Speed Insights」ではWebフォントが原因で、「レンダリングを妨げるリソースの除外」をするように警告が出てしまいます。
Webサイトはソースコードの上から下に順番に読み込まれていくわけですが、途中でcssやjavascriptがあるとレンダリング（描画）がストップします。
特にwebフォントなど外部のソースを読み込むことは、このレンダリングを妨げる要因になるので除外しましょうということなのですが、非同期で読み込むようにすれば、この問題は解決できます。
非同期とは、その読み込みが終わるのを待たずに描画を進めるようにすることです。
Web Font Loaderで読み込む
Google Fontsを非同期で読み込むには、GoogleとTypekitが共同開発したJavascriptライブラリ「Web Font Loader」で読み込むようにします。
通常はGoogle Fontsのページで出力されたlinkタグをコピペすると思いますが、Web Font Loaderを使った場合は、以下のように記述します。
<script>
window.WebFontConfig = {
google: { families: [‘M+PLUS+1p:400,500,700,800,900′,’Anton’] },
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);
})();
</script>
window.WebFontConfig = {
google: { families: [‘M+PLUS+1p:400,500,700,800,900′,’Anton’] },
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);
})();
</script>
上記の例では、「M+PLUS+1p」というフォントと「Anton」というフォントを読み込んでいます。
これでGoogle Fontsを非同期で読み込むことができ、表示速度に影響を与えていた「レンダリングを妨げるリソースの除外」問題も解決できます。
ただ、デメリットもあり、非同期で読み込むことでフォントが適用されるまでに一瞬タイムラグができ、ページを読み込んだ際に一瞬ちらつきが起きてしまいます。
Leave a Comment