表示速度を上げたかったらFont Awesomeの外部CSSロードはやめよう
WEBZINNEトピックス編集部公開日：2020年10月6日
かつてはアイコンのライブラリとして定番だったFont Awesomeの外部CSSロードも、現在ではページレンダリングの原因になります。表示速度を上げたかったらFont Awesomeの外部CSSロードはやめる方が良いです。
Font Awesomeの外部ロードがなぜ遅いのか？
Font Awesomeを外部CSSファイルとして読み込む場合、2つの問題点があります。
- CDNサーバーからのダウンロード遅延
- レンダリングブロック
どちらも、ページ速度を遅くする原因となります。
Font Awesomeは、HTMLファイル上で、
<i class="fas fa-users"></i>
といった形で指定するだけで、デザインの良いアイコンが使えることが最大のメリットですが、この「fas fa-users」クラスがアイコンを表示できるのは、巨大なFont Awesomeライブラリ本体をロードしているからに他なりません。
Font Awesomeライブラリ本体には使わないアイコンまで含まれていますから、使わないアイコンが原因でレンダリングブロックが起こるのは、ページ全体を見ると良いこととは言えないでしょう。
Font Awesomeのライブラリ全体ロードは百害あって一利なし
このように、Font Awesomeのライブラリ全体ロードは百害あって一利なしです。Vue.jsなどのフレームワークでは、個別のフォントを取り込む方式をとっているので問題になりませんが、通常のHTMLベースのページではライブラリ全体ロードを回避しましょう。
SVGで代替できることが多い
Font Awesomeは優れたアイコンライブラリですが、代替手段がないわけではありません。
例えば、SVGはHTMLの中に直接コードを書けるだけでなく、サイズがレスポンシブにできるため、最新のWebデザインでは積極的に利用されています。
最近はスマートフォンでも高速通信が当たり前になってきているので、SVGファイルのロードが増えたところでページの表示速度に与える影響は微々たるものです。
HTTP/2.0ならパラレルダウンロードできる
現在のブラウザはほとんどがHTTP/2.0に対応していますので、サーバーがHTTP/2.0に対応していれば、Webページを表示させるときにダウンロードファイルはパラレル（平行）ダウンロードされます。
かつてはファイルのダウンロード待ち対策として「CSSスプライト」が多用されていましたが、今日では逆に小さいファイルに分けた方が高速表示できる面もあります。
その意味では、Font Awesomeのようなモノリシックなライブラリを使うメリットは、現在ではほとんどありません。アイコンごとにファイルが分割されていても、現代のブラウザは高速表示してくれます。
Font Awesome自体は優れたアイコンライブラリ
とは言え、Font Awesome自体は優れたアイコンライブラリですから、使うことに消極的になる必要はありません。ただ、ライブラリ全体をロードするような使い方は回避すべきでしょう。