FontAwesomeを止めたらPageSpeed Insightsが改善した話
2022年06月22日 / 
2025年04月05日
前にPageSpeedInsightsでサイト診断した時から、サイトのスピード改善に四苦八苦してます(汗)
とりあえず、ひとつひとつ項目を改善していくしかないな…とコツコツやってきてたんですが、サイト作成の時に使用していたFontAwesomeを止めたら大幅にスコアが改善したのでメモ。
Contents
PageSpeedInsightsとは？
PageSpeed Insightsとは、Googleが提供しているウェブサイトの表示スピードを測定＆診断してくれるツール。
Googleでは、ユーザーへの快適なウェブ閲覧を重視しているので、検索順位を決める側のGoogleが診断してくれるのは、とってもありがたい。
スマホ用・PC用の両方をチェックしてくれるうえに、問題点もしっかり指摘してくれます。
WordPressを使用しているなら、Google Site Kitというプラグインをインストールすれば管理画面から診断を見る事ができるようになります。
レンダリングをブロックするリソースの読み込みを改善…と指摘
PageSpeed Insightsの診断結果に、上記のような指摘を受けました。
なんだろうなと調べてみると、FontAwesomeを使用してアイコン表示しているのが問題のよう。
このブログでは、FontAwesomeをheader内で読み込んで使用していたのでそれが表示を遅くする原因になっていたみたいです。
これを改善するには、FontAwesomeをダウンロードしてサーバーにアップして使用するとか、読み込みを最後に遅延するとか色々あるようですが、私はSVGファイルやpngファイルに置き換えるという方法を取りました。
FontAwedomeをやめた理由
SVGファイルは、画像フォーマットの１つでベクター形式で画像を表示します。
ベクター画像は、ピクセルで画像を表示するラスタ形式の画像と違ってサイズを変更しても画像をキレイに表示できるメリットがあります。
写真のような複雑な画像には向きませんが、アイコンなどのイラストなどには便利なファイル形式です。
そのSVGファイルの使い方も、ついでに勉強してみたかったので置き換えを選びました。
置き換えた結果、スコアがアップした
選びました…といっても、置き換えるための作業はかなり苦労しました(汗)
途中、どうしても表示できない部分はPNGファイルに置き換えて、なんとか表示できてます。
これからSVGファイルを使ったサイトも増えてくると思うので、もっと勉強します(汗)
どうにかこうにか出来上がったサイトを、再びPageSpeed Insightsでチェックすると
前々回、webフォントの記事で改善したスコアと比較すると９アップして９０に到達できました♪
モバイルファーストでサイトを作成するのが今のウェブサイトの基本ですから、どうしてもモバイルのスコアが上がらないと気になってしまいますよね。
PageSpeed Insightsの低評価に悩んだら、FontAwedomeを見直してみる
ということで、今回はPageSpeed Insightsで低評価が出たときは、FontAwedomeの使用を見直してみてはいかがでしょうか。というお話でした。
最後まで読んでいただき、ありがとうございます。
