ホームページの表示、遅くありませんか。原因の多くは「写真の大きさ」です。無料で測って直す4つの手順

1. まず無料で測る（PageSpeed Insights）

自分のパソコンで開くと速く感じても、お客様のスマホでは遅いことがあります。まずはGoogleの無料ツール「PageSpeed Insights」で測ってみましょう。

• PageSpeed Insightsを開き、自社のホームページのアドレスを入れて「分析」を押す
• 結果は「携帯電話」と「デスクトップ」に分かれて出る。見るのは「携帯電話」のほう
• トップページだけでなく、写真の多い「施工事例」や「商品」のページも測っておく

登録もインストールも要りません。1ページ1分ほどで結果が出ます。

2. 合格の目安は3つの数字

結果の画面には、Googleが「ウェブに関する主な指標（Core Web Vitals）」と呼ぶ数字が出ます。難しく見えますが、見るのは次の3つだけです。

3つのうち、小さな会社のホームページで引っかかりやすいのはLCPです。ここが赤や黄色になっているなら、多くの場合、原因は写真です。なお、アクセスの少ないページでは実際の利用者の数字が出ず、「シミュレーション」の結果だけが出ることがあります。その場合も目安として十分使えます。

3. いちばん効くのは「写真を縮める」こと

いまのスマホで撮った写真は、横4,000ピクセル前後・1枚3〜5MBほどあります。ホームページで表示される大きさは、パソコンでも横1,000〜1,600ピクセルほどなので、そのまま載せると、見えない部分のために何倍ものデータを読み込ませていることになります。

• 横幅を縮める：ホームページ用は横1,200〜1,600ピクセルあれば十分きれいに見える
• 容量を確かめる：1枚200KB前後を目安にする（Windowsならファイルを右クリック→「プロパティ」で分かる）
• WebP（ウェブピー）形式にする：同じ見た目のまま、JPEGより容量を小さくできる画像の形式。主なブラウザはすべて対応している
• 下のほうの写真は後から読み込む：画面に入ってから読み込む設定（遅延読み込み）にすると、最初の表示が速くなる。ただし一番上の大きな写真は対象から外す

WordPressなどで作ったホームページなら、写真を自動で縮めてくれる機能や追加機能（プラグイン）もあります。ただ、載せる前に縮めておくのがいちばん確実です。

4. 写真のほかに見直すところ

写真を縮めても遅いままなら、次のところも見直します。

• 使っていない追加機能（プラグイン）：入れただけで使っていない機能が、毎回読み込まれていることがある
• トップページの大きな動画やスライドショー：見栄えはよくても、スマホでは重くなりやすい。写真1枚に替えるだけで速くなることも
• 契約しているサーバー：何年も前に契約した古いプランのままだと、そもそも応答が遅いことがある

直したら、もう一度PageSpeed Insightsで測って、数字が良くなったかを確かめましょう。スマホでの見え方そのものについては、「スマホで見ると損をしている。よくある3つのつまずき」も合わせてご覧ください。

私達の現場から

私達がホームページを作るときは、お預かりした写真を1枚ずつ、表示する大きさに合わせて縮めてから載せています。冒頭のお客様のページも、写真を縮めて形式を変えただけで、施工事例のページの読み込みが目に見えて速くなりました。写真の内容は1枚も変えていません。

「うちのホームページは速いのか遅いのか、よく分からない」という方も、お気軽にご相談ください。測るところから一緒に確認します。

まとめ

• 表示が遅いと、お客様は待たずに戻ってしまう。まずはPageSpeed Insights（無料）で「携帯電話」の結果を見る
• 目安はLCP 2.5秒以内・INP 200ミリ秒以内・CLS 0.1以下。小さな会社のサイトで引っかかりやすいのはLCP
• いちばん効くのは写真を縮めること。横1,200〜1,600ピクセル・1枚200KB前後・WebP形式を目安に
• それでも遅ければ、使っていない追加機能・トップの動画・古いサーバーを見直す
• 直したらもう一度測って、良くなったかを確かめる

参考リンク

• PageSpeed Insights（Google）
• Core Web Vitals と Google 検索の検索結果について（Google 検索セントラル）
• How the Core Web Vitals metrics thresholds were defined（web.dev）