Page Speed Insights（ページスピードインサイト）改善方法とは？

ページの読み込み速度は検索順位に影響を与える重要な要素になりつつあります。しかし、読み込みを早くするにはどのような方法があるのでしょうか。

この記事では、Google社が提供しているウェブツールGoogle PageSpeed Insightsと、ページの読み込み速度を改善する方法についてまとめます。Google PageSpeed Insightsを使用して順位が改善した例もありますので、この機会に使い始めてみましょう。

Page Speed Insights とは

「Google PageSpeed Insights（ページスピードインサイト）」は、Google社が提供するウェブツールです。URLを入力するだけでウェブサイトのページ読み込み速度をスコア化してくれます（PCはもちろん、モバイルサイトの表示速度の確認も可能）。また、表示速度を低下させている原因を分析し、改善するためのアドバイスを受けられる点も特徴です。

ページスピードの重要性

GoogleのJohn Mueller氏は、2018年のライブ配信にて「Googleのクローラーは1000ms（1秒）以上掛かるとクローリングに制限が掛かる」という旨の発言をしています。

このようにページの読み込み速度は検索順位に影響を与える重要な要素になりつつあります。あまりにページ表示の遅いサイトに関しては、クローラーに影響が出てインデックスされにくい可能性もあります。

推奨される速度は、PageSpeed Insightsの表示スコアで、パソコンサイトであれば60点以上、モバイルサイトでは40点台といわれています。（※スコアは海外で測定されるため、日本のサイトはスコアが低くなりがちであるため注意が必要です。）

Page Speed Insightsで確認できる項目

ここでは、PageSpeed Insightsで確認できる、具体的な項目を紹介します。

フィールドデータ

「フィールドデータ」とは、ユーザーから実際に収集したデータのことです。Googleでは、このデータをもとにして、表示速度の判定を行います。このデータを参考に、ユーザーがよくアクセスするページの読み込み速度を早くすれば、スコアの改善にも繋がるため、参考にすることを推奨します。

ラボデータ

「ラボデータ」とは、特定の環境下で測定されたデータのことで、ツールを利用した際のネットワーク環境などに基づいて、評価をスコア化して表示してくれます。ラボデータのスコアをもとに表示速度の改善に取り組む人もいるかもしれませんが、ラボデータの修正はフィールドデータに即座に影響するわけではないため注意が必要です。

改善できる項目

「改善できる項目」とは、表示速度を早くするためにGoogleが提案してくれる改善点のことです。項目には改善によってどのくらいの時間短縮ができるのか記載されているため、改善を行うかどうかを判断する際にも役に立ちます。

診断

「診断」は、ウェブ開発で推奨される設定になっているかを診断する項目で、診断結果だけでなく、改善に関する詳細な情報も確認可能です。改善できる項目同様、改善案は色分けされて表記されるため、優先順位がつけやすいです。

合格した監査

「合格した監査」には、ページが合格した監査項目が表示されます。また改善が不要な項目の確認も可能です。表示速度を改善するために、何をするべきなのか明確にしたいときなどは、こちらの合格した監査をチェックすることを推奨します。

Page Speed Insights の改善方法

Page Speed Insights のスコアを改善する方法には以下のようなものがあります。

画像の圧縮

サイズの大きい画像、高画質の画像はデータ量が多くなり、表示速度にも影響します。画像の最適化には、画質は落とさず無駄なデータを省く「ロスレス圧縮」という圧縮方法が推奨されます。

以下のようなサードパーティツールを用いることで無料かつ効率的に圧縮が可能です。

• TinyPNG：PNG、JPEGに対応
• Optimizilla：JPEG、PNGに対応
• Compressor.io：JPG、PNG、GIF、SVGに対応

画像のオフスクリーン（遅延読み込み）

画像読み込みの改善を行いたい場合は、オフスクリーン（遅延読み込み）を設定します。設定にはjQueryライブラリを使用するのが簡単です。

はじめにjquery.lazyload.jsをダウンロードします。

次にjQuery とlazyloadを読み込むために、bodyタグ内にscriptタグを配置します。

$(function () {
  $(‘img.lazyload’).lazyload()
})

Scriptタグの配置をしたら、Imgタグを下記のように書き換えます。

<img class=”lazyload” data-src=”img/○○.jpg” />

動画の圧縮

MP4形式の代わりに、WebM形式を使うとファイルサイズを削減できます。WebM形式はIEを除くほとんどのブラウザが対応しています。（参考：WebM video format | Can I use… Support tables for HTML5, CSS3, etc）

WebM形式への変換は、Convertioが便利です。

HTMLでは、sourceタグでWebM形式とMP4形式の2つの動画ファイルを指定します。

例：

<video autoplay loop muted playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
</video>

テキスト圧縮

テキストベースのリソースを圧縮して配信することで、ネットワークの全体的な通信量を最小限に抑えることができます。圧縮方法にはgzip、deflate、brotliがあり、Googleの推奨はbrotliです（圧縮率が高いため）

テキスト圧縮はテキストの多いサイトには有効ですが、クライアント（ブラウザ）とサーバー双方に、一定の負荷が生じるというデメリットもあります（ほとんどの場合、負荷は僅かなので、メリットの方が上回ります）。

テキスト圧縮の実装方法はサーバーの種類によって異なります。

Nginxの場合 • Brotliで圧縮する場合は、libbrotil, ngx_brotliをインストールして、nginx.confに設定を追加します。

例：

server { listen 8080; root html; brotli on; }

CSSの最適化

CSSを最適化することでもページスピードの改善が可能です。具体的には以下のような方法があります。

JavaScriptの最適化

JavaScriptは便利なライブラリがたくさんあり、CSSよりもライブラリに頼ることが多いです。しかし、ライブラリは便利な反面、容量が大きいので、上手く使わないとファイルサイズが肥大してしまいます。jQueryライブラリが良い例で、たった数行のコードを記述するだけでも、ライブラリ全体を読み込まないといけません。

ファイルを解析して不要なコードを削ぎ落としてくれるWebpackのTree Shakingのような機能を使うことがモダンなやり方ですが、軽量なライブラリを使うことが基本的な対策です。

まとめ

検索順位を上げるためにも、ユーザーの離脱率や直帰率の上昇を避けるためにも、PageSpeed Insightsを積極的に活用しましょう。