モバイル

多くの画像があるページがモバイルで遅く読み込まれる理由

オフィスのWi-Fiでは瞬時に読み込まれる同じページが、純粋に画像の重さのためにモバイル接続では這うように遅くなることがあります。

概要

このチェックは、ページが読み込む画像の数を確認し、異常に多い数のページにフラグを立てます。追加の画像はそれぞれ、ページが完全に読み込みを終える前にブラウザがダウンロードしなければならない別のファイルだからです。これは画像が本質的に悪いということではありません — 画像はページのデザインとコンテンツに不可欠であることが多いです — これは特に、非常に多くの画像を一度に読み込むことの累積的な効果についてです。

画像数が多いことの実際的な影響は、デスクトップよりもモバイルではるかに鋭く感じられます。モバイル接続は(良いものであっても)通常、自宅やオフィスのWi-Fiや有線接続よりも遅く、一貫性が低いためです。

重要な理由

すべての画像は、ページが完全に使用可能になる前に訪問者のデバイスがダウンロードしなければならないデータの総量に加わります。特にモバイルデータ接続では、そのダウンロード時間は、同じページが速いデスクトップ接続でほぼ瞬時に読み込まれる場合と比べて著しく長くなることがあります。電話で読み込みの遅い画像の多いページを待っている訪問者は、より早く使用可能になる軽量なページと比べて、読み込みが終わる前にあきらめて離脱する可能性が有意に高くなります。

これは、修正が必ずしも訪問者が気にするコンテンツの削除を意味しない場合です — それらの画像がどのように配信されるか(ファイルサイズや、すべてがすぐに読み込まれるかどうか)についてであることの方がはるかに多く、完全に削除する必要があるわけではありません。

修正方法

  1. ページですぐに読み込まれる画像の数を数え、ファイルサイズが異常に大きいものを特定しましょう(ブラウザの開発者ツールで各画像についてこれを確認できます)。
  2. アップロードする前に無料の画像圧縮ツールを使って大きな画像を圧縮しましょう — 目に見える品質の低下なしにファイルサイズを大幅に縮小できることがよくあります。
  3. ページの下部(スクロールなしで見える範囲の下)に表示される画像に遅延読み込みを追加し、ページが最初に開いたときにすべてが一度に読み込まれるのではなく、訪問者が実際にそこにスクロールしたときにのみ読み込まれるようにしましょう。
  4. ほとんどの最新のウェブサイトビルダーやCMSプラットフォームは、簡単な切り替えで、またはデフォルトで自動的に遅延読み込みをサポートしています — 手動で追加する前に画像またはパフォーマンス設定を確認しましょう。
  5. 変更後、理想的には速いオフィスのWi-Fiではなく実際のモバイル接続で、ページのモバイル読み込み時間を再テストしましょう。

あなたのサイトにもこの問題がないか確認しましょう

Launch Readinessは、この問題を含む約50項目を数秒でチェックします — 無料・登録不要。

無料でチェックする