Jak mohu povzbudit prohlížeč, aby stahoval obrázky ze souboru CSS rychleji?
Používám CSS k umístění mnoha mých obrázků (jako pozadí pro <div>) a často zjistím, že se načítají velmi pomalu tímto způsobem. Zdá se, že jsou poslední věcí, kterou načíst. Dokonce i malé malé obrázky ikon se chvíli projeví. Existuje způsob, jak určit prohlížeči obrázky jako prioritu? Nebo si ji nechte stáhnout obrázky v souboru CSS dříve a vykreslit je dříve?
CSS je pro styling, ne pro obsah. Prohlížeče (správně) zkoušejí a zobrazují obsah před přidáním stylingu, proto je důvod, proč se obrázky v seznamech stylů stahují obvykle jako poslední. Pokud jsou obrázky důležité pro vaše obsah, přidejte je pomocí standardních značek HTML <IMG>.
Použijte absolutní URI z vaší šablony stylů a přidejte obrázky ze značek IMG do skrytého <div> na stránce (předpokládá se, že na každé stránce používáte stejné obrázky; ideálně v zápatí, takže jsou všechny načteny a uloženy do mezipaměti při každém daném volání stránky).
Obrázky na stránce mají prioritu a jakmile jsou obrázky uloženy do mezipaměti, vykreslí se okamžitě na další žádosti o stránku.
V případě prohlížečů, které podporují typ URI dat (viz http://en.wikipedia.org/wiki/Data_Uri pro informace), vložte obrázek do samotného CSS.
To má však několik nevýhod:
- Data jsou znovu načtena, když je CSS, místo aby byly odděleně ukládány do mezipaměti, ale pokud se váš CSS pravidelně nemění, není to problém.
- Nedostatek dědičnosti CSS a takových prostředků může nastat časy (ztráta šířky pásma), pokud musíte zahrnout stejný graf vícekrát nebo změnit třídy použité v dokumentu.
- Obrázky jsou při použití tímto způsobem zakódovány, což znamená, že zabírají větší šířku pásma (i když problém s šířkou pásma je mnohem méně významný, pokud odesíláte komprimovaná data).
- Pro prohlížeče, které nepodporují datové URI, budete muset poskytnout alternativní styly, z nichž některé nejsou zdaleka neobvyklé (například IE6 a IE7).
Použijte CSS sprites , zejména pro ikony.
Udělejte své obrázky co nejmenší. Pomocí smush.it můžete odstranit zbytečné bajty.
Od nynějška neexistuje způsob, jak určit, které soubory stahovat jako první. FYI, obrázky určené v souborech CSS jako stahování obrázků na pozadí poslední pravděpodobně proto, že prohlížeč je vidí bez obsahu, a proto mají nižší prioritu, takže je nepoužívejte pro důležité obrázky, které chcete rychle načíst.