PageSpeed の「ウェブフォント読み込み中のテキストの表示」対策で速度改善

PageSpeed Insights の表示で、「ウェブフォント読み込み中のテキストの表示」をせよと指示されるケースの対策です。

ウェブフォントのロード原因で、ページ表示の遅延になっているという指摘です。近年では、fontawesome や googlefont など woff2 フォントが原因でこの指摘が出てしまうケースが多いのではないでしょうか。

改善対策

対策としては、遅延の原因はウェブフォントですから、CSS の @font-face を指定してフォントを遅延読み込みさせます。

CSS で @font-display を swap 指定にする

CSS を編集して @font-face に swap を設定します。

ただ、今回指摘された箇所は WordPress プラグイン内の CSS でした。ですので、 WordPress プラグインの CSS に対して直接 @font-face を指定しました。

まずはプラグインの該当 CSS を見てみます。

@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-style:normal}

実際にこちらがロードされているコードです。フォントが複数指定されています。

@fon-face に font-display の swap を追加します。

@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-display: swap;font-style:normal}

プラグイン の CSS を上書きして swap を追加しました。

swap 設定前の点数

swap の設定前はデスクトップ版で、91点でした。

swap 設定後の点数

デスクトップ版の swap ありの点数です。

僅かですが PageSpeed の点数が改善しました。
ウェブフォント読み込み中のテキストの表示」の表示が消えました。

CSS の swap 読み込みは、「過大なネットワーク ペイロードの回避」対策 でも効果のある有効の方法です。

対応するべきポイントですね。

参考

Ensure text remains visible during webfont load