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）。特にモバイルユーザーからの離脱率が高く、改善が求められていました。

スコア改善前後の比較

この事例は、適切な最適化戦略を実施することで、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コマースサイトでは、速度の改善が直接的に売上増加につながることがあります。

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

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

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

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