PageSpeed insights とは？合格点を取る方法から基本的な最適化の紹介

PageSpeed Insightsの重要性とその影響

PageSpeed Insights（ページスピードインサイト）は、Googleが提供するウェブページのパフォーマンスを評価するツールです。このツールは、ウェブページが読み込まれる速度を分析し、その結果をスコアで示します。このスコアは、ページのパフォーマンスが良好かどうかを判断する重要な指標となります。

パフォーマンスというと少しわかりにくいかもしれませんが、要はページが速く表示されて、ユーザーがすぐに操作できるかどうかを分析してくれるツールです。

ウェブページの読み込み速度は、ユーザーエクスペリエンス（ユーザーの体験）に直接影響を与えます。表示が速いページはユーザーの満足度を高め、サイトへの滞在時間の延長やコンバージョン率の向上につながります。逆に、遅いページはユーザーの離脱率を高め、サイトのユーザーの満足度に悪影響を及ぼします。

みなさんも見たいページがなかなか開かず、イライラした経験はありませんか？そのような状況のページの満足度が下がるのは当然のことですよね。

また、Googleはページの読み込み速度を検索ランキングの要因の一つとしています。つまり、PageSpeed Insightsのスコアが高いウェブサイトは、検索エンジン結果ページ（SERP）でより高い位置（上位）に表示される可能性が高くなります。

もちろん読み込み速度が早いだけで上位表示されるわけではありませんし、もっとも重要な要素かというとそうではありません。SEOのためにできることの一つとして捉えてください。

PageSpeed Insightsとは？

PageSpeed Insightsの概要

PageSpeed Insights（PSI）は、Googleが開発したウェブページのパフォーマンスを分析するツールです。このツールは、ウェブページの読み込み時間やユーザー体験に関連するさまざまな要素を評価し、それらのデータに基づいてパフォーマンススコアを提供します。

PSIは、デスクトップとモバイルの両方の環境でページを分析し、それぞれに対してスコアを生成します。

さらに読み込みを改善するための具体的な提案をしてくれます。

スコアの計算方法と意味

PageSpeed Insightsのスコアは、0から100の範囲で表示されます。

このスコアは、Lighthouseというオープンソースの自動化ツールによって計算されます。Lighthouseは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA（プログレッシブウェブアプリ）の5つのカテゴリーでウェブページを評価しますが、PSIのスコアは主にパフォーマンスカテゴリーに基づいています。（Lighthouseについては、この後説明します。）

スコアは以下のように解釈されます。

スコア範囲	評価
0-49	パフォーマンスが不十分
50-89	平均的なパフォーマンス
90-100	優れたパフォーマンス

スコアは、

• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)
• First Contentful Paint (FCP)
• First Input Delay (FID)
• Time to First Byte (TTFB)

などの指標に基づいて計算されます。これらの指標は、ページの読み込み速度、インタラクティブ性、視覚的安定性など、ユーザーエクスペリエンスの重要な側面を反映しています。

指標についての詳しい解説

それぞれのパフォーマンス指標について、さらに詳しく説明します。

Largest Contentful Paint (LCP)

LCPは、ページが読み込みを開始してからユーザーに視覚的に最も大きなコンテンツ要素が表示されるまでの時間を測定します。この要素は通常、ページのメインコンテンツを構成するもので、画像、ビデオ、または大きなブロックレベルのテキスト（例：<div>、<section>など）であることが多いです。

ユーザーにとって重要なコンテンツが迅速に表示されることで、ページの読み込み体験を向上させることを目的としています。

＜計測方法＞
ブラウザのパフォーマンスAPIを使用して、レンダリングされた各要素の読み込み時間を追跡し、視覚的に最大の要素が表示される時点をLCPとして記録します。

Interaction to Next Paint (INP)

INPは、ユーザーがページ上で操作（クリック、タップなど）を行った際、その操作に対するページのビジュアル応答が完了するまでの時間を測定します。具体的には、次のペイント（描画）が行われるまでの遅延を評価します。

ユーザーのインタラクションに対するページの応答性を評価し、スムーズなユーザーエクスペリエンスを提供するために役立ちます。

＜計測方法＞
ユーザーのインタラクションイベントを監視し、イベント発生から次のペイントが完了するまでの時間を記録します。

Cumulative Layout Shift (CLS)

CLSは、ページの視覚的安定性を評価する指標で、予期しないレイアウトの変更がどれだけ発生したかを測定します。ページが読み込まれる間に要素が移動することがユーザーにどの程度影響を与えるかを示します。

