FontAwesomeが重いメモ

⇒【sango】FontAwesomeのcssを軽量化！| コアウェブバイタル対策

表示速度を測ると「レンダリングを妨げるリソースの除外」が表示される

…css/all.css(use.fontawesome.com)　転送サイズ：13.0 KiB、減らせるデータ量：930 ms

CDN経由でFontAwesomeを使うため遅延化している

ローカル化

①【CSS】Font Awesomeをできるだけ軽量化して読み込む方法【アイコンフォント】

⇒SCSSファイル？

④Font Awesomeの使い方【ダウンロードして低速を爆速に】

⑤【sango】FontAwesomeのcssを軽量化！| コアウェブバイタル対策

⇒エラーになった

【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法←この記事で解決！

余談ではありますが、当サイトのようにSANGOをテーマとして使われている方は、sango-theme/library/functions/sng-style-scripts.phpを以下のように修正してあげても読み込むことができます。

WordPressサイトの高速化ができたので実施した9個の対策をメモ

Font Awesomeを ローカル使用に変更する

FontAwesomeをローカルで読み込む方法を紹介

HTMLに直接SVGを埋め込む

②FontAwesomeを使うのを止めた理由

1ページ内にアイコンの数が20個以上あると、icomoonを使ったSVGスプライトを使う方がデータ量が少なくすむ

IcoMoon

③Font AwesomeをIcoMoonで軽量化する

⇒IcoMoonのアイコンライブラリはライセンスに注意？

⑩webアイコンは便利だけど、重い

IcoMoonを使ってFont Awesomeのアイコンを必要なものだけ使う方法

解決！！

SANGOのカスタマイズ⇒詳細設定⇒FontAwesomeの読み込み方法を「子テーマの/library/css/fa-sango.cssを読み込む。」に設定で解決するかと思いきや、なぜか子テーマファイルを読み込むもアイコンが表示されず。

「すべて」を選択し上記のローカル化のやり方を実践。「sango-theme/library/functions/sng-style-scripts.php」のファイルを「return ‘/wp-content/themes/sango-theme-child/css/all.min.css’;」に書きなおすことで子テーマのファイルを読み込みローカル化が達成！！！

return '/wp-content/themes/sango-theme-child/css/all.min.css';←'が大文字になるとエラーになりサイトがホワイトアウトするので注意

【参考】

【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法

ここまで改善した！！