表示速度を高速化しよう！「Google PageSpeed Insights」の基礎と実践

Webサイトの高速な表示が求められる理由は大きく2つです。Webサイトの表示に時間がかかると離脱率が上がるという調査結果と、GoogleがWebサイトの表示速度を検索順位の決定要素として利用すると公表したためです。

Webサイトが遅いと離脱率が上がる話には、いくつかの調査結果があります。現代では多くのWebサイトでモバイルからのアクセスの方が多くなってます。低速なモバイル回線で表示に時間がかかるサイトは離脱されやすくなっています。

Googleの2017年の調査によると、モバイルサイトの読み込みに3秒以上かかると、53%のユーザーが離脱してしまいます。

この数字は有名ですが、Googleのレポート原典は以下のURLです。

Googleは2018年に検索アルゴリズム「Speed Update」をリリースし、表示速度が検索順位に影響することを明らかにしました。そのため、多くのサイト運営者がSEOの要素としてWebサイトの高速化を意識するようになっています。

多くのSEO関係者は、ドメインの強さやリンク、コンテンツの品質など従来から大事と言われてきた要素の方が検索順位の大きな決定要素とみなしています。

2018年の「Speed Update」のリリースでも大きな順位変動はなく、その後も表示速度で検索順位が左右されているとはっきり言えるような事例が少ないためです。

検索順位とは、複数のサイトの相対的な順位です。Webサイトの表示速度は、ドメインの強さやリンク、コンテンツの品質などメインの要素が同程度のサイトがあったとき、サブの要素として使われていると考えられています。

とはいえ、極端に遅いサイトでは減点要素になっていることは間違いなく、自社サイトがそういう状況になることは避けた方がよいでしょう。

「Google PageSpeed Insights」を使ってWebの高速化を行うとき、大事なのはゴールの設定です。モバイル55〜65点くらいあれば十分で、90点等の高得点は不要です。

「Google PageSpeed Insights」の総合評価は50点以上が合格点で、ある程度の規模の運用中のサイトでモバイル80点を超えるようなサイトはほぼありません。特に、ネットワーク広告が入っているようなサイトでは60点を超えていないサイトも多いでしょう。

なおモバイルとPCのうち、モバイル側を基準とするのは、モバイル回線でPCより低スペックな端末で閲覧するため、モバイルの評価の方が厳しいためです。

「Google PageSpeed Insights」では、100点満点の総合評価のほかに、ウェブに関する主な指標の内訳が示されます。

First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間です。

速度インデックスは、ページのコンテンツが取り込まれて表示される速さを表します。

最大コンテンツの描画は、最も大きなテキストまたは画像が描画されるまでにかかった時間です。

操作可能になるまでの時間とは、ページが完全に操作可能になるのに要する時間です。

タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間（ミリ秒）です。

Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標です。

これらの各指標について計測値が提示されるほか、​​赤▲＝​​0–49​​、オレンジ■＝50-89、青●＝90-100で同類のサイト間での偏差値的な採点が行われます。

一般に、ページの最終的な読込速度はSpeed Index​​で示されます。モバイルで10秒以上かかっていたら遅い部類で、8秒未満等を目指したい所です。

Total Blocking Timeで1000ミリ秒＝1秒以上かかっていたら、広告ネットワークやTweetの貼り付けコードなどが影響しています。その処理が終わらないとほかの描画処理が進まないので、500ミリ秒未満等に改善する必要があります。

サーバー遅延の警告が出てFirst Contentful Paint​​が遅い場合は、レンタルサーバーが古く、スペック不足かもしれません。Webサイトを改修するより、別の高速なレンタルサーバーに乗り換えたほうが、良い結果が出ることが多いでしょう。

サイトの担当者としてエンジニアに指示を出す場合、技術的な細かい部分まで把握している必要はありませんが、一般にどのようなスコア改善手法があるか、簡単に提示します。

一般にこれを入れると10点単位で「Google PageSpeed Insights」の評価が下がるという要素があります。しかし、AdSenseを外すわけにはいかないように、ある程度高速化した後は、この機能を外せば高速化できるけれども...というバーターが発生します。

・巨大な画像
・AdSense等のネットワーク広告
・スライドショー
・Twitter等SNSの埋め込み
・WebFonts

「Google PageSpeed Insights」のスコア改善は、レポートで示された指摘事項をそのまま改善していけばよいので、比較的やることが明確です。

画像の最適化でよくあるのは、表示速度より大幅に大きな解像度の画像が使われている例です。PCで1200pxのメインビジュアルを使っていたとして、スマホでは数分の一の横幅でよいはずです。この場合、別画像を用意することでファイルサイズを抑えられます。

また、背景透過等どうしても必要な場合を除き、png画像の使用は避けるべきです。pngをjpgにするだけでファイルサイズが半分以下になります。

そのほか画像やスクリプトの遅延読込、JSやCSSのファイル結合によるリクエスト数削減なども定番の手法で、WordPressなら高速化系のプラグインが各種出回っています。

Webの表示速度が検索順位にも影響するため、サイト運営の担当者が高速化を求められるシーンも増えてきました。しかし、極端に遅いWebサイト以外ではSEO的な影響度も小さいと考えられます。検索順位を上げるためというより、下げられないために行う施策と位置づけた方がよいでしょう。

Webサイトの表示速度の測定や改善にはGoogle公式提供のツール「Google PageSpeed Insights」が定番です。細かい数値指標を計測してくれる上、具体的な改善方法も提示してくれるため、指摘された箇所を提示された方法で改善していけばよく、やることが明確です。

スコア改善のゴールとしては、モバイルの計測結果で50点以上が目安になってきます。