ページが安定したレイアウトを維持し、ユーザーが意図しない要素の移動による混乱や操作ミスを防ぐことを目指します。

＜計測方法＞
要素が動いた際の影響範囲と頻度を計算し、累積的なレイアウトシフトスコアを算出します。

First Contentful Paint (FCP)

FCPは、ページの最初のコンテンツ（テキスト、画像など）がユーザーのブラウザに表示されるまでの時間を測定します。これは、ユーザーがページの読み込み開始を視覚的に認識する最初の瞬間を示します。

ユーザーに最初の視覚的フィードバックを迅速に提供し、ページが読み込まれていることを示すことで、ユーザーエクスペリエンスを向上させることを目的としています。

＜計測方法＞
ブラウザのパフォーマンスタイミングAPIを使用して、最初に描画されるコンテンツ要素のタイミングを記録します。

First Input Delay (FID)

FIDは、ユーザーが最初にページ上で操作（クリック、タップなど）を行った際、その操作に対してブラウザが応答を開始するまでの時間を測定します。これは、初回インタラクションの応答性を評価する指標です。

ページがユーザーの最初の操作に対して迅速に応答することで、ユーザーのフラストレーションを減らし、スムーズな体験を提供することを目指します。

＜計測方法＞
ユーザーの最初のインタラクションイベントを監視し、そのイベント発生から応答が開始されるまでの遅延時間を記録します。

Time to First Byte (TTFB)

TTFBは、ユーザーがページをリクエストしてから、サーバーが最初のバイトをブラウザに送信するまでの時間を測定します。これは、サーバーの応答速度を評価する指標です。

サーバーの応答時間を短縮し、ページの初期読み込みを迅速にすることで、全体的なパフォーマンスを向上させることを目的としています。

＜計測方法＞
ブラウザのネットワークタイミングAPIを使用して、リクエスト送信から最初のバイト受信までの時間を記録します。

新しい指標「INP」について（FIDとの違い）

INP（Interaction to Next Paint）が新しく導入されました。導入された背景には、ウェブパフォーマンスの評価においてユーザーエクスペリエンスの向上を目指すための進化があります。従来の指標では捉えきれなかった、ユーザーインタラクションに対するページの応答性の評価をより正確に行うための必要性がありました。

インタラクティブ性の重視

ウェブページのパフォーマンス評価は、ページの読み込み速度だけでなく、ユーザーが実際に操作を行ったときの応答性も重要です。ユーザーはページが読み込まれた後もスムーズに操作できることを期待しており、このインタラクティブ性が欠けると全体的なユーザーエクスペリエンスが低下します。

従来の指標の限界

FID（First Input Delay）は、最初のインタラクションに対する遅延時間を測定しますが、これはあくまで最初の操作に限定されています。現実のユーザーはページを複数回操作するため、最初の操作だけではなく、その後の操作の応答性も重要です。

LCP（Largest Contentful Paint）やFCP（First Contentful Paint）はページがユーザーに視覚的なフィードバックを提供する速度を評価しますが、インタラクション後の応答時間は評価しません。

包括的なユーザーインタラクション評価の必要性

ユーザーはページ上で様々な操作を行うため、全体的なインタラクションの応答性を評価する指標が求められていました。INPは、ユーザーが行う複数の操作を通じて、ページの総合的な応答性を測定することで、より包括的な評価を提供します。

ユーザーエクスペリエンスの向上

ウェブサイトやアプリケーションが複雑化し、インタラクティブな要素が増加する中で、応答性がユーザー満足度に直結するようになっています。INPは、ユーザーが操作を行ったときに感じる遅延を最小限に抑えるための改善点を特定しやすくします。

INPとFIDの違いまとめ

以下は、INPとFIDの主な違いを表にしたものです。

比較項目	FID	INP
測定対象	初回操作から応答開始までの時間	操作から次のペイントまでの時間（ビジュアル応答時間）
評価範囲	最初の操作に焦点を当てる	複数のインタラクションに基づく全体的な応答性を評価する
重要性	初回インタラクションの遅延を改善することで、ページがすぐに反応するようにすることに重点を置く	ページ全体のインタラクションの応答性を改善することで、ユーザーエクスペリエンスを向上させることに重点を置く

レポートの読み方

PageSpeed Insightsのレポートは、スコアとともに、ウェブページのパフォーマンスを改善するための具体的な提案を提供します。レポートは以下のセクションで構成されています。

