ホームページの表示速度改善ガイド｜PageSpeed Insights・SEO・制作事例

自社のホームページが遅いときは、どのページが、どの操作で遅いのかを記録するところから始めます。トップの画像が出るまで待つのか、文字は見えるのにボタンが反応しないのか。症状が違えば、直す場所も違います。

改善は、対象ページを決める → 計測する → 原因を絞って直す → 同じ条件で確かめる、という順で進めます。WordPressやサーバーを変える前に、画像や埋め込みの見直しで改善できるかを確認します。

このガイドでは、計測結果の読み方、改善の順番、SEOとの関係、制作会社への依頼範囲をまとめています。当社が制作したシンプルキッチンで、PageSpeed Insightsのパフォーマンスが携帯電話99点・デスクトップ100点だった結果も紹介します。

スマホで困るページと操作を記録する

トップページだけでなく、サービス紹介、料金、問い合わせまで実際に開いてみます。使った端末、回線、日時と、遅く感じた操作を残してください。社内のWi-Fiと、外出先のモバイル回線の両方で試すと、違いを確認できます。

担当者には「サイト全体が遅い」より、「スマホで料金ページを開くと、最初の写真が出るまで待つ」のように伝えると調査範囲を絞れます。

PageSpeed Insightsでスマホとパソコンを計測する

1. PageSpeed Insightsに、確認したいページのURLを入れて分析します。
2. 「携帯電話」と「デスクトップ」の両方を開きます。トップページに加え、サービス・料金・問い合わせなど主要なページも測ります。
3. 実際のユーザーのデータがあるかを確認し、テストのスコア、LCPなどの指標、指摘された画像や処理を記録します。
4. レポートの共有リンクと計測日を保存します。修正前後は同じURL・同じ端末区分で数回測り、結果のばらつきも確認します。

点数は次の4項目に分かれています。表示速度を調べる際は、まずパフォーマンスの内訳を見ます。

各項目は100点満点で、90点以上が良好とされます。検査の対象範囲は決まっているため、ユーザー補助100点でも実際の操作確認は必要です。PageSpeed Insightsの評価方法・Lighthouseの概要

計測結果は、実際の利用者のデータとテストを区別する

GoogleのPageSpeed Insightsでは、条件がそろえば実際の利用者のデータと、一定の条件で行うテストの結果を確認できます。利用者データが十分になければ表示されないこともあります。両者は測り方が違うため、一回の点数だけで判断しません。PageSpeed Insightsの説明

実ユーザーデータは、過去28日間に実際に訪問した人の環境で集計されます。Lighthouseのテストは、条件をそろえた環境でページを読み込んだ結果です。「データがありません」は実ユーザーデータを表示できないという意味で、速度の合格・不合格を示すものではありません。修正直後の確認にはテストを使い、実ユーザーの変化は集計期間も考慮して追います。Googleによるデータの説明

表示までの時間、操作への反応、表示中のレイアウトのずれを見る指標がCore Web Vitalsです。GoogleのWeb Vitals解説 報告を受ける際は、用語の説明に加えて、どの操作が改善するのかを聞いてください。

表示速度は、使いやすさと検索評価の両方に関わる

検索から料金ページへ来た人が、写真の表示を待たずに内容を読める。問い合わせボタンを押すと、すぐ反応する。表示速度を改善する目的は、訪問者が必要な情報を読み、次の操作へ進めるようにすることです。

GoogleはCore Web Vitalsを検索のランキングシステムで使うと説明しています。一方で、検索した内容との関連性も重視されます。速度の改善と合わせて、サービス内容や料金を分かりやすく書き、関連ページへのリンクを整えます。Googleによるページ体験と検索順位の説明

目安は実際の訪問者のデータの75パーセンタイルで評価します。全体の75％がその値以内に収まるかを見る方法です。スマホとPCは分けて確認します。Core Web Vitalsの評価方法

PageSpeed Insightsのテストで高い点数が出ても、実際の訪問者の体験や検索順位まで確定するわけではありません。公開後は、利用者データとSearch Consoleの表示・クリックを合わせて確認します。

SEOの項目が100点であることも、検索順位そのものを表すものではありません。すでに良好な速度が出ているなら、99点を100点にする作業と、サービス説明・料金・問い合わせの分かりやすさを改善する作業を比べ、訪問者の役に立つ方を優先します。Googleのページ体験に関する説明

制作事例：携帯電話99点・デスクトップ100点の案内サイト

