Bagaimana saya bisa mendorong browser untuk mengunduh gambar dari file CSS lebih cepat?

Saya menggunakan CSS untuk menempatkan banyak gambar saya (sebagai latar belakang untuk <div>) dan saya sering menemukan bahwa mereka memuat sangat lambat dengan cara ini. Mereka tampaknya menjadi hal terakhir yang dimuat. Bahkan gambar ikon kecil kecil membutuhkan waktu untuk muncul dengan cara ini. Apakah ada cara untuk memberi tahu browser prioritas untuk gambar? Atau dapatkan untuk mengunduh gambar dalam file CSS sebelumnya dan membuatnya lebih awal?

CSS untuk penataan, bukan konten. Browser (benar) mencoba dan menampilkan konten sebelum menambahkan gaya, maka alasan mengapa gambar dalam style-sheet biasanya diunduh terakhir. Jika gambar penting untuk konten Anda maka tambahkan melalui <IMG>tag HTML standar .

Gunakan URI absolut dari stylesheet Anda dan tambahkan gambar dari tag IMG ke tersembunyi <div>di halaman (ini mengasumsikan Anda menggunakan gambar yang sama di setiap halaman; idealnya di footer sehingga semuanya dimuat dan di-cache pada setiap panggilan halaman yang diberikan ).

Gambar pada halaman mendapatkan prioritas dan, setelah gambar di-cache, mereka akan membuat segera pada permintaan halaman berikutnya.

Untuk browser yang mendukung tipe data URI (lihat http://en.wikipedia.org/wiki/Data_Uri untuk info) untuk memasukkan gambar dalam CSS itu sendiri.

Ini memiliki beberapa kelemahan:

• Data dimuat ulang saat CSS, bukannya di-cache secara terpisah, meskipun kecuali jika CSS Anda berubah secara teratur, ini bukan masalah besar.
• Kurangnya pewarisan CSS dan artinya mungkin ada waktu (buang-buang bandwidth) ketika Anda harus memasukkan grafik yang sama beberapa kali atau mengubah kelas yang digunakan dalam dokumen Anda.
• Gambar-gambar tersebut dienkode base64 ketika digunakan dengan cara ini yang berarti mereka mengambil lebih banyak bandwidth (meskipun masalah bandwidth jauh lebih kecil jika Anda mengirim data terkompresi).
• Anda harus memberikan gaya alternatif untuk browser yang tidak mendukung URI data, beberapa di antaranya jauh dari biasa (misalnya IE6 dan IE7).

Sampai sekarang tidak ada cara untuk menentukan file mana yang diunduh terlebih dahulu. FYI, gambar yang ditentukan dalam file CSS sebagai unduhan gambar latar belakang terakhir mungkin karena browser melihatnya non-konten dan dengan demikian prioritas yang lebih rendah jadi hindari menggunakannya untuk gambar penting yang ingin Anda muat dengan cepat.

Gunakan sprite CSS , terutama untuk ikon.

Jadikan gambar Anda sekecil mungkin. Anda dapat menggunakan smush.it untuk menghapus byte yang tidak perlu.