Test: je lepší hodně malých CSS souborů nebo jeden velký?

29. 8. 2022

Article

Best practice v době HTTP/2 velí, abychom CSS dělili do menších souborů, podle komponent a stránek. Nebude ale cena za mnoho requestů příliš vysoká?

Proč to řešit?

Pokud optimalizujeme web podle metrik Core Web Vitals, snažíme se největší prvek na stránce (LCP prvek) načíst co nejrychleji. Jde tedy o to, aby vše, co se stahuje před tímto prvkem, bylo také načteno a zpracováno co nejdříve. Zejména jde o soubory se styly a javascriptem.

Odpovědět si otázku jsme se rozhodli při jedné z optimalizací u jednoho z našich největších klientů, Livesportu.

Na webu Livesportu, konkrétně na stránce Fortuna liga, bylo v době testů 55 malých CSS souborů s celkovou velikostí 789 kB. S využitím komprese gzip během přenosu je pak do prohlížeče přeneseno 156 kB.

V této situaci se LCP prvek načetl za 3 700 ms. (Testoval jsme na Fast 3G připojení.)

Všechny soubory jsem pak spojil do jednoho a zminifikoval. Výsledný soubor jsem nalinkoval do <head> stránky a ostatní linky na CSS soubory odstranil.

Takto vypadají CSS soubory, které se na Livesportu stahují.Takto vypadají CSS soubory, které se na Livesportu stahují.

Minifikací se snížil objem dat na 655 kB, po použití Gzip komprese jsme se dostali na 96kB přenesených dat. Ušetřili jsme 54 requestů při stahování CSS souborů a zhruba ⅓ datového objemu, který je přenášen.

Po optimalizaci CSS se LCP načetl za 3 500 ms.

LCP (Largest content paint) se po náhradě 55 malých souborů za jeden velký CSS načetl na 3G připojení o 200 ms dříve.

V procentech šlo pouze o 5 % zrychlení renderingu LCP prvku.

Počet souborů Datový objem kB LCP v ms
Před úpravou 55 789 3 700
Po úpravě 1 655 3 500

Toto relativně malé zrychlení načtení LCP prvku je zde mimojiné způsobeno velkým množstvím dalších přenášených souborů, jako jsou javascripty. Do výsledného času také promlouvá jejich náročné zpracování, zejména na straně klientského prohlížeče.

Vyplatí se spojovat CSS do jednoho souboru?

Tento test ukázal, že v jednom souboru toho z pohledu rychlosti moc neušetříme. Jeden velký CSS soubor není pro LCP výrazně rychlejší než mnoho malých.

Jsou zde navíc i další faktory. Zohledňujeme zde jen zkušenost uživatele s prázdnou prohlížečovou cache. V reálném provozu ale hraje mezipaměť výraznou roli a bude výhodnější hodně malých souborů. Pokud je tedy jako vývojáři umíte invalidovat po jednom, nikoliv všechny najednou.

Na závěr ještě obecné rady k CSS. Na co si dát pozor?

  1. Pohlídejte si u všech CSS, aby ve výstupu byly co nejmenší. Vždy důsledně minifikujte.
  2. Zajistěte, aby nedocházelo k duplicitám v kódu: různé ikonky, barvičky případně celé komponenty. Často to u klientů vídáme.
  3. Promazávejte – pokud jsou CSS soubory velké zvažte refaktoring, rozdělení na komponenty, odstranění nepoužívaných (mrtvých) komponent.
  4. Zajistěte správné cachování souborů pomocí direktivy max-age.
  5. Dohlédněte, aby byla na serveru zapnuta komprese Gzip nebo Brotli.
  6. Snažte se, aby na stránce nebyly styly, které nejsou využité v HTML, na úvodní stránce nepotřebujeme styly pro nákupní proces
  7. Styly mimo první viewport můžete načíst líně, např. pomocí JS.

Více o optimalizaci CSS psal také Martin Michálek na Vzhůru dolů nebo Harry Roberts.

Radek Šír

Radek ŠírKonzultant rychlosti a seniorní vývojář v SUPERKODERS s letitým zkušenostmi ze všech koutů frontendu.

Jak je rychlý váš web?

Jak rychlý je váš web v porovnání s vaší konkurencí? To zjistíte
pomocí našeho online testeru.

Další související články k tématu

Srovnejte si to v <head>

21. 10. 20212 minuty čtení

Srovnejte si to v <head>

Máme rádi WebExpo a máme rádi performance. A navíc máme rádi Harryho Robertse, protože jeho přednášky a články jdou vždy do hloubky.Číst dále

Nejčastější chyby, které kazí Web Vitals

12. 7. 20219 minut čtení

Nejčastější chyby, které kazí Web Vitals

Nedávno jsem měla příležitost přednášet na historicky první české frontendové konferenci. Jelikož je rychlost webů téma, kterým se aktuálně zabývám dennodenně, téma přednášky bylo jasné.Číst dále

Psychologie, konverze a Google. Proč byste měli i vy mít rychlý web?

15. 10. 20209 minut čtení

Psychologie, konverze a Google. Proč byste měli i vy mít rychlý web?

Na rychlosti webu záleží. Nejen proto, že to říká Google.Číst dále