SWELL高速化：フォント表示

WordPress + SWELL環境下でのPageSpeed Insights等で表示されるエラーメッセージ、「フォント表示」「テキストの表示を統一するため、font-displayをswapまたはoptionalに設定することを検討してください。」解決についての備忘録です。

フォント表示

PageSpeed Insightsでウェブサイトをチェックすると以下のような警告文が出ることがあります。

今回は私の環境(WordPress + SWELL)でのこのメッセージの解決法についての覚え書きです。

何が原因？

SWELLの場合は「icomoon」というwebフォントが初期状態でロードされるようになっており、この読み込みのために発生している警告文のようです。

webフォントって何？

webフォントはユーザーの端末にインストールされていないフォントをWeb経由で読み込み、表示する技術です。

端的に言うとこういうのです：

[icon icon-thumb_up]

SWELLの場合は本文中にこういったショートコードを入力すると表示できます。

せっかく用意してくれているのでこの機会に活用していきましょう。

「テキストの表示を統一するため、font-display を swap または optional に設定することを検討してください。」の解決方法

SWELLの場合、上記のwebフォントの影響でこの問題が発生しています。

解決するには、警告文に表示されている通り「font-display を swap または optional に設定」、つまり、

• swap：「最初は代替フォントですぐ表示 → Webフォント読み込み後すぐに切り替え」
• optimal：「モバイルなどでフォント読み込みをスキップするように」

設定する事を示唆しています。

なお、CLSが悪化する可能性があるので取捨選択ではあります。

font-display を swap または optional に設定する方法

SWELLの場合、「外観 -> テーマファイルエディター -> SWELL -> build -> css -> swell-icons.css」に＠font-faceの設定があります。

ここの一行目に「font-display:swap;」または「font-display:optimal;」を追記することになります。

ただし、親テーマの書き換えはあまり推奨されない(テーマのアップデートで上書きされてしまう)ので一時的な解決策です。

子テーマの書き換えでは上手く行きませんでした。

公式側では意図した挙動

なお、テーマ側でのデフォルトswap非指定については公式的には意図したもののようです。

アイコンの表示が□になって一瞬ちらついてしまうのを防ぐために、swapはテーマ側では指定していません。

開発者による回答(会員サイトでのフォーラムより)