【Font Awesome】SVG化で軽量化とレイアウトシフト対策「PageSpeed Insights」FCPも改善へ

なおと / naoto.k

公開：2025/11/15 20:01 更新：2025/11/15 20:07

【Font Awesome】SVG化で軽量化とレイアウトシフト対策「PageSpeed Insights」FCPも改善へ

簡単にアイコンの導入が可能な「Font Awesome」、今では多くのサイトで使われているサービスです。無料プランでも2,000を超えるアイコンが、HTMLやCSSに記述するだけですぐにサイト上に表示されます。

そんな「Font Awesome」ですが、「PageSpeed Insights」でサイトのパフォーマンスを測定すると、『フォント表示』の項目で『テキストの表示を統一するため、font-display を swap または optional に設定することを検討してください。swap をさらに最適化して、フォント指標のオーバーライドでレイアウトシフトを軽減できます。』との指摘が。

そうです。アイコンを使うと、サイトが重くなるのです。重くなるといっても気にするレベルではないのですが、できるだけ読み込みが速い計量なサイトにしたい場合は、少し工夫する必要があります。

Font Awesomeってどんな仕組み？

通常、「Font Awesome」ではHTML・CSS・フォントファイルを使ってアイコンを表示します。仕組みとしては、アイコンのHTMLを記述すると、クラス名に対してCSSとフォントファイルが適用され、フォントファイルに収録されているアイコンが実際に画面に表示されます。

See the Pen Untitled by tofuchan165 (@tofuchan165) on CodePen.

アイコンを使用すると重くなるのか

一般的な方法でFont Awesomeのアイコンを使用する場合、仮にそのページで1つしかアイコンを使用していない場合でも、収録されている全てのアイコンデータを読み込む必要があります。

all.min.cssは必ず読み込む必要があり、fa-solid-900.woff2などのファイルはそのページで該当のアイコンが使用されている場合に読み込まれています。(環境による違いあり)

Font Awesomeのバージョンによっても違いますが、読み込むファイルの大きさは300KBくらいです。300KB程度で重くなるようなサイトはそもそもおかしいのですが、0KBと300KBでは当たり前ですがデータの大きさが違うため、多少なりとも読み込み速度に影響が出ます。

また、ファイルを読み込む順番によっては「レイアウトシフト」が発生する可能性があります。こちらは後ほど解説します。

SVGアイコンを使えば解決！！

ということで、今回の本題「SVG」アイコンを使用する方法を紹介します。SVGアイコンを使用することで、Font Awesomeのファイルを読み込む必要がなく大幅な軽量化に繋がります。

実は、Font AwesomeはSVG形式でもアイコンを提供しています。公式サイトから使いたいアイコンを選んでSVGを選択すると、SVGのコードが表示されます。そのコードを自分のサイト上に記述することで、Font Awesomeのファイルを読み込んでいなくてもアイコンが表示されます。もちろん色や大きさもCSSで変更可能で、拡大しても劣化しません！

See the Pen Untitled by tofuchan165 (@tofuchan165) on CodePen.

使用する場合の注意点

SVGでも2種類存在する

公式サイトを見てもらうと分かりますが、「SVG」と「Full SVG」の2種類が存在します。どちらも同じアイコンですが、空間の大きさが異なります。

簡単に説明すると、Full SVGは全アイコン共通で正方形の空間上に表示されます。対してSVGは、必要な分のみの空間にトリミングされアイコンが表示されます。

環境によっても異なりますが、この後紹介するCSSでアイコンの大きさは共通化するので、特に不具合がなければ「SVG」をおすすめします。

クラス名とアクセシビリティ対応

そのまま公式サイトのコードを使用しても問題はないのですが、CSSで変更を加えたりスクリーンリーダーに対してこのアイコンは装飾だよという情報も追加します。

SVGタグにクラス名(class)と、aria-hidden属性を追加します。クラス名はFont Awesome以外のSVGと重複しない、管理しやすいもので構いません。aria-hidden属性を追加しないとスクリーンリーダーを使用した際にアイコンのコードが読み上げられてしまったり、PageSpeed Insightsで指摘されることがあります。

class="icon" aria-hidden="true"

元のコードには「xmlns="http://www.w3.org/2000/svg"」という属性もありますが、これはブラウザに対してSVGの仕様を示すもので、現在主流のブラウザはxmlns属性が無くても標準でSVGの仕様を解釈するようになっているので、省略しても構いません。環境によっては省略するとアイコンが表示されなくなることがあるのでご注意ください！

アイコンの大きさを揃える

今までHTML形式でアイコンを使用していた方は、SVGに切り替えるとアイコンが特段と大きく表示されると思います。また、縦方向の位置であったりアイコン右側のスペースも変わるので、その調整をしましょう。

※ご自身で別のクラス名を使用している場合は変更してください。環境によっては値の調整が必要です。

See the Pen Untitled by tofuchan165 (@tofuchan165) on CodePen.

色(fill)や大きさ(height・width)は親要素を継承
margin-right: 0.4em; でアイコン右側に空間を設ける
overflow: visible; でアイコンのサイズが不意に可変されるのを防ぐ
vertical-align: -0.125em; で縦方向の位置を調整

色を変更するには

SVGは、color: #000; という方法では色の変更ができません。色の変更をする場合は、colorを、「fill」に置き換えてください。

上記のCSSでは、親要素の色を継承するようにしています。個別でアイコンの色を変更する場合は、別途クラス名を追加したり、インラインで直接styleを適用してください。

コード内にあるコメントは残して

無料プランでは、「CC BY 4.0」のライセンスが有効です。アイコンを使用する場合は帰属表示が必要です。

今回のようにSVGアイコンを使用すると、別にファイルを読み込む必要がなく本来そのファイルに記載のある帰属表示がない状態となります。そのため、SVGのコードに直接コメントで帰属表示がされています。

See the Pen Untitled by tofuchan165 (@tofuchan165) on CodePen.

コメントアウトされているため、フロントエンドにはその文章は表示されません。基本的にコメントは残してください。

どうしても気になる場合、別にhead内に書くか、必要最低限のコメントに省略することが可能です。いずれの方法においても、ライセンスを確認したうえでおこなってください。

レイアウトシフト対策にもなる

「レイアウトシフト」とは、ファイルやデータを多く読み込んだり、読み込み速度の違いによりコンテンツの位置や見た目が変わる現象のことです。サイズの大きいコンテンツを多用しているサイトや、対策していないサイトでよくある、サイトに訪れたすぐの時と完全に読み込みが完了した時でテキストの位置やボタンの位置が変わるあの現象です。

ユーザーにとっては、意図した動作ではないのでできるだけレイアウトシフトは減らしたいところです。

実際の当サイトの画面を使って解説します。「総合」というテキストの左側にインフォメーションアイコン、右下の「YouTube」というテキストの左側にYouTubeアイコンをHTMLコードで追加しています。ファイルのロード順は、どのサイトでも基本的にHTML→CSS→JSです。コードによって異なりますが、CSSを読み込むあたりでフォントファイルも読み込まれます。

よーく見ると、②のファイルロード時まではフォントファイルが読み込まれていませんので、テキストのフォントはシステムフォントで、ロードが完了するとWebフォントになっています。もちろん、フォントファイルが読み込まれていないということはアイコンも表示されません。