PageSpeed Insightsについて、ツールの概要、指標の見方、このサイトを計測した結果、指摘された改善点、実際に行った修正、などについてまとめました。
PageSpeed Insightsとは？
URLを入力するだけで、Webページの表示速度とパフォーマンスを0〜100で採点してくれるGoogleの無料ツールです。
- パフォーマンス・ユーザー補助・おすすめの方法・SEOの4つをスコアで表示
- 表示速度は、Core Web Vitals（コア ウェブ バイタル＝Googleがページの体験を測る中心の指標）で評価する
- 「ラボデータ（試験環境での推定値）」と「フィールドデータ（実際の利用者の計測値）」の2種類ある
- パフォーマンスのスコアはあくまで推定値、Googleが実際の評価に使うデータは、利用者の実測の方
主な指標
| 指標 | 内容 |
|---|---|
| LCP（Largest Contentful Paint） | 主要なコンテンツが表示されるまでの時間。2.5秒以内が目安 |
| FCP（First Contentful Paint） | 最初のコンテンツが表示されるまでの時間 |
| CLS（Cumulative Layout Shift） | 表示中に起きるレイアウトのずれの量。0に近いほど良い |
| TBT（Total Blocking Time） | 操作の受け付けをブロックする合計時間 |
計測結果と指摘内容
このサイト（まなびのすけ）のトップページを計測したところ、以下のような結果が出ました。
- パフォーマンスは、デスクトップ66点・モバイル57点
- フィールドデータは「データがありません」＝今回の数字はすべてラボの推定値
指摘内容（ざっくり）
- 日本語フォント（M PLUS Rounded 1c）の読み込みによるレンダリングブロック（最大の指摘）
- 静的ファイルのキャッシュが短く、再訪した利用者が無駄に再取得している
- JavaScriptがレイアウト計算を繰り返している（ただし軽微）
- 第三者Cookie＝Google広告（AdSense）を読み込んでいる
- 表示速度は、デスクトップは1.2秒前後と良好だが、モバイルは遅い（LCPが8.6秒・FCPが7.2秒）
フォントの読み込みとキャッシュ化を対応してみます。
パフォーマンス改善のためにやったこと
修正1）フォントを非同期で読み込む
- フォントCSSの読み込み方法を、描画を止めない方法に変更
- 取得が終わるまで、代わりのフォント（端末に入っている丸ゴシック系）で先に表示される
display=swapにより、フォントが読み込まれたら自動で入れ替わる（変更時に一瞬だけ字体が変わるが、同じゴシック体のためチラつきは軽微と判断）
修正前
<link rel="stylesheet" href="...css2?family=M+PLUS+Rounded+1c...">
修正後
<link rel="stylesheet" href="...css2?family=M+PLUS+Rounded+1c..." media="print" onload="this.media='all'">
修正2）静的ファイルのキャッシュ期間を延ばす
- サーバーの
.htaccessでCache-Controlを設定し、ファイル名にハッシュが付いた生成物は1年間キャッシュするように変更 - ファイルの内容が変わると、ファイル名のハッシュは変更されるため、古いキャッシュが誤って使われる心配はないと判断
修正後の計測結果
上記修正を反映し、PageSpeed Insightsで再計測した結果は以下です。
- デスクトップは、パフォーマンス66点→86点に改善
- モバイルは、パフォーマンス57点→58点に微増
デスクトップは改善しましたが、モバイルの方はボトルネックがLCPっぽいので、次はファーストビューまわりを見直す予定です。
よくある質問（FAQ）
Q. PageSpeed Insightsのスコアは何点あればいいですか？
目安は90点以上（緑）です。パフォーマンスの点数はラボの推定値で、Googleが実際に評価するデータは、利用者の実測（Core Web Vitals）です。点数だけを目的にせず、LCP2.5秒以内・CLS0.1以内などの指標目的にする方が良いです。
Q. フィールドデータが「ありません」と出るのはなぜですか？
そのURLに、実際の利用者の計測がまだ十分に集まっていないためです。フィールドデータはChromeの利用データを28日分あつめて作られるため、アクセスが少ないサイトや公開直後は表示されません。アクセスが増えると、少しずつ表示されるようになります。