GoogleWebFontの読み込みを非同期にしてみた

以前にGoogleWebFontを導入してみた記事を書きましたが、今回はその続きです。

GoogleWebFontを導入してからPageSpeed Insightsで速度を計測してみるとモバイルの点数が低くなっていました。

これはGoogleWebFontの読み込み時に、レンダリングをブロックしているからのようです。

こんかいはこれを解消してみました。

非同期で読み込むように修正

こちらの記事を参考にWeb Font Loaderによる非同期での読み込みを行いました。

window.WebFontConfig = {
    google: {
      families: ['Noto+Sans+JP']
   },
   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);
})();

WebFontLoaderのバージョンはこちらで確認しました。2023年4月9日時点での最新は1.6.26です。

この方法で読み込んだところ、速度はこのようなりました。

ただ、「ウェブフォント読み込み中のテキストの表示」という表示が出るようになってしまいました。

パソコンとモバイルで読み込みを分ける

もともとパソコンは問題がなかったので読み込みを分けるようにしてみました。

functions.phpに以下のように記述しました。

if ( wp_is_mobile() ){
   //google fontsの非同期読み込み用JavaScript
   wp_enqueue_script( 'google-fonts-loader', get_template_directory_uri() . '/js/webFontAjaxLoader.js', array(), _S_VERSION, true );
}
else{
   wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap', array(), _S_VERSION);
}

この状態にして計測したところ