Google Web Fontを非同期でロードする方法

PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」には、レンダリングをブロックする CSS や JavaScript が指摘されます。

例えば、このような感じに表示されます。

PageSpeed Insights レンダリングを妨げるリソースの除外を改善する方法

この記事では、一番下の “/css?family=Sawarabi+Gothic&subset=japanese (fonts.googleapis.com)” となっている Google Web Font に注目してみましょう。
Google Web Font はファイルサイズが 26KB とあり、十分小さいはずですが、短縮できる時間は 1,230ms (1.2秒) と大きくなっています。

こうなっている理由はわからないのですが、修正すると 1.2秒短縮できるようなので、修正してみましょう。

PageSpeed Insights のレンダリングを妨げる JavaScript の除外を改善する方法

今回は、Adobe/Google 製の webfontloader という JavaScript を使用します。

webfontloader を使うと、Adobe Fonts (Typekit) や Google Fonts を非同期でロードできるようになります。

webfontloader を取り込む

webfontloader を使用するには、例えば セクションなどに下記のコードを記入します。
WordPress の場合は、Head, Footer and Post Injections プラグインを使って セクションにコードを追加できます。

ここでは、Sawarabi Gothic (さわらびゴシック) の日本語フォントを例に挙げています。

その他のフォントの場合は、’Sawarabi+Gothic&subset=japanese’ の部分を変更します。
例えば、Noto Sans JP を使っている場合は、’Noto+Sans+JP’ とします。

Web Font へのリンクを削除する

普通に Google Fonts を使っている場合は、 セクションなどに次のようなフォントへのリンクがあるはずです。

<link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic&subset=japanese" rel="stylesheet">

これは不要なので削除します。

これで、PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」で、Google Fonts への指摘が解消されます。
“/css?family=Sawarabi+Gothic&subset=japanese (fonts.googleapis.com)” がなくなりました。

PageSpeed Insights レンダリングを妨げるリソースの除外を改善する方法