ウェブサイトの高速表示が求められる時代に、便利なツールがあります。
それが、Google PageSpeed Insightsです。
「サイトが完成した！バリデーションも問題なし！リリースするぞ！」と思っているかもしれませんが、表示スピードは確認しましたか？Google PageSpeed Insightsを使えば、簡単に確認することができます。
この記事では、Google PageSpeed Insightsを使ったサイト最適化についてご紹介します。
Google PageSpeed Insightsとは
Google PageSpeed Insightsとは、Googleが提供するウェブサイトのパフォーマンス評価ツールです。
URLを入力することで、そのサイトの表示速度とユーザー体験を評価し、改善点を提案してくれます。
Googleの検索ランキングにも影響することから、SEO対策にも重要なツールとなっています。
Google PageSpeed Insightsの使い方
Google PageSpeed Insightsを使う方法は非常に簡単です。
- Google PageSpeed Insightsのウェブサイトにアクセスする
- WebページのURLを入力する
URLを入力するとWebページの読み込み時間、スピードスコア、レンダリング時間、ページサイズ、画像圧縮率などの情報をが表示されます。
測定結果の見方
Largest Contentful Paint (LCP)
LCPは、Webページの最大コンテンツ描画時間を測定するもので、具体的には、画面上に表示される最大の要素（画像、テキストブロック、ビデオなど）の読み込み時間を計測します。
LCPが遅いと、ユーザーがWebページの全体像を理解するまでに時間がかかり、その間にユーザーがサイトを離れてしまう可能性があります。LCPを速くすることは、ユーザーの滞在時間を増やし、コンバージョン率を向上させるために重要です。
LCPの目標値は2.5秒以内ですが、できるだけ早く表示することが望ましいです。
First Input Delay（FID）
FIDは、ユーザーがWebページ上での操作に対してどれだけスムーズかつ快適にアクションを起こせるかを評価する指標です。
遅延が発生すると、ユーザーはWebサイトが反応していないか、動作が重いと感じることがあります。
そのため、FIDは、ユーザーエクスペリエンスの改善に直結する重要な指標となっています。
FIDの測定は、ユーザーが操作を始めてから、ブラウザが実際にその操作に応答するまでの時間を測定します。
測定方法は、JavaScriptのイベントリスナーを使用して、ユーザーが操作した時点から、ブラウザが応答するまでの時間を計測することが一般的です。
Cumulative Layout Shift (CLS)
ページの読み込み中に、コンテンツの配置が予測できない意図しないシフトが発生する量を評価する指標です
このシフトによって、ユーザーが意図せずに間違ったリンクをクリックしたり、不適切な操作を行ったりする可能性があります。
CLS のスコアは、0 から 1 の範囲で評価され、0 に近いほど、ユーザーにとって良い体験であることを示します。
一方で、1 に近いほど、ユーザーが不快な体験をする可能性が高くなります。
First Contentful Paint (FCP)
ウェブページが読み込まれてから最初のコンテンツが画面に表示されるまでの時間を指します。
この時間が短ければ短いほど、ユーザーはページが読み込まれていることを実感し、ストレスを感じずにページを閲覧できるようになります。
Interaction to Next Paint（INP）
ユーザーの最初のインタラクションから、次のコンテンツが表示されるまでの時間を測定する指標です。
INPは、ユーザーがクリックしたり、スクロールしたり、フォームに入力したりするなどのアクションに応じてページが更新される場合に影響します。
INPが長い場合、ユーザーがページを操作してからコンテンツが表示されるまでの時間が長くなり、ユーザー体験が低下する可能性があります。
Time To First Byte（TTFB）
Webページを表示する際にサーバーから最初のバイトがブラウザに送信されるまでの時間を指します。
TTFBはWebサイトのレスポンス速度に影響する重要な要素の1つであり、TTFBが短いほど、ページの表示速度は速くなります。
測定結果から改善する方法
画像の最適化する
画像はウェブサイトの表示速度に大きく影響します。
なぜなら画像が大きすぎると、読み込み時間が長くなり、ユーザーエクスペリエンスが悪化するからです。
画像の最適化するために、以下の点を改善してみましょう。
- 画像を適切なファイル形式（JPEG、PNG、GIFなど）に変換する。
- 画像のサイズを最適化する（必要に応じてリサイズする）。
- 画像の圧縮率を調整する（高画質な画像はサイズが大きくなります）。
CSSやJavaScriptを最適化する
CSSやJavaScriptファイルは、ウェブページのレンダリング※に時間がかかる可能性があります。
これらの問題に対処するために、以下の点を改善してみましょう。
- CSSやJavaScriptファイルを結合する（複数のファイルを1つのファイルにまとめることで、HTTPリクエストの数を減らすことができます）。
- 不要なCSSやJavaScriptを削除する（ページで使用されていないコードを削除することで、ファイルサイズを削減できます）。
キャッシュを最適化する
ウェブサイトで使用されるコンテンツは、一度ダウンロードされたらブラウザのキャッシュに保存され、次回以降の読み込みに利用されます。
以下は、キャッシュの利用を最適化する方法です。
- キャッシュの期限を設定する（ウェブサーバーの設定を変更して、コンテンツの期限を指定することができます）。
- キャッシュを有効にする（ウェブサイト上でキャッシュを使用するためのコードを追加することができます）。
ブラウザのキャッシュを有効活用する
ブラウザのキャッシュは、ウェブサイトを再訪問する際に、ページの読み込み時間を大幅に短縮することができます。
- キャッシュされたコンテンツの期限を更新する（新しいコンテンツが利用可能になった場合に、ブラウザのキャッシュを更新することができます。
PageSpeed Insightsで現状を把握しましょう。
Google PageSpeed Insightsは、Googleが提供するウェブサイトのパフォーマンス評価ツールです。
URLを入力することで、そのサイトの表示速度とユーザー体験を評価し、改善点を提案してくれます。
まずはウェブサイトのパフォーマンスを測定して現状を把握することから始めましょう。
そして、測定結果をもとに改善してより良いウェブサイトづくりをしましょう！
