web-dev-qa-db-ja.com

明示的な画像サイズを指定すると、サイトのパフォーマンスが向上しますか?

立ち上げようとしている新しいWebアプリケーションの監査をいくつか実施しました。 Chromiumは、ネットワークの利用において、サイト上のいくつかの画像には高さ/幅の寸法が明示的に宣言されていないことを示唆しています。

これは本当にパフォーマンスに役立ちますか?ブラウザが画像の表示方法を決定する必要がなく、基本的に画像にXの高さとYの幅を使用するように指示されることを除けば、これは「ネットワーク利用率」にどのように役立ちますか?

これに関する他のコメントをいただければ幸いです!

6
Chris

個々のブラウザーのパフォーマンスのみに役立ちます。いかなる方法でもネットワークの使用率を高めることはありません。ブラウザがhtmlをレンダリングすると、オブジェクトの割り当てとスペースの割り当てが開始されます。スペースの割り当て方法に関する明示的な指示がある場合、レイアウトは解析され、画像はバックグラウンドでロードされ続けます。最新のブロードバンドダウンロード速度では、これはますます問題になりますが、それでも顕著です。画像サイズが明示的に設定されていない多くの画像(http://www.skysports.com/が例です)があるページに移動したことがある場合、画像がdomとブラウザはインターフェースを更新して新しいサイズを補正します。明示的な画像サイズ設定により、この急激な経験はなくなります。ただし、多くのCMSサイトでは、画像のサイズを常に明確に知ることができないため、この動作は避けられない場合があります。

画像のサイズがわかっている場合、そこに配置しても問題はありませんが、「実際の」ゲインも表示されない場合があります。

編集-別のテストとして、大きな画像(4MB程度?)をラップした「lorem ipsum」テキストを使用して2つの異なるページで試してみることができます。 (キャッシュされていない限り)イメージをすばやくロードできる実際の方法はないため、明示的ページと非明示的ページの表示動作に違いがあることに気付くはずです。

7
Joel Etherton

実際のパフォーマンスの向上についてはわかりませんが、ブラウザのペイント時間を短縮するのに役立ちます。これにより、ユーザーにとってアプリケーションが高速に見えます。アプリケーションがどのように認識されるかに関して、より迅速なUIを過小評価しないでください。

2
Virtuosi Media