みなさんこんにちは。ローコードエンジニアの有浦です。できる限りコードを書かずに事業の改善をする方法を発信・お手伝いをさせて頂いております。
今回はウェブサイトの表示速度を調べて分析する流れを、実際に私が行う方法を共有したいと思います。
1.PageSpeed Insightsとは？
PageSpeed Insightsとは、Googleが提供するウェブページのパフォーマンスを分析するためのツールです。このツールは、ウェブページの読み込み速度やパフォーマンスに関する詳細なレポートを提供し、改善点をわかり易く提案してくれます。モバイルデバイスとデスクトップの両方に対して分析を行い、ページのパフォーマンスを向上させるための具体的なアドバイスを提供します。
主な特徴としては、以下のようなものがあります。
◆ パフォーマンススコア
ウェブページの読み込み速度やパフォーマンスに基づいたスコアが表示されます。スコアは0から100までの範囲で評価され、スコアが高いほどパフォーマンスが良いことを示します。
◆ フィールドデータとラボデータ
実際のユーザーから収集されたデータ（フィールドデータ）と、シミュレーションによって生成されたデータ（ラボデータ）の両方を使用して、ページパフォーマンスを評価します。
◆ 改善提
ページのパフォーマンスを向上させるための具体的な改善提案が提供されます。例えば、画像の最適化、不要なJavaScriptの排除、サーバー応答時間の短縮などが挙げられます。
◆ Core Web Vitals
ユーザー体験を評価するための重要な指標（LCP、FID、CLS）が含まれており、ユーザーが感じるページのパフォーマンスをより詳細に理解することができます。PageSpeed Insightsは、ウェブ開発者やサイト運営者がページパフォーマンスを改善し、ユーザー体験を向上させるために非常に役立つツールです。
2. PageSpeed Insightsの重要性
PageSpeed Insightsが重要である理由をいくつか挙げてみましょう。
◆ユーザーエクスペリエンスの向上
ページの読み込み速度は、ユーザーエクスペリエンスに直接影響します。多くのユーザーは、ページの読み込み時間が短いサイトを好みます。PageSpeed Insightsを利用することで、ユーザーが快適にサイトを利用できるように、速度改善の指針を得ることができます。
※ユーザーエクスペリエンス（U/X）とは、ユーザーが製品やサービスを利用する際に得る体験全体を指します。単に使いやすさ（ユーザビリティ）だけでなく、感情・満足度・利便性・デザインなどの要素も含まれます。
◆SEOの向上
Googleのアルゴリズムでは、ページスピードがランキング要因の一つとされています。つまり、ページの速度が速いほど、検索結果で上位に表示される可能性が高くなります。PageSpeed Insightsで提案される改善策を実施することで、SEOの向上が期待できます。
◆モバイルフレンドリーの確認
スマートフォンやタブレットなどのモバイルデバイスでのインターネット利用が増加している現在、モバイルでのパフォーマンスも非常に重要です。PageSpeed Insightsは、デスクトップだけでなくモバイルでのパフォーマンスも評価し、最適化のための具体的なアドバイスを提供します。
◆競争力の強化
オンライン上での競争が激化する中で、サイトのパフォーマンスは競争力に直結します。競合他社よりも迅速に情報を提供できるようにするために、PageSpeed Insightsを活用してサイトの速度を定期的にチェックし、改善を続けることが重要です。
◆コスト削減
サイトのパフォーマンスを最適化することは、サーバーの負荷を軽減し、ホスティングのコスト削減にもつながります。無駄なリソースを削減することで、効率的な運営が可能になります。
PageSpeed Insightsは、技術的な知識がなくても利用できるため、ウェブサイトの管理者や開発者にとって非常に有用なツールです。定期的にサイトのパフォーマンスをチェックし、ユーザーにより良い体験を提供するために、ぜひ活用しましょう。
3.【実例あり】PageSpeed Insightsを使ってサイトを計測し分析する手順
実際にPageSpeed Insightsを使ってサイトを分析する手順は以下の通りです。
1. PageSpeed Insightsにアクセス
ウェブブラウザを開き、「PageSpeed Insights」の公式ウェブサイト（https://developers.google.com/speed/pagespeed/insights/）にアクセスします。
2. URLの入力
分析したいウェブページのURLを入力するテキストボックスがあります。このボックスに対象のページURLを入力します。
3. 「分析」ボタンをクリック
URLを入力したら、「分析」ボタンをクリックします。これで、PageSpeed Insightsが指定したページのパフォーマンスを評価し始めます。
4. 結果の確認
分析が完了すると、デスクトップとモバイルのそれぞれに対するスコアが表示されます。スコアは0から100までの範囲で、数値が高いほどパフォーマンスが良好です。詳細を一つ一つ確認していってもいいですが、ここからはAIの力を借りていきます。
5.Chrome拡張機能を使って分析ページを画像化する
「GoFullPage – Full Page Screen Capture」という拡張機能を使用します。これは、 Chromeウェブストアで提供されている人気のあるスクリーンキャプチャ拡張機能です。このツールを使うと、ウェブページ全体のスクリーンショットを簡単に撮ることができます。特に、ページが縦に長い場合や、複数のスクロールが必要なページの全体像をキャプチャしたいときに便利です。
GoFullPageを使用する手順は非常にシンプルです。まず、Chromeウェブストアから拡張機能をインストールします。インストールが完了すると、ブラウザのツールバーにカメラアイコンが表示されます。このアイコンをクリックするだけで、現在表示中のウェブページ全体のキャプチャが開始されます。キャプチャが完了すると、自動的に新しいタブが開き、そこで画像を確認したり、ダウンロードしたり、PDFとして保存することができます。
この拡張機能は、ウェブ開発者、デザイナー、コンテンツクリエーター、または単に情報をアーカイブしたいユーザーにとって非常に役立つツールです。手軽に使える上に、追加の設定や高度な技術が不要なので、誰でも簡単に利用できます。
6. ChatGPTを使って分析する
「あなたはSEOコンサルティングのプロです。PageSpeed Insightsの画像を添付しますので、初心者でもわかり易いように評価の内容をまとめてください。最後に、改善策として優先的にやるべき事をアドバイスしてください。」
すると、以下のような回答が返ってきました。
※画像ではなく、テキストでPageSpeed Insightsの情報を渡すと、より精度が高い回答が返ってきます。
6. 改善提案の実行
提案された改善点を実施することで、ページの読み込み速度を向上させることができます。これには、画像の最適化、不要なスクリプトの削除、キャッシュの活用などが含まれていることでしょう。
7. 再分析
改善を行った後、再度PageSpeed Insightsを使ってページを分析し、パフォーマンスが向上したかを確認します。これを繰り返すことで、サイトのパフォーマンスを継続的に改善できます。
この手順を通じて、PageSpeed Insightsを効果的に活用し、ウェブサイトのパフォーマンスを最適化することが可能です。