Google Search Console から、Webページの表示速度を計測する「PageSpeed Insights」を実行してみたところ、いくつかの改善できる項目が表示された。

診断結果に、パフォーマンススコアには影響しないと表示されていたが、「ウェブフォント読み込み中のテキストの表示」という内容が気になったので、改善に取り組んでみた。

ウェブフォント読み込み中のテキストの表示について

PageSpeed Insights の診断結果に表示される「ウェブフォント読み込み中のテキストの表示」をクリックすると、次のように概要が記載されている。

フォント表示の CSS 機能を使用して、Web フォントの読み込み中にユーザーがテキストを読めるようにしてください。

https://developers.google.com/speed/pagespeed/insights/

Webフォントというのは、サーバーにあるフォントデータを読み込んでテキストを表示する仕組みになっている。通常であれば、Webページを閲覧する端末にインストールされているフォントデータでテキストが表示されるため、端末に依存したテキスト表示になってしまうが、Webフォントを使用することによって、Webページ制作側が意図したデザインのフォントを表示することができるというメリットがある。

ただし、フォントデータは多くの情報を保有しているためサイズが大きく、サーバーからデータを読み込むのに時間がかかってしまうというデメリットもある。これによって、フォントデータの読み込みが完了するまでテキストが表示されないという仕組みであるために、Webページの表示速度の遅延に影響するというのが問題になる。

PageSpeed Insights の診断結果が提案している「ウェブフォント読み込み中のテキストの表示」という内容は、Webフォントのフォントデータの読み込みが完了するまで、代わりのフォントでテキストを表示することによって、表示速度を改善することができるということ。

Webフォントが使えるようになった頃から懸念されていた、Webフォントのデータサイズが大きいためにページの読み込み速度が遅くなるという問題は、回線速度やフォントデータの仕組みなど技術の向上によって改善されたかのように思えたけど、さらに改善の余地があるから実施しましょうというわけだ。

ウェブフォント読み込み中のテキストの表示を改善する方法

Webフォントの読み込みが完了するまで、代わりのフォントでテキストを表示させるためには、CSSでWebフォントを指定している「@font-face」に「font-display:swap;」を追加する。

font-displayプロパティは、フォントデータの読み込みに関する代替フォントによるテキスト表示の挙動を指定するために用いる。プロパティの詳細については省略する。

@font-face {
	font-family: 'ExampleFont';
	font-style: normal;
	font-weight: 400;
	src: url(https://example.com/font/examplefont.woff) format('woff');
	font-display: swap;
}