grayishスキン適用中

Google Fontsの非同期読み込み設定について

テーマ設定
この記事は約3分で読めます。

Cocoonでは、Google Fontsの読み込みにWeb Font Loaderを用いて非同期読み込みも出来るようにしてあります。

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

Google Fontsを非同期読み込みする方法

設定方法は、Cocoon設定から「高速化」メニューを開き「Googleフォントの非同期読み込みを有効にする」を有効にしてください。

Googleフォント(β版)

これだけで、JavaScriptによりページを読み込んでからGoogle Fontsが読み込まれます。

Google Fontsの非同期読み込みについては、Akiraさんの以下のページを参考にさせていただきました。

Google Fonts を非同期で読み込みサイトスピードを高速化 – FirstLayout
サイト表示速度を遅くせず Google Fonts を利用できる Web Font Loader の使い方の説明です。テキストがちらつく FOUT を抑えることもできます。

効果のほどは

実装してみたものの効果のほどは、PageSpeed Insights的に言えば、目を見張るものとまではいかないようです。

まず、高速化したテストサイトデフォルトの状態でPageSpeed Insightsのモバイル結果は95点でした(使用したGoogleフォントはNoto Sans JP)。

デフォルト状態でのPageSpeed Insightsスコア

これに対し、Google Fontsを通常読み込みした場合だと、83点まで下がります。

通常のGoogle Fonts読み込みでPageSpeed Insightsのスコア

Google Fontsを非同期読み込みした場合は、85点です。

Google Fontsを非同期読み込みしたPageSpeed Insightsスコア

スコアにして2点程度しか変わりません。

ただ、レンダリングブロックはしないと思うので、ページ読み込み自体は速くはなっているのではないかなと。

補足

Google Fontsの通常読み込みでも、スコア的にそこまで違わないのはのは、Google Fontsの方でも以下のようだ高速化施策が行われているからなのかもしれません。

Google Fontsの日本語フォントの高速化施策が面白かった
Google Fontsが日本語対応! 日本語フォントはサイズが大きいからWebフォント化が大変ですが、Google Fontsはどのようにして高速化を実現しているのか分析してみました。

注意点

Google Fontsを利用すると、通常読み込み、非同期読み込みいずれにせよ、画面のちらつきはどうしても起こるようです。

非同期読み込み時、CSS制御によるちらつき(FOUT)制御も行ってはみたのですが、何かの拍子に出るときは出てしまうようです。

そして、PageSpeed Insightsのスコアが下がるのはどうしょうもないっぽい。

より完全に対応するにはpreloadを用いた方法が最適なのかもしれません。

Google Fonts を preload で先読みし最適化 – FirstLayout
Google Fonts を preload で先読みし、サイト表示を高速化する方法の紹介です。また、コアウェブバイタルの改善ができます。

ただ、preloadを利用すると基本的にCDNが使えません。

配布テーマの中に数MBもするフォントファイルをゴロゴロと含めておくわけにもいかないので、とりあえずWeb Font Loaderまでの対策としたいと思います。

ページ表示の速さを求めたり、ちらつきを防止したい場合はローカルフォントの使用をおすすめします。

テーマ設定

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

\WordPressの情報を発信中!/

わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

Cocoon

コメント テーマの質問はフォーラムへ

  1. 1008 より:

    いつもお世話になっています。

    webフォントのチラつきの件ですが、最近のブラウザではfont-display:swap;というプロパティが使えます。
    これはWebフォントのちらつき(FOUT)を緩和するためのものですが、Googleフォントでも使えるようになっています。

    https://fonts.googleapis.com/css?family=Kosugi&display=swap
    このようにdisplayパラメーターを含めたURLリクエストでGoogleフォントのCSSに適用されます。

    有用でしたら幸いです。

タイトルとURLをコピーしました