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

Posted on by pugiemonn

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

原因

この表示される理由は、ウェブフォントのロードによりページ表示の遅延になっているためです。

近年では、fontawesome や googlefont など woff2 フォントが原因となり、この指摘が出てしまうケースが多いのではないでしょうか。

改善対策

ウェブフォントが原因の遅延対策としては、二つご紹介します。

  • CSS でフォントを遅延ロードする
  • ウェブフォント読み込みを削除する

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 の点数が改善しました。
「ウェブフォント読み込み中のテキストの表示」の表示が消えました。

ウェブフォント読み込みを削除して速度改善

ウェブフォントをそもそも消してしまうというのもありです。
あまり環境に左右されずに対応できます。

<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">

例えばこういうフォントの読み込み表示を丸ごと削除します。

ウェブフォント削除前の点数

ウェブフォント削除後の点数

削除後のモバイルの点数は+3点となりました。

モバイルでの点数改善は大きいですね。
デザインに左右されないフェーズでしたら、思い切って削除もありというスタンスです。

「ウェブフォント読み込み中のテキストの表示」対策まとめ

「ウェブフォント読み込み中のテキストの表示」に対する対策として二つの対策をご紹介しました。

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

また、ウェブフォントの使い所にもよりますが、削除するのも高速化の選択肢として有力だと考えています。ゴールやフェーズに合わせて意思決定をしていきたいです。

PageSpeed で「ウェブフォント読み込み中のテキストの表示」が指摘された際には点数改善が期待できますので対応するべきポイントでしょう。

参考

Ensure text remains visible during webfont load