サイトが遅いのはなぜ？画像を軽くする前に見る三つの原因

表示が遅い、反応が鈍い、ボタンが動く

説明用の例として、サービス紹介を開くと写真がなかなか出ず、メニューを押しても反応が遅く、読み進めると本文が急に下へずれるサイトを考えます。三つとも使いづらさですが、画像の容量を減らすだけですべてが直るとは限りません。何をしているときに困るかを分けることが、調査の入口です。

Core Web Vitalsは、この体験を測る指標です。Googleが示す良好の目安はLCPが2.5秒以内、INPが200ミリ秒以下、CLSが0.1以下で、モバイルとデスクトップを分け、75パーセンタイルで評価します。一回だけ速かったという意味ではなく、利用のばらつきを含めて判断する目安です。

対象ページは、トップだけでなく検索から入るサービス詳細、画像の多い事例、問い合わせから選びます。同じサイトでも、使う部品や操作によって困りごとは違うためです。社内の高速な回線と新しい端末で快適でも、想定する訪問者の条件を代表しているとは限りません。どの端末で、何をしたときに、どれくらい待つと感じるかを共有すると、調査担当が再現条件を作りやすくなります。

表が収まらない場合は横にスクロールできます。

参考：Google / web.dev：Web Vitals

点数が良いのに遅いなら、見ているデータを確かめる

PageSpeed Insightsには、実際の利用を集計したデータと、決められた条件で行うラボ計測があります。実利用データはCrUXの過去28日間の集計です。ページ単位のデータが足りず、サイトのオリジン単位へ切り替わることもあるため、表示中の対象を確かめます。データがないことを、良好と読み替えないようにします。

ラボ計測は原因を再現し、改修前後を比べるときに役立ちます。ただし、通常のページ読み込みだけの診断では、フォーム入力中などの操作を十分に再現できません。端末、回線、キャッシュ、外部タグの条件をそろえ、困る操作も試します。改修当日に過去28日分の評価がすべて切り替わるわけではない点にも注意してください。

改修前後を比べるときは、キャッシュが効く二回目の表示だけを見ないようにします。初めて来た人と再訪した人では読み込むものが異なる場合があります。同意バナーを閉じた後だけ計測すると、初回に出る部品の影響を見落とすこともあります。代表する状態を決めて結果へ添え、同じ条件で繰り返し確かめます。数字が上下した理由を説明できる材料を残すことで、改修そのものの効果を見やすくなります。

参考：Google：About PageSpeed Insights ／ Google / web.dev：Web Vitals

画像を圧縮する前に、読み込みの始まりを見る

写真が遅い原因には、サーバー応答を待つ時間、画像の存在が分かるまでの時間、画像の取得、最後の描画があります。大きな画像でも、そもそも読み込み開始が遅いなら容量だけを減らしても待ち時間が残ります。調査では最初に大きく表示される内容を特定し、どこで待っているかを分けてもらいましょう。

GoogleのLCP改善資料は、LCPとなる画像を遅延読み込みしないよう説明しています。最初に見せたい画像と、下へスクロールして初めて必要な画像は扱いが違います。発注側でも、写真の細部が必要か、スマートフォン用に切り抜けるかを判断できます。全画像を一律に小さくして読みにくくするより、役割に合わせて調整します。

参考：Google / web.dev：Optimize Largest Contentful Paint

操作が重いときは、外部タグも含めて調べる

文字が見えていても、ブラウザが長い処理にかかりきりだと、メニューを押した結果をすぐ描けません。GoogleのINP改善資料は、操作を待たせる処理を調べ、必要に応じて分割する考え方を示しています。ファイル容量の合計だけでなく、実際に押したときに何が動いているかを記録することが必要です。

解析、チャット、営業支援、動画などの外部タグも候補です。使っていない機能なら外し、必要な機能は読み込むページやタイミングを見直します。ただし全部を操作時まで遅らせると、その瞬間に処理が集中する場合もあります。導入した部門と目的を確かめ、業務に必要な機能を保ちながら改善します。

フォームでは、文字を一つ入力するたびに大きな一覧を計算し直すような処理がないかも調べます。メニューを開いた直後と、長い文章を入力した後では状況が違う場合があります。外部のチャットが開いている状態など、実際の利用に近い組み合わせも候補です。重い処理を特定できたら、操作に必要な部分を先に返し、後でよい仕事を分けるなどの案を比較します。利用者に途中の状態が伝わるかも、修正と一緒に確認します。

参考：Google / web.dev：Optimize Interaction to Next Paint

読んでいる場所がずれるなら、後から出るものの場所を空ける

画像や動画の表示場所が決まっていないと、読み込み後に周囲の文章を押し下げます。GoogleのCLS改善資料は、画像の幅・高さや比率で領域を確保する方法を案内しています。トップの写真だけでなく、下の方にある事例画像や埋め込み、後から現れる案内も調べます。

対策後は、長い見出しや文字拡大でも情報が欠けないかを確かめます。見た目のずれをなくすために、入らない文章を隠してしまうのは適切ではありません。CMSで追加する画像が原因なら、今回の画像だけ直すのでなく、担当者が次に追加しても同じ問題が起きにくい入力・配信の仕組みを整えます。

参考：Google / web.dev：Optimize Cumulative Layout Shift

改修は、スコアの低い順より困る順に

問い合わせの操作が止まる問題と、ほとんど読まれないページの小さな遅れでは、優先度が違います。重要な導線、共通部品として影響するページ、原因の確かさ、直す費用を合わせて考えます。原因が画像やタグなら、CMSを丸ごと変えずに改善できる場合もあります。

依頼先には、対象ページと操作を調べる工程、修正、機能の再確認、公開後の評価を分けて説明してもらいます。調査で制約を把握してから改修範囲を決めると、全面移行との比較もできます。速度改善は使いづらさを減らす取り組みで、検索順位や商談の増加を単独で保証するものではありません。何の待ち時間を減らしたかが分かる結果を受け取りましょう。

修正後の報告では、点数に加えて、原因、変えた箇所、確認した操作、残る制約を受け取ります。写真の配信を直した場合と、営業タグを減らした場合では、再発するきっかけも異なります。写真の追加時の条件、タグを新しく入れる際の確認者など、日常更新へ渡す情報を絞って残します。毎回専門的な計測を担当者に求めるより、何を変えたら開発側へ再確認を頼むかを決めると、改善を維持しやすくなります。

検討・発注前のチェックリスト

担当者と確認状況を添えて、社内の検討メモや打ち合わせの議題にご活用ください。

確認日：________________ / 担当者：________________

• □遅いと感じるURLと、そのときの操作を挙げた。確認状況・メモ：
• □実利用とラボのデータ、ページとサイトの集計を区別した。確認状況・メモ：
• □主要な内容が表示されるまでの待ち時間を調べる。確認状況・メモ：
• □メニューやフォームの操作中も確認する。確認状況・メモ：
• □外部タグの目的と、削除を判断する担当が分かる。確認状況・メモ：
• □画像や埋め込みが出た後の画面ずれを確かめる。確認状況・メモ：
• □改修前後の条件と、更新時の再確認方法を決めた。確認状況・メモ：

よくある質問

参考資料

製品の仕様・提供条件は変更されることがあります。採用時には公式資料と契約内容をご確認ください。

• Web VitalsGoogle / web.dev
• About PageSpeed InsightsGoogle
• Optimize Largest Contentful PaintGoogle / web.dev
• Optimize Interaction to Next PaintGoogle / web.dev
• Optimize Cumulative Layout ShiftGoogle / web.dev