ウェブサイトの表示速度は、ユーザビリティ・SEO的にも重要な要素です。
スマホで検索をしてたどり着いたページがずっと読み込みアイコンしか表示されなければすぐ離脱してしまいすよね。
Googleではサイトの表示速度計測ツールとして、PageSpeed Insightというツールを提供しています。手軽に自身のサイトをチェックできるツールなので、この記事を元に活用していただければと思います。
目次
PageSpeed Insightとは
PageSpeed Insightとは、モバイル・パソコン端末で表示された時の表示速度のパフォーマンスを計測できる無料ツールになります。
画面中央の検索窓に計測したいウェブサイトのアドレスを入力することで分析することができます。
PageSpeed Insightで分かること
当サイトでチェックをした画面になります。
大きく3つのブロックになっており、下記で各ブロックごとに説明します。
- スコア・・ウェブサイトの中で自身のウェブサイトがどれぐらいの速度が早いか
- ラボデータ・・ウェブサイトを表示させるために、何にどれぐらい時間がかかっているか
- 改善できる項目・・修正できる項目とそれによってどれぐらい速度が早くなるか
PageSpeed Insightで改善できる項目
改善できる項目については、PageSpeed Insightsのルールとして定義されている項目が表示されます。ここではどういう条件で何が表示されるのかを説明します。
リンク先でリダイレクトしない
リンク先から最終的なリンク先までに複数回にリダイレクト処理があるとPageSpeed Insightが検知するようです。
ちなみに理由としては、サーバーに対してリクエストとレスポンスが複数回行われるためできる限りリダイレクトの使用回数を最小限にすることをGoogleは推奨しています。
圧縮を有効にする
圧縮可能なリソース（テキスト、画像、フォントなど）が検知された際に表示されます。
ウェブサーバーで gzip 圧縮を有効にすることで解決します。
ブラウザのキャッシュを活用する
サーバーの応答時間が 200 ミリ秒以上であると検知されます。
サーバーの応答時間を改善する
サーバーからのレスポンスにキャッシュヘッダーが含まれていないこと、リソースが短時間のみキャッシュされるよう指定されている場合に検知されます。
サーバーからレスポンスを返す際は、Cache-ControlおよびETagヘッダーを返すことで解決します。またキャッシュ期間については、最短1週間で更新頻度があまりないものは最大で1年間とすることを推奨しています。
リソースを圧縮する
不要なデータや重複データ（コードのコメントや書式など）の削除、使用されていないコードの削除、短い変数名や関数名の使用といった処理を行うことを指します。
HTML、CSS、Javascript のリソースを圧縮します。
画像を最適化する
画像の品質を保ちながら、圧縮できる余地がある場合に検知されます。
ページが読み込まれる際に、画像ダウンロードにデータ量の大部分を占めることがあるため、画像はできる限り圧縮してサーバーにアップロードする必要があります。
GIFとPNG形式は可逆圧縮の形式であり、圧縮処理で画像が視覚的に変化することはありません。JPEGは非可逆圧縮の形式です。圧縮処理で画像の視覚的な細かさが失われますが、圧縮比はGIFやPNGよりも10倍高くなるというGoogleの見解です。
CSSの配信を最適化する
ページが読み込まれる前にCSSを適応するための、外部スタイルシートが読み込まれるため最初の読み込みの際にレンダリング時間を遅らせている場合に検知します。
解決方法としては、CSSの記述が少ない場合は、HTML内に記述して読み込みを減らします。
スクロールせずに見える範囲のコンテンツのサイズを削減する
ページをスクロールせずに見える範囲のコンテンツを表示させるための読み込みがある場合に検知します。
スクロールせずに見えるページ範囲のコンテンツの表示に必要なデータ（HTML マークアップ、画像、CSS、JavaScript）のサイズを制限します。
レンダリングを妨げるJavaScripを削除する
ページをスクロールせずに見える範囲にレンダリングをブロックする外部JavaScriptがある場合に検知します。
ページを読み込む際に、可能な限り最小限のJavaScriptの読み込みにするといった対策になります。