Front-end - Bagaimana untuk mempercepatkan kelajuan memuatkan imej latar belakang css

Question

Dalam salah satu halaman saya, saya menggunakan beberapa tetapan latar belakang css sebagai imej Saiz imej mungkin berpuluh-puluh K..
Sekarang apabila saya membuka halaman web buat kali pertama, tempat-tempat ini jelas lambat dimuatkan, dan ia kelihatan seperti. semua gaya hilang. Selepas memuatkan, gambar dipaparkan
Adakah ada cara untuk mempercepatkan pemuatan css dengan kata lain, biarkan gambar ini dimuatkan dan kelihatan lebih segerak dengan halaman, tanpa meninggalkan ruang kosong menunggu untuk dimuatkan. !
Saya menggunakan nginx dan ia adalah https dan http2...
Adakah ada penyelesaian, tidak semestinya pecutan.

Answer 1

Cukup malas dan muatkan dengan tegas, ia mudah dan mudah digunakan

Answer 2

Pramuat imej dan tambah lapisan pemuatan, prestasi berkurangan sedikit, tetapi pengalamannya jauh lebih baik

Answer 3

Jika halaman digunakan di banyak tempat, anda boleh mengurangkan jumlah permintaan, memproses imej menjadi imej sprite, dan kemudian memampatkan imej, sebenarnya, ia masih menjadi masalah menganalisis masalah tertentu untuk melihat kod yang lebih spesifik

Answer 4

Sumber statik boleh diletakkan pada CDN Jika imej besar, pramuat atau pemuatan malas disyorkan. Apabila malas memuatkan, disyorkan untuk menggunakan css untuk menduduki ruang terlebih dahulu untuk mengelakkan pengaliran semula yang tidak perlu. Nota lain: Jika imej terlalu besar, tidak disyorkan untuk menggunakan imej sprite.

Answer 5

1. Kaedah paling malas ialah lazyload

Answer 6

Pertama sekali, tidak perlu dikatakan imej sprite, anda juga perlu melihat saiznya

Kedua, lihat kawasan di mana gambar terletak Jika beberapa gambar tidak berada di kawasan tontonan segera, anda boleh menggunakan lazy loading

Jika tiada syarat di atas dipenuhi, anda boleh mengurangkan saiz imej melalui pemampatan imej