Google Material Iconsは表示スピードが早くなる？利点と欠点！Font Awesomeから卒業！
使用しているブログのテーマ「Luxeritas」で「Google Material Icons」を採用。
Font AwesomeからGoogle Material Iconsに全移行してみました。
Luxeritasを使用していなくてもGoogle Material Iconsは使えますが、
Luxeritasの場合、アイコンのコードさえ記入すれば即使えます。
Google Material Iconsに移行した理由なども記載しておきます。
Google Material Icons
Google Material IconsはFont Awesomeに似たwebアイコンです。
Googleが提供しているアイコンになります。
Font Awesomeに比べるとアイコンの数は少ない。
特にSNSなどのアイコンや企業のアイコンは扱っていません。
ここからは以下の表記にします。
Font Awesomeをフォントオーサム。
マテリアルアイコンにした理由
フォントオーサムの使用をやめマテリアルアイコンにしたのは…
使用テーマであるLuxeritasがマテリアルアイコンを採用した為。
マテリアルアイコンのみを使用する事で記事の表示スピードが上がる。
どの程度記事の表示スピードが上がるかは疑問ですが、スピードが向上するなら採用したい。
フォントオーサムの使用が多い写真を楽しむブログで使用を試みました。
マテリアルアイコンの使用方法
Luxeritasを使用している場合は、チェックひとつで完了します。
今回からフォントオーサムを使用しない為、マテリアルアイコンのみを選択します。
記事に挿入されたフォントオーサムのCSS等を変更した後最終的にチェックを入れます。
マテリアルアイコンを採用していないテーマでもコーの挿入で利用できます。
まずマテリアルアイコンのサイトにアクセスします。
https://fonts.google.com/icons下記をhtmlファイルのheadタグ内記述する事で使用可能になります。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 各アイコンを記事内で使用する場合 検索のアイコンを使用したい場合「 」をクリックします。
使用したいアイコンを選択する事でコードがハイライトされます。
<span class="material-icons-outlined"> search </span>
マテリアルアイコンへの変更作業
全てのアイコンをフォントオーサムからマテリアルアイコンに入れ替えるのは時間も掛かります。
フォントオーサムのコードをSearch Regexを使って検索します。
運営ブログの記事は600以上あり、その全てにフォントオーサムが使用されています。
まずは手っ取り早く変更できるCSSの記述から変更します。 
CSSで修正するものは簡単ですが、各記事への直接記述分は1件1件Search Regexで作業します。
もしSearch Regexが無かったら大変な事になっています。
ブログには下の画像のように各所にアイコンが使われています。
マテリアルアイコンに変更済みの画像です。
変更の作業を行う為に準備が必要です。
Search RegexはWordPress5.8以降から使用できません。
一旦バージョンダウンしてからSearch Regexを使用します。
マテリアルアイコンの利点と欠点
マテリアルアイコンとフォントオーサムを比べると様々な違いがあります。
総合的に考えるとフォントーサムの方が使い勝手が良い。
ただ、やはりフォントオーサムを多用していると表示スピードが遅く感じます。
ほんの少しの差でしかありませんが…
マテリアルアイコンの利点
マテリアルアイコンの欠点
ブラウザーがあるアイコンのネームがスニペットに表示される
総合的な感想
マテリアルアイコンとフォントオーサムを比較するとフォントオーサムの方が良い。
全てのアイコンをマテリアルアイコンにして約1ヶ月が経ちました。
記事の表示スピードは数値的に上がりました。
ただ、表示スピードが格段に上がったのは別の方法によるものです。
フォントオーサムを必要としている記事は、記事毎に追加ヘッダーにフォントオーサムを呼び込むコードを記述します。
マテリアルアイコンまとめ
結局どうなのか？と言うとどちらでも良い事で片付きました。
マテリアルアイコンの種類がもう少し有るとありがたい。