WordPressサイトの読み込みを調べていたら、Font AwesomeのCSSとフォントだけで約210 KBありました。しかも一番多い用途は、VK Blocksで作った箇条書きの先頭に出る丸い矢印です。ただし、見えている1種類だけを根拠に止めると過去記事が崩れます。そこで全1,295記事を調べ、必要なアイコンだけをSVGへ置き換えました。
Font Awesomeだけで210,021バイト読み込んでいた
対象になったのは次の2ファイルです。
| ファイル | サイズ |
|---|---|
all.min.css | 90,533 B |
fa-solid-900.woff2 | 119,488 B |
| 合計 | 210,021 B |
all.min.css には大量のアイコン定義が入り、fa-solid-900.woff2 にはSolid書体のグリフがまとめて入っています。
woff2は内部ですでに圧縮された形式なので、サーバー側でgzipを有効にしてもほとんど小さくなりません。今回の環境では、読み込みを止めない限り119,488 Bが残ります。
しかし、だからといってFont Awesomeを先に止めるのは危険です。どこか1記事でもアイコンフォントに依存していれば、そこだけ「□」のような豆腐表示になる可能性があります。
まず全1,295記事とページ種別を調べた
最初に、サイトで読み込まれているCSSからFont Awesomeを指定するセレクタを抽出しました。ここで注意が必要だったのは、Font Awesome 7では font-family の文字列だけでなく、font: var(--fa-font-solid) のような指定も使われることです。単純に「Font Awesome」という文字だけを探すと漏れます。
次に、トップページ、カテゴリー、タグ、著者、検索結果、日付アーカイブ、固定ページ、404など78ページを確認しました。投稿本文はWordPress REST APIで全1,295記事を取得し、class属性を調べています。1記事ずつアクセスすると負荷が大きいため、100件単位の13リクエストにまとめました。
見つかった用途は次の4種類です。
| 用途 | 使用箇所 |
|---|---|
| リストの丸矢印 | 166箇所・67記事 |
| リストの三角 | 7箇所・4記事 |
| リストのチェック | 1箇所・1記事 |
| アラートの警告アイコン | 1箇所・1記事 |
Font Awesomeが必要だった投稿は67本で、全1,295記事の5.2%でした。サイドバー、フッター、CTA、各種アーカイブでは使っていませんでした。
最初の30記事だけを調べた段階では、警告アイコンは見つかっていません。全件走査をしたから拾えた1件です。「見つからなかった」を信じる前に、既知の使用例が検出器にきちんと引っかかるかも確認しました。
必要なアイコンだけSVGマスクに置き換えた
今回はFont Awesome公式のSVGパスをCSSのdata URIに入れ、mask と currentColor で表示しました。background-image ではなくマスクにしたのは、アイコンの色を周囲の文字色へ自然に追随させるためです。
基本部分は次のようになります。
.wp-block-list.is-style-vk-arrow-mark li::before {
content: "";
display: block;
position: absolute;
left: -1.5em;
top: 0;
width: 1em;
height: 1.65rem;
background-color: currentColor;
-webkit-mask-image: var(--veu-icon);
mask-image: var(--veu-icon);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: auto 1em;
mask-size: auto 1em;
}
.wp-block-list.is-style-vk-arrow-mark li::before {
--veu-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z'/></svg>");
}mask-size を 1em 1em ではなく auto 1em にしているのは、三角やバツなど、縦横比が違うアイコンを正方形へ押し込まないためです。
また、SVGのdata URIはカスタムプロパティ --veu-icon に1回だけ入れました。-webkit-mask-image と mask-image の両方へ長い文字列を直接書くと、同じデータを二重に持つことになるからです。
実際に使っていた4種類に加え、VK Blocksで今後選びそうな7種類も保険として入れています。必要なSVGを数百バイトずつ足すほうが、アイコン書体一式を常時読み込むより小さく済みます。
フロント画面だけFont Awesomeを止める
SVGの置き換えを用意してから、子テーマの functions.php でFont AwesomeのCSSを停止しました。
add_action( 'wp_enqueue_scripts', 'mackers_dequeue_font_awesome', 20 );
function mackers_dequeue_font_awesome() {
wp_dequeue_style( 'vk-font-awesome' );
}優先度を20にしているのは、対象のスタイルが登録された後に停止するためです。
管理画面では止めていません。フロント画面だけを対象にすれば、ブロックエディタのスタイル選択では従来どおりアイコンを確認できます。
実測で201,360バイト減った
変更後、Font AwesomeのCSSとwoff2は読み込まれなくなりました。
| 項目 | 削減量 |
|---|---|
| Font Awesome CSS | −90,533 B |
| 置き換え用に増えた子テーマCSS | ＋8,661 B |
| CSS差し引き | −81,872 B |
| woff2フォント | −119,488 B |
| 合計 | −201,360 B |
CSSの削減量は、事前計算の 90,533 − 8,661 = 81,872 B と実測が1バイト単位で一致しました。丸矢印、三角、チェックを含む記事と、親子で違う記号を使う入れ子リストも確認し、サイズと色が従来どおりであることを確かめています。
先に止めず、使っているものを数える
今回いちばん大事だったのは、Font AwesomeをSVGへ変えたことより、止める前に全件を調べたことでした。
テーマやプラグインのCSSは、使っていない機能までまとめて読み込むことがあります。ただし「たぶん使っていない」で外すと、何年も前の記事だけが壊れることがあります。長く運営しているサイトほど、トップページの見た目だけで判断しないほうが安全です。
僕の環境では約210 KBの一式を、実際に必要なSVGへ置き換えられました。ただし、使っているアイコン、CSSハンドル、クラス名はサイトごとに違います。コードをそのまま貼るのではなく、自分のサイトの使用状況を調べてから置き換えるのが前提です。
参考リンク
