私のページの 1 つでは、いくつかの CSS 背景設定を畫像として使用しました。畫像はおそらく數十 KB です。
今、初めて Web ページを開いたとき、これらの場所の読み込みが明らかに遅いです。たとえば、すべてのスタイルが読み込まれた後、畫像がブラシで消去されます...
CSS の読み込みを高速化する方法、つまり、これらの畫像の読み込みをページの外観と同期させる方法はありますか?ロードを待つ空白スペースを殘すことなく!
私は nginx を使用しており、https と http2 を持っています...
必ずしも高速化する必要はなく、何か解決策はありますか。
6
0
0
畫像をプリロードしてローディングレイヤーを追加すると、パフォーマンスがわずかに低下しますが、エクスペリエンスははるかに向上します
ページが多くの場所で使用されている場合は、最初にリクエストの數を減らし、畫像をスプライト畫像に処理してから、畫像を圧縮することが最善です。より具體的なコードを確認するには
畫像が大きい場合は、靜的リソースを CDN に配置できます。プリロードまたは遅延ロードをお勧めします。遅延読み込みを行う場合は、不要なリフローを避けるために、CSS を使用して事前にスペースを占有することをお勧めします。また、畫像が大きすぎる場合は、スプライト畫像の使用はお勧めできません。
まず、スプライト畫像は言うまでもありませんが、もちろんサイズも確認する必要があります。
次に、畫像が配置されている領域を確認します。一部の畫像が即時表示領域にない場合は、遅延読み込みを使用できます上記の條件がいずれも満たされない場合は、畫像圧縮を通じて畫像サイズを縮小できます
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
