SNSアイコンや電話マーク、矢印、ハンバーガーメニューなど。
WordPressサイトでは、Font Awesomeをはじめとしたアイコンフォント（Webアイコン）がよく利用されています。
Google Fontsほど目立ちませんが、アイコンフォントもWebフォントの一種です。
表示速度改善をご依頼いただくサイトでも、アイコンフォントの読み込み方法を見直すだけで、PageSpeed Insightsのスコアが改善するケースは少なくありません。
記事を書いた人は信じられる？
最初に簡単に自己紹介をさせてください。
私は独学でサイト表示速度の改善方法を学びました。
高速化作業はPageSpeed Insightsの分析結果で図ることができ、施策効果が目に見えるもので、体感的に改善を感じることもできます。
当時はAIも今ほど普及していなかったので試行錯誤でスキルを身に付けました。
そのスキルを活かして、2019年ころからサイト高速化業務に携わってきましたが、2026年現在、1,000サイトは軽く超えた作業実績があります。
自己申告なので証拠はと言われるとなかなか示しづらいところはありますが、ココナラでのWordPress高速化作業実績がNo.1なのは確固たる証拠と言えると思います。
もちろんココナラ以外にランサーズでも作業実績があり、このサイトから直接依頼されるケースも多いです。
同業者さんから難しい改善を依頼されることも多々あります。
ネット検索でのWordPressの表示速度改善方法やAIの提案はまだまだあまく、効果がないものまで紹介、提案されることすらあります。
WordPressの表示速度改善方法を紹介している記事を、PageSpeed Insightsで分析したことはありますか？
立派なことを書いているのに残念なスコアになっていたりしませんか？
もちろん、運営するこのサイトのPageSpeed Insightsのスコアはほぼ100点です。
私は日本一サイト高速化をしてきているプロ、それも証明できる実績のあるプロだと自己評価しています。
1,000サイト以上を改善してきた本当のプロが、実践で結果を出せる本当の改善方法をご紹介します。
▽coconalaでの評価
https://coconala.com/users/2093261/reviews
アイコンフォントが重い理由
アイコンフォントが重い理由は、Googleフォントが重い理由とほとんど同じです。
たくさんのアイコンをまとめて読み込んでいるためです。
数個しか使っていなくても、数百〜数千種類分のアイコンデータを読み込んでいることがあります。
たくさんのアイコンが使えるのは便利ですが、その分読み込むデータ量も増えてしまいます。
アイコンフォントは遅延読み込み可能
実務では、アイコンフォントを見つけたら、まず遅延読み込みを検討します。
アイコンフォントもWebフォントですので、Googleフォントと同じような考え方で改善できます。
ただし、ファーストビューに表示されているアイコンまで遅延読み込みすると、アイコンが一瞬表示されなかったり、表示が切り替わったりしますので要注意です。
そのため、まずはファーストビューにアイコンがあるかどうかを確認します。
ファーストビューのアイコンは画像やData URIに置き換える
ファーストビューで使用しているアイコンは、画像やData URIへ置き換えることが多いです。
これならアイコンフォントを初回読み込みする必要がなくなるため、遅延読み込みで表示速度改善が期待できます。
Data URIって何？っていうことなんですが、画像ファイルを別で読み込まず、HTMLやCSSへ直接埋め込む方法です。
実務ではメディアライブラリに画像をアップロードしたくない時、そもそもサーバー上にファイルをアップロードできない時に使用しています。
表示確認はしっかり行う
ここで一番大切なのが表示確認です。
トップページでは問題なくても、投稿ページや固定ページだけファーストビューにアイコンが表示されているケースは意外とあります。
そのままアイコンフォントを遅延読み込みすると、そのページだけアイコンが表示されるまで時間がかかることがあります。
ページ数が多い場合は確認も大変ですが、例えば、
- トップページ
- 投稿ページ
- 固定ページ
など、ページタイプ単位でも確認してください。
確認しきれない、不安な時は条件分岐を利用して、ページタイプごとにアイコンフォントの読み込み方法を切り替えることもあります。
画像やData URIへ置き換える時の注意点
画像やData URIへ置き換える場合は、CSSの color が効かなくなる点に注意が必要です。
アイコンフォントであれば、
color:hover- ダークモード
- テーマカラー変更
などに簡単に対応できます。
しかし、画像やData URIでは同じようには動きません。
IcoMoonという方法もある
アイコンフォントを利用し続けるのであれば、IcoMoonという方法もあります。
IcoMoonなら必要なアイコンだけをまとめたアイコンフォントを作成できるため、Font Awesomeより読み込むデータ量を小さくできます。
ただし実務ではIcoMoon用のセットを作り直すのは手間なので、画像やData URIへ置き換える対応をしています。
サイトの状況に合わせて使い分けるのが良いでしょう。
まとめ
アイコンフォントは便利ですが、何も考えずに読み込むと表示速度へ影響することがあります。
遅延読み込みでスコアへの影響を回避できるのは良いんですが、問題はファーストビューでアイコンが使用されていた時ですよね。
それもたくさんのアイコンが使われていたりすると・・・。
1つ1つ画像を作るのが微妙に面倒です。
とはいえ、期待できる改善効果は高いのでおすすめの改善方法ではあります。
コメントを残す