GoogleがコアウェブバイタルをSEO対策の重要な指標としてから、サイト表示速度の重要性はますます高まってきています。
表示速度に大きく影響を与える要因のひとつにWebフォントがあります。
私は文字の見やすさにこだわって使っていましたが、表示速度優先ということでWebフォントをやめたらしっかり改善しました。
そこで今日は、Webフォントが表示速度に与える影響について実例をもとにお話ししていきます。
私はテーマにCocoonを利用しているので、Cocoonの画面にもとづいて紹介します。
Webフォント使用時の表示速度
まずはベンチマークとして、Webフォントを使用していたときの表示速度を示します。
Webフォントをやめる方法
CocoonでWebフォントをやめる方法はとても簡単です。
左側メニューの「Cocoon設定」を開き「全体」タブをクリックします。
下にスクロールしていき「サイトフォント」選択欄から（Webフォント）がついていないフォントを選びます。
最後に「変更をまとめて保存」をクリックして完了です。
Webフォントをやめた後の表示速度
Webフォントをやめた後の表示速度の変化は下の通りです。
トータルとしては3ポイントの上昇ですが、FCPとLCPがかなり改善されました。
Googleが表示速度で特に重要視しているのがFCP・LCPです。
ともに0.5秒以上改善できたのでかなり効果は高いといえます。
ConoHa特有のプラグインはさらに表示速度に影響がある
私はロリポップで運用しているこのブログ以外にConoHa Wingでもブログ運営しています。
そのConoHa Wing特有のWebフォントプラグイン「TypeSquare Webfonts for ConoHa」は表示速度にかなりの影響を与えます。
実際にそのサイトをPageSpeed Insightsで見てみると、レンダリングを妨げるリソースとしてかなりのウェイトを占めていました。
プラグインで使えるフォントを使用していないのですが、有効化しているだけでかなりの遅延を招いてました。
そこで早速「TypeSquare Webfonts for ConoHa」を無効化して、無効化前と後でどのくらいパフォーマンスに差がでたか確認しました。
トータルでなんと16ポイントも上昇しました！
文字フォントに特別なこだわりがなければ無効化しておくことをおすすめします。
コメント