フロントエンド - CSS 背景画像の読み込み速度を上げる方法

Question

私のページの 1 つでは、いくつかの CSS 背景設定を画像として使用しました。画像はおそらく数十 KB です。
今、初めて Web ページを開いたとき、これらの場所の読み込みが明らかに遅いです。たとえば、すべてのスタイルが読み込まれた後、画像がブラシで消去されます...
CSS の読み込みを高速化する方法、つまり、これらの画像の読み込みをページの外観と同期させる方法はありますか?ロードを待つ空白スペースを残すことなく!
私は nginx を使用しており、https と http2 を持っています...
必ずしも高速化する必要はなく、何か解決策はありますか。

Answer 1

怠けて思い切ってロードするだけです。シンプルで使いやすいです

Answer 2

画像をプリロードしてローディングレイヤーを追加すると、パフォーマンスがわずかに低下しますが、エクスペリエンスははるかに向上します

Answer 3

ページが多くの場所で使用されている場合は、最初にリクエストの数を減らし、画像をスプライト画像に処理してから、画像を圧縮することが最善です。より具体的なコードを確認するには

Answer 4

画像が大きい場合は、静的リソースを CDN に配置できます。プリロードまたは遅延ロードをお勧めします。遅延読み込みを行う場合は、不要なリフローを避けるために、CSS を使用して事前にスペースを占有することをお勧めします。また、画像が大きすぎる場合は、スプライト画像の使用はお勧めできません。

Answer 5

1. 最も遅いメソッドは、lazyload です

Answer 6

まず、スプライト画像は言うまでもありませんが、もちろんサイズも確認する必要があります。

次に、画像が配置されている領域を確認します。一部の画像が即時表示領域にない場合は、遅延読み込みを使用できます

上記の条件がいずれも満たされない場合は、画像圧縮を通じて画像サイズを縮小できます