1. パフォーマンススコア … ページの全体的なパフォーマンスを示す数値。
2. フィールドデータ … 実際のユーザー体験に基づくデータ（存在する場合）。
3. ラボデータ … 制御された環境でのページのパフォーマンスを示すメトリクス。
4. オポチュニティ … ページの読み込み時間を短縮するための提案。
5. 診断 … パフォーマンスに影響を与える可能性のある詳細な技術情報。

このレポートを理解し、適切に対応することで、ウェブサイトのパフォーマンスを効果的に改善することができます。

スコアを向上させる主要な要因

PageSpeed Insightsのスコアを向上させるため、大きくスコアを上げられる可能性のある、いくつかの重要な項目について紹介します。

スコアは

• 90以上：速い
• 50～90：平均的
• 50未満：遅い

と見なされます。
現在の点数が49点以下の場合はこれらの項目の改善が最優先となります。

レンダリングブロックのJavaScriptとCSSの最適化

ウェブページの読み込み速度に大きな影響を与えるのが、レンダリング（読み込み）をブロックするJavaScriptとCSSです。これらのリソースが最適化されていないと、ページのコンテンツが表示されるまでの時間が遅くなります。

• JavaScriptの最適化 … 不要なJavaScriptの削除、遅延読み込みの実装、非同期読み込みの使用、コード圧縮などが有効です。
• CSSの最適化 … 不要なスタイルの削除、クリティカルCSSの抽出とインライン配置、メディアクエリの使用、CSSファイルのコード圧縮などが効果的です。

画像の最適化

画像はウェブページのサイズ（重さ）の大部分を占めることが多く、最適化されていない画像はページの読み込み時間を大幅に遅らせる原因となります。

• 画像圧縮 … 画像のファイルサイズを減らすために、適切な圧縮ツールを使用します。
  （主な画像圧縮ツール：squoosh）
• 適切なフォーマットの選択 … JPEG、PNG、WebP、AVIFなど、コンテンツに最適なフォーマットを選択します。
• レスポンシブ画像 … 異なるデバイスサイズに適応するために、srcset属性を使用して複数の画像サイズを提供します。

これらはどれも重要で、しかもインパクトがあります。快適なネット環境では感じることはできませんが、モバイル回線など細い回線では、画像の重さはユーザーにストレスを与えます。

キャッシュの活用

ブラウザキャッシュの適切な利用は、再訪問者（リピートユーザー）の読み込み時間を短縮し、サーバーの負荷を軽減します。

つまり、一度訪問したユーザーに、サイトの画像などのデータを端末に保持してもらい、再訪問の際にそのデータを利用してもらうことで、ネット回線を使わずに画像などのキャッシュデータを読み込み、表示速度を速くします。

• キャッシュポリシーの設定 … 静的リソース（CSS、JavaScript、画像ファイルなど）に長期間のキャッシュポリシーを設定します。
• キャッシュの有効活用 … キャッシュ可能なリソースを最大限に活用し、頻繁に変更されないコンテンツのキャッシュを促進します。

サーバー応答時間の短縮

サーバー応答時間は、ページの読み込み速度に直接影響を与えます。サーバーのパフォーマンスを最適化することで、応答時間を短縮できます。

• 高性能なホスティングの選択 … 信頼性と速度が高いホスティングサービスを選択します。
• サーバーのリソース最適化 … サーバーのCPUとメモリの使用を最適化します。
• データベースの最適化 … データベースクエリのパフォーマンスを向上させ、効率的なデータ取得を実現します。

レンタルサーバーを利用している場合には、改善できないこともあり、サーバーの乗り換えも検討する必要が出てくることもあります。

実践的な最適化手法

ここまで改善項目とその対処法について解説してきましたが、ここからはこれらを改善するために、多くの開発者が取り組むメジャーな手法について紹介します。

圧縮ツールとプラグインの使用

ウェブページのサイズを減らすために、圧縮ツールやプラグインの使用が効果的です。

• HTML、CSS、JavaScriptの圧縮 … これらのファイルを圧縮することで、不要なスペースやコメントを削除し、ファイルサイズを減らします。
• Gzip圧縮の活用 … サーバーでGzip圧縮を有効にすることで、ファイルをブラウザに送信する前に圧縮し、データ転送量を減らすことができます。
• 最適化プラグイン … WordPressなどのCMSを使用している場合、パフォーマンス最適化プラグインを利用して、自動的にファイルを圧縮し、最適化することができます。

CDN（コンテンツ配信ネットワーク）の活用

