Tarayıcıyı CSS dosyasından resimleri daha hızlı indirmesi için nasıl teşvik edebilirim?

Görüntülerimin çoğunu (arka plan olarak <div>) yerleştirmek için CSS kullanıyorum ve genellikle bu şekilde çok yavaş yüklendiklerini görüyorum. Yüklenen son şey gibi görünüyorlar. Küçük simge görüntülerin bile bu şekilde görünmesi biraz zaman alıyor. Tarayıcıya görüntüler için öncelik vermenin bir yolu var mı? Veya daha önce CSS dosyasındaki görüntüleri indirip daha önce oluşturmasını mı istiyorsunuz?

CSS içerik için değil stil için. Tarayıcılar (haklı olarak) stil eklemeden önce içeriği denemeyi ve görüntülemeyi dener, bu nedenle stil sayfalarındaki görüntülerin genellikle en son indirilme nedenidir. Görüntüler içeriğiniz için önemliyse, bunları standart HTML <IMG>etiketleri aracılığıyla ekleyin .

Stil sayfanızdaki mutlak URI'leri kullanın ve IMG etiketlerinden resimleri gizli bir <div>sayfaya ekleyin (bu, her sayfada aynı resimleri kullandığınızı varsayar; ideal olarak altbilgide, böylece belirli bir sayfa çağrısına yüklenir ve önbelleğe alınır ).

Sayfadaki görüntüler öncelik kazanır ve resimler önbelleğe alındıktan sonra, sonraki sayfa isteklerinde hemen oluşturulur.

Görüntüyü CSS'ye dahil etmek için veri URI türünü destekleyen tarayıcılar için (bkz. Http://en.wikipedia.org/wiki/Data_Uri ).

Ancak bunun birkaç dezavantajı vardır:

• Veriler, CSS'niz ayrı ayrı önbelleklenmek yerine yeniden yüklenir, ancak CSS'niz düzenli olarak değişmedikçe bu çok da sorun değildir.
• CSS'nin kalıtım eksikliği ve bu gibi araçlar, aynı grafiği birden çok kez eklemeniz veya belgenizde kullanılan sınıfları değiştirmeniz gerektiğinde zamanlar (bant genişliğini harcayan) olabilir.
• Görüntüler bu şekilde kullanıldığında base64 olarak kodlanır, bu da daha fazla bant genişliği aldıkları anlamına gelir (sıkıştırılmış veri gönderiyorsanız bant genişliği sorunu çok daha az önemlidir).
• Veri nadiren çok uzak olan veri URI'lerini desteklemeyen tarayıcılar için alternatif stiller sağlamanız gerekir (örneğin IE6 ve IE7).

Şu andan itibaren ilk olarak hangi dosyaların indirileceğini belirtmenin bir yolu yoktur. FYI, CSS dosyalarında arka plan görüntüleri olarak belirtilen görüntüler en son indirilir çünkü tarayıcı onları içeriksiz ve dolayısıyla daha düşük bir öncelik olarak görür, bu yüzden bunları hızlı bir şekilde yüklemek istediğiniz önemli görüntüler için kullanmaktan kaçının.

Özellikle simgeler için CSS sprite kullanın .

Resimlerinizi mümkün olduğunca küçük yapın. Gereksiz baytları kaldırmak için smush.it komutunu kullanabilirsiniz .