ワードプレス

ウェブフォント読み込み中のテキストの表示を改善!FontAwesomeからJINオリジナルアイコンで一発解決

GoogleのPageSpeed Insightsの「ウェブフォント読み込み中のテキストの表示」診断で指摘されていた「Font Awesome」の問題を簡単に解決できたので、その時の経験をまとめています。

結論から言うと、ブログのアイコンを「Font Awesome」から使っているテーマJINのオリジナルアイコンに変更しただけです。

それだけで、PageSpeed Insightsのスマホスコアが、52から79に改善することができました。

パソコンスコアは、元々、93と高かったのですが、変更後は99と更に改善されていました。

ワードプレスのテーマにJINを使っているのなら、オリジナルアイコンを利用しないと損ですね!

Font Awesomeを使うメリットとデメリット

ブログのメニューなど、Webサイトにアイコンフォントを簡単に設定できるのが「Font Awesome」です。

スマホの固定フッターメニューに使っていたのですが、こういうのです。

アイコンフォントがあった方が、文字だけよりも目を惹きますよね。

でもそんなメリットの一方で、ブログの読み込みが遅くなるとういうデメリットがありました。

FontAwesomeは、外部から読み込むデータ量が多いため、ブログの表示速度が遅くなるデメリットがあるんです。

GoogleのPageSpeed Insigntsで読み込み時間をチェックしてみたら、FontAwesomeを設定しているスマホのスコアがなんと、52だったんです。

PageSpeed Insightsの結果ページには改善方法がいくつか書かれていますが、正直なところ、専門的過ぎて、具体的にはどうしたらいいのか分かりませんでした。

変なことをして、ワードプレスが真っ白になるのは避けたいし。

でも、「ウェブフォント読み込み中のテキストの表示」の『Font Awesome』なら、この方法で簡単に解決できたんです。

JINオリジナルアイコンを使うメリットx2

この解決方法はワードプレスのテーマにJINを使っている人限定になります。

でも、JINを使っている人でも、オリジナルのアイコンについては知らない人も多いのではないでしょうか。

私がそうでした。

JINのオリジナルアイコンは、2019年3月28日のアップデートで58種類が実装され、11月には94種類に増えています。

「JIN」のアップデート情報を確認する

「JIN」のオリジナルアイコンリストを見に行く

こんな便利な機能が実装されていたなんて、最近まで知りませんでした。

こちらがJINオリジナルアイコンに変更後のスマホ固定フッターメニューです。

変更後のスコアが、ドンッ!!

スマホが、52→79

パソコンが、93→99

に改善です。

行ったのは次の2つです。

1.FontAwesomeのアイコンをJINオリジナルアイコンに変更

2.fontawesomeを読み込まない にチェック

Font AwesomeからJINオリジナルアイコンに変更する手順

やることは2つだけです。

1.FontAwesomeをJINオリジナルアイコンに変更する

外観 > メニューにて、変更したいメニューを選択し、メニュー構造の説明欄を、FontAwesomeのコードからJINオリジナルアイコンのコードに変更します。

使用していたFontAwesomeをすべてJINオリジナルアイコンに変更したら、FontAwesomeからの読み込みを遮断します。

2.fontawesomeを読み込まない、にチェック

こちらも、JINのVer2.0アップデート時に実装された機能です。

ワードプレスのメニュー、カスタマイズ > その他設定から、

「fontawesomeを読み込まない」にチェックを入れます。

これで外部からのFontAwesomeの読み込みを遮断することができました。

変更が完了したら、あなたのサイトもPageSpeed Insightで再チェックしてみてください!

改善された数字を見るのって気持ちがいいですよ!