健康料理家・堀之内ちづるさんのシンプルキッチンを、Astro・microCMSで制作しました。料理の写真、活動や講座の案内を掲載したトップページの計測結果です。

対象URLは https://chizurukitchen.com/。端末区分ごとに別の日に行った各1回のテストで、両レポートとも実ユーザーデータは未掲載でした。公開ページの計測例として紹介しており、移行前後の改善率を示すものではありません。

このサイトでは、本文をHTMLとして配信し、お知らせの編集と問い合わせ処理を分けています。構成や更新手順、指標の詳細と計測画面はシンプルキッチンの制作事例にまとめています。

原因を、画像・外部機能・配信側の処理に分ける

地図や予約ボタンなど、訪問者に必要な機能を残したうえで、表示する場所とタイミングを調整します。

1. 大きな写真と、最初に見える内容の読み込みを整える

写真の表示サイズに合った画像を用意し、画質を確認しながら容量を減らします。最初の画面にある主要な写真は早く読み込めるようにし、画面の下にある画像は必要になってから読み込む方法を検討します。LCPになる画像まで遅延読み込みにすると、表示を遅らせる原因になります。GoogleのLCP改善ガイド

画像や埋め込みの表示領域は、読み込み前から確保します。Webフォントの切り替えで文字やボタンの位置が動く場合も確認します。GoogleのCLS改善ガイド

2. 外部機能とJavaScriptの処理を見直す

地図、SNS、動画、チャットなどは、利用するページと読み込むタイミングを整理します。ボタンが反応しにくい場合は、長いJavaScript処理が操作を待たせていないか調べ、不要な処理の削減や分割を検討します。GoogleのINP改善ガイド

フォームや予約機能を変更した後は、入力から完了まで操作します。計測用スクリプトを変更した場合も、必要なアクセス・問い合わせの計測が続くか確認します。

3. ページを返す処理と配信方法を確認する

画像や外部機能を見直しても最初の表示が遅い場合は、サーバーの応答、キャッシュ、ページを生成する処理を調べます。キャッシュなどでHTMLを早く返すことも、LCPの改善につながります。配信の応答を含むLCPの見直し

部分改善で足りるか、構成を変えるかを比較する

画像の容量や埋め込みが主な原因なら、その箇所を直して再計測します。ページを返す処理が重く、案内中心のサイトなら、キャッシュの設定や静的サイトへの変更も候補になります。

WordPress固有の確認はWordPressが遅いときの対策で扱っています。キャッシュの調整など、今の環境で改善できる範囲も比較します。

Astroで案内サイトを作ると、表示のための処理を減らしやすい

当社が会社案内や店舗のサイトを新しく作るときは、Astroを基本に使います。公開前に本文の入ったHTMLを作り、訪問者へそのまま届ける構成にできます。ブラウザーでページ全体を組み立てる処理を減らし、メニューなど動きが必要な部分にだけプログラムを使います。Astroの設計方針

写真や文章を先に見せ、予約・問い合わせなど必要な機能を残す。こうした案内サイトでは、少ない処理で内容を届ける設計が使いやすさにつながります。お知らせはCMSで編集し、公開ページを生成し直す運用にできます。静的サイトの構成と更新方法

画像や動画の容量、地図・SNSの埋め込み、Webフォントも表示時間を左右します。Astroの採用に加え、これらの素材と読み込み方を調整して確かめます。Next.jsなどでも静的配信は可能なので、提案では技術名と、実際の配信方式・計測結果を分けて確認してください。Next.jsの静的出力

本文を先にHTMLで用意し、お知らせの更新とフォームを組み合わせた実装は、シンプルキッチンの制作例で紹介しています。

制作会社への依頼には、対象ページと改善後の確認を含める

相談時には、次の情報を渡すと調査範囲を決めやすくなります。

• 遅いと感じるページのURLと、困った操作
• PageSpeed Insightsのレポート共有リンク・計測日・端末区分
• 問い合わせ、予約、お知らせ更新など、継続する必要がある機能
• 公開・修正の希望時期と、現在の制作会社・管理担当者

調査、修正、再計測を分け、スマホとパソコンのどちらを対象にするかも確認します。改善前後は、できるだけ同じ条件で比較します。点数だけでなく、問い合わせや予約の操作が壊れていないかも試してください。

当社ではホームページの制作・見直しの相談時に、遅いページと困っている操作から確認します。対象ページ、改善する箇所、再計測の条件を見積もりにまとめます。費用と更新の問題もある場合は、管理・運用全体のガイドを参照してください。

自社の構成や困りごとに合わせて詳しく読む