CDNは、世界中の複数のサーバーにコンテンツをキャッシュし、ユーザーに最も近いサーバーからコンテンツを配信するシステムです。これにより、読み込み時間が短縮され、ウェブサイトのパフォーマンスが向上します。

キャッシュといえば、一人ひとりの端末に保存するイメージかもしれませんが、それをさらに進化させて世界中のサーバーにキャッシュを残してしまおうという方法です。

• 地理的な遅延の削減 … ユーザーに近いサーバーからコンテンツを配信することで、データ転送時間を短縮します。
• トラフィックの分散 … 複数のサーバーにトラフィックを分散させることで、サーバーの過負荷を防ぎます。

モバイルファーストのデザイン

モバイルデバイス（スマートフォン）の使用が増加しているため、モバイルファーストのデザインを採用することが重要です。

• レスポンシブデザイン … 異なる画面サイズに対応するために、レスポンシブデザインを採用します。
• モバイル向けの最適化 … モバイルユーザーの体験を考慮し、タッチ操作に適したデザイン（例：ボタンの大きさ）や、軽量なコンテンツ（例：画像や動画）を提供します。

AMP（Accelerated Mobile Pages）の導入

AMPは、モバイルデバイスでの高速なコンテンツ配信を目的としたオープンソースプロジェクトです。AMPを使用することで、特にモバイルデバイス上でのページの読み込み速度を大幅に向上させることができます。

• 高速な読み込み時間 … AMPは、最適化されたHTML、JavaScript、CSSを使用して、ページの読み込み時間を短縮します。
• Google検索の統合 … AMPページはGoogle検索結果に特別に表示されることがあり、ユーザーエンゲージメントの向上につながります。

ただし最近ではAMPはニュースなど特定のコンテンツに限られることが多く、多くの人に効果的な手法というわけではなくなっています。

高度な最適化手法

ここからは100点を目指すための高度な専門性を求められる手法を紹介していきます。技術的な深さが求められますが、実装することで100点に近づけることができます。

コードの分割と遅延読み込み

大規模なウェブアプリケーションでは、コードの分割と遅延読み込みが非常に効果的です。これにより、初期読み込み時に必要ないコードの読み込みを避け、ページの読み込み時間を短縮することができます。

• コードスプリッティング … アプリケーションのコードを複数の小さなチャンクに分割し、必要に応じてそれらを読み込みます。
• 遅延読み込み（Lazy Loading） … 画像やビデオなどのメディアファイル、または特定のスクリプトを、それらが必要になるまで読み込まないようにします。

クリティカルパスの最適化

クリティカルパスは、ページがビジュアルに完全に表示されるまでの最短経路です。このパスの最適化は、ページの読み込み時間を大幅に短縮することができます。

• クリティカルCSSの抽出 … ページの初期表示に必要な最小限のCSSのみをインラインで含め、残りのスタイルは非同期に読み込みます。
• レンダリングブロックリソースの削減 … レンダリングをブロックするJavaScriptやCSSの量を減らし、必要最小限に保ちます。

PWA（Progressive Web Apps）の利用

PWAは、ウェブとネイティブアプリの利点を組み合わせた技術です。PWAを採用することで、オフライン機能、プッシュ通知、バックグラウンド同期など、ユーザーエクスペリエンスを大幅に向上させることができます。

• サービスワーカーの活用 … オフライン機能やデータキャッシュを実装することで、ネットワーク接続が不安定な環境でもスムーズな体験を提供します。
• ホーム画面への追加 … ユーザーがアプリのようにウェブサイトをホーム画面に追加できるようにします。

サーバーサイドの最適化

サーバーサイドの最適化は、ウェブサイトのパフォーマンスに大きな影響を与えます。サーバーの応答時間を短縮し、効率的なデータ処理を実現することが重要です。

• データベースの最適化 … データベースクエリの効率化、インデックスの適切な使用、データベースのキャッシュ戦略の実装などが含まれます。
• サーバーアプリケーションの最適化 … コードの効率化、メモリ管理の改善、非同期処理の利用などにより、サーバーのパフォーマンスを向上させます。

ケーススタディ

ここからは実際のウェブサイト改善例を挙げ、PageSpeed Insightsのスコアが改善された具体的な事例を紹介します。

改善例

背景としてこのECサイトは、モバイルとデスクトップの両方でPageSpeed Insightsのスコアが低かった（モバイル：35、デスクトップ：60）。特にモバイルユーザーからの離脱率が高く、改善が求められていました。

実施した最適化	詳細
画像の最適化	WebP形式への変換、適切なサイズの画像の提供。
JavaScriptとCSSの最適化	不要なコードの削除、ミニファイ、クリティカルパスのCSSをインライン化。
サーバー応答時間の短縮	高性能なホスティングへの移行、データベースの最適化。
CDNの導入	コンテンツの配信速度の向上。

スコア改善前後の比較

項目	改善前	改善後
モバイルスコア	35	85
デスクトップスコア	60	95
ユーザー体験	ページの読み込みに時間がかかり、特にモバイルでの離脱率が高かった。	ページの読み込み時間が大幅に短縮され、モバイルとデスクトップの両方でユーザーのエンゲージメントが向上。特にモバイルでの離脱率が大幅に減少し、コンバージョン率が改善された。

この事例は、適切な最適化戦略を実施することで、PageSpeed Insightsのスコアを大幅に改善し、ユーザー体験を向上させています。ウェブサイトのパフォーマンス改善は、単にスコアを上げるだけでなく、実際のビジネス成果にも直結します。

ツールとリソース

ウェブサイトの速度を測定し、改善するためには、PageSpeed Insights以外にも多くの便利なツールがあります。また、ウェブサイトの最適化を学ぶためのリソースも豊富に存在します。ここでは、それらのツールとリソースを紹介します。

有用なツール

PSI以外にも分析と改善提案をしてくれるツールがいくつかあるのでご紹介いたします。

GTmetrix

このツールは、ウェブサイトの速度を測定し、改善点を詳細に教えてくれます。使い方も簡単で、ウェブサイトのURLを入力するだけで分析を始められます。

GTmetrix

WebPageTest

さまざまな場所やブラウザからウェブサイトのパフォーマンスをテストできるツールです。特に、異なる国や地域からのアクセス速度を測定したいときに便利です。
WebPageTest

Lighthouse

Googleが提供するこのツールは、ウェブサイトの品質を多角的に評価します。パフォーマンスだけでなく、アクセシビリティやSEO（検索エンジン最適化）の観点からも分析できます。

学習・最新情報の参考となるサイト

常に最新の情報を得ることで、技術の進化に合わせてウェブサイトを最適化していきましょう。

Google Developers

Googleが提供するこのウェブサイトには、ウェブパフォーマンスに関する多くの記事やガイドがあります。特に「Web Fundamentals」のセクションは、基本から応用まで幅広く学べます。
Google Developers

MDN Web Docs

Mozilla（Firefoxを開発してる会社）が提供するこのサイトは、ウェブ開発に関する信頼性の高い情報源です。特にJavaScriptやCSSなどの基本的な技術について、詳しく学ぶことができます。
MDN Web Docs

ウェブパフォーマンス関連のブログやフォーラム

インターネット上には、ウェブパフォーマンスに特化したブログやフォーラムが多数存在します。実際の事例や最新の技術トレンドを学ぶのに役立ちます。

まとめ

PageSpeed Insightsのスコアを改善することの重要性と、ウェブサイトを継続的に最適化することの大切さについてご紹介してきました。最後にまとめです。

スコア改善の重要性

• ユーザー体験の向上 … スコアが高いウェブサイトは速く、使いやすいです。これにより、訪問者は快適にサイトを利用でき、サイトに長く留まる傾向があります。
• 検索エンジンの評価 … Googleなどの検索エンジンは、速いウェブサイトを好む傾向があります。スコアが高いと、検索結果で上位に表示される可能性が高まります。
• ビジネスへの影響 … 特にオンラインショップなどのEコマースサイトでは、速度の改善が直接的に売上増加につながることがあります。

継続的なウェブサイトの最適化の重要性

• 技術の進化 … ウェブ技術は常に進化しています。新しい最適化手法やツールが登場するため、常に最新の情報を追いかけ、サイトを更新する必要があります。
• 変化するユーザーのニーズ … ユーザーのインターネット利用環境や好みは変わります。これに合わせてウェブサイトを最適化することが、長期的な成功につながります。
• 定期的なレビューと改善 … ウェブサイトは「完成」するものではありません。定期的にパフォーマンスをチェックし、必要に応じて改善を行うことが重要です。

ウェブサイトの表示速度は、ただ単にページが早く表示されるということ以上の意味を持ちます。それは、より良いユーザー体験を提供し、ウェブサイトの目的を達成するための重要な要素です。

この記事で紹介した方法を活用し、ウェブサイトを継続的に最適化していきましょう。