PageSpeed Insights の「レンダリングを妨げるリソースの除外を改善する方法」には、レンダリングをブロックする CSS や JavaScript が指摘されます。
例えば、このような感じに表示されます。
この記事では、一番下の “/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)” がなくなりました。