独立サイトの表示が遅い場合、画像の読み込み問題をどう調査すればよいですか？

独立サイトの表示速度が遅い場合、画像はよく調査対象になりますが、ページに画像が多いからといって、すぐに一括圧縮すべきではありません。ファーストビューの大きな画像のダウンロードに時間がかかる、画像リクエストの検出が遅れる、海外の接続拠点との通信状態が悪い、あるいはサーバーの応答が遅いなど、ユーザーが「画像がいつまでも表示されない」と感じる原因はいくつも考えられます。まず、どの画像のどの処理段階に時間がかかっているのかを特定し、そのうえでファイルを変更するのか、ページのコードを変更するのか、配信経路を調査するのかを判断しましょう。

技術評価を担当する方にとって、効果的な調査では次の3点を明らかにする必要があります。遅いのはどの画像か、時間がかかっているのはリクエスト前か転送中か、そして最適化によってターゲット市場のユーザーが主要コンテンツを実際に早く見られるようになったか、という点です。

画像が主なボトルネックかどうかを確認する

Chrome デベロッパー ツールの Network パネルを開き、キャッシュを無効にして、ページの読み込み中にリクエストを記録します。初回訪問時のテスト後、キャッシュを有効にした状態でも再テストし、キャッシュがない場合と再訪問時の表示体験を比較します。画像の種類でリクエストを絞り込み、ファイルサイズ、リクエスト開始時刻、所要時間、ウォーターフォールを確認します。テストではターゲットユーザーに近いネットワーク環境を使用し、デスクトップ版とモバイル版のページをそれぞれ確認してください。

あわせて Lighthouse または PageSpeed Insights を実行し、最大コンテンツ描画（LCP）に関する診断を確認します。LCP 要素がファーストビューの画像で、その表示が遅い場合は、調査すべき箇所が明確です。LCP 要素がテキストである場合や、HTML またはスクリプト自体の応答が遅い場合も、画像の最適化に効果があることはありますが、ファーストビューの表示速度の問題を解決できるとは限りません。

リクエスト全体の所要時間だけに注目しないでください。対象の画像をクリックして Timing を確認し、ウォーターフォールとあわせて次のように判断します。

• リクエストの開始が遅い：JavaScript による描画後に画像が検出されているか、誤って遅延読み込みが設定されている可能性があります。
• 応答待ち時間が長い：画像のオリジンサーバー、CDN のキャッシュ状況、ターゲット地域までのネットワーク経路を確認します。
• コンテンツのダウンロードに時間がかかる：実際の転送サイズ、ネットワーク帯域幅、画像寸法を踏まえて判断し、まず大きなファイルを確認します。
• ダウンロード完了後も表示が遅い：画像のデコード、メインスレッドのタスク、ページのスタイルやスクリプトによる描画のブロックを確認します。

Network パネルに表示される転送サイズは、画像の元ファイルのサイズと一致するとは限りません。リダイレクト、リトライの失敗、キャッシュのヒット状況、同じ画像が異なる URL から重複してリクエストされていないかにも注意してください。海外向け独立サイトでは、主な顧客の所在地または現地のテスト拠点から再テストするのが望ましいです。そうしないと、ローカルでの測定結果から地域間アクセスの問題を見落とす可能性があります。

画像のサイズ、形式、実際の用途を確認する

まず、ファーストビューのメイン画像、商品詳細の大きな画像、モバイル向けバナーを確認します。これらは多くの通信量を消費する可能性があるだけでなく、ユーザーが主要コンテンツを見るまでの時間に直接影響します。ブラウザーで画像の実際の表示サイズとリソースサイズを確認してください。ページ上では小さな商品サムネイルしか表示していないのに高解像度の元画像をダウンロードしている場合は、単に圧縮率を上げるのではなく、表示位置に適した画像を生成します。

レスポンシブページでは、srcset と sizes を指定することで、ブラウザーがレイアウトやデバイスの条件に応じて異なるサイズのリソースを選択できます。モバイルとデスクトップで構図が大きく異なる場合は、picture を使ってそれぞれの画像を指定することもできます。確認時には sizes が実際のレイアウトと一致しているかをチェックしてください。一致していないと、ブラウザーが大きすぎるファイルを選択する可能性があります。

画像形式は、画像の内容と互換性要件に応じて選択します。写真や商品写真には WebP または AVIF を検討できます。透明背景が必要な素材についても、対象形式と処理ツールの対応状況を確認してください。互換性を確保するためのフォールバックを用意し、変換後のファイルサイズ、画質、デコードの挙動を比較します。新しい形式だからといって、すべての画像が小さくなるわけではありません。特に文字の輪郭、商品の質感、ブランドロゴは、圧縮後の状態を確認してください。

商品画像には、業務上の要件もあります。商品一覧のサムネイルには小さなサイズを使用できますが、詳細ページの拡大表示、素材の質感、型番の表示には十分な鮮明さが必要です。用途ごとにサムネイル、詳細画像、拡大画像を生成すれば、すべての場所で同じ元画像を使わずに済みます。また、通信量を減らすために、購買担当者が情報を見分けるのに必要な品質を損なうことも避けられます。

ファーストビューを優先し、画面外の画像は必要に応じて読み込む

ファーストビューの LCP 画像は、ブラウザーができるだけ早く検出できるようにします。画像の URL を初期 HTML に直接記述し、スクリプトの実行後に挿入されることを避けてください。このファーストビューの画像にはloading="lazy"を設定しないでください。重要なリソースであることを確認したうえで、ブラウザーに優先度を上げるよう伝える fetchpriority="high" の使用を検討できます。ただし、複数の画像に同時に高い優先度を設定するのは避けてください。フォントやスタイルなどの重要なリソースと帯域幅を奪い合う可能性があります。

ファーストビューの大きな画像が CSS の背景画像として読み込まれる場合、ブラウザーが関連するスタイルを取得して解析するまで、その画像を検出できないことがあります。主要コンテンツを表示する画像については、HTML の画像要素への変更を検討できます。リソース URL が明確で、実際に検出の遅れが生じている場合は、プリロードも検討できます。プリロードする URL とレスポンシブ設定は、最終的に使用するリソースと一致させてください。一致しないと、重複ダウンロードが発生する可能性があります。

画面外の商品一覧、詳細ページの長い画像、関連コンテンツには、ネイティブの遅延読み込みを検討すると、初期リクエストを減らせます。テストではページを下にスクロールし、画像が適切なタイミングで表示されるかを確認します。また、画像の幅と高さ、または適切なアスペクト比を指定して、読み込み後にページがずれないようにします。カルーセルも確認してください。初期表示されない複数の大きな画像が最初からすべて読み込まれると、ファーストビューの表示が遅くなる可能性があります。ただし、最初に表示される画像は引き続き優先して最適化する必要があります。

ファイルの最適化後も遅い場合は、配信経路を調査する

同じ画像がローカルでは正常に読み込まれるのに、ターゲット市場では遅い場合、CDN が対象地域をカバーしているか、リクエストがキャッシュにヒットしているかを確認します。キャッシュ戦略は画像の更新方法と合わせる必要があります。内容が変わらないリソースには長期キャッシュが適しています。画像の更新時にはバージョン情報を含む URL を使用し、ユーザーに古い画像が表示され続けるのを防ぐことができます。署名パラメーターや頻繁に変わるクエリパラメーターもキャッシュヒットに影響する可能性があるため、サービスの設定を含めて確認してください。

画像をサードパーティーのドメインに保存している場合は、ドメインの名前解決、接続の確立、リダイレクト、サービスの可用性も確認します。クロスオリジン接続には時間がかかりますが、プリコネクトなどの最適化を行う価値があるかどうかは、ウォーターフォールに表示される実際の待ち時間に基づいて判断します。越境ECサイトでは、言語別・地域別のサイトや広告ランディングページもそれぞれ確認し、特定のページテンプレートが未最適化の元画像を参照していないか確認してください。

同じ条件で再テストし、問題が解決したか確認する

変更後は、同じページ、デバイスの種類、ネットワーク環境、テスト地域を使って再測定し、ファーストビューの主要画像について、リクエスト開始時刻、転送サイズ、ダウンロード時間、LCP を比較します。ネットワークの変動により、1回のテストだけでは結果が左右されることがあります。複数回測定して結果の安定性を確認し、実ユーザーのパフォーマンスデータがある場合は、ターゲット市場のデータとあわせて判断してください。

最後に、最適化によって新たな問題が生じていないか確認します。ファーストビューの画像は鮮明か、モバイルで適切なサイズが選択されているか、遅延読み込みの画像はスクロール時にすぐ表示されるか、更新後の画像が正しくキャッシュされているかを確認してください。画像リクエストの減少やファイルの縮小は、あくまで途中段階の指標です。ユーザーがページを実際に早く利用できるようになったかどうかが、次の調整を続けるかを判断する基準になります。