
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
29. 8. 2022
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á?
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í.
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.
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.
max-age
.Více o optimalizaci CSS psal také Martin Michálek na Vzhůru dolů nebo Harry Roberts.
Radek ŠírKonzultant rychlosti a seniorní vývojář v SUPERKODERS s letitým zkušenostmi ze všech koutů frontendu.
Jak rychlý je váš web v porovnání s vaší konkurencí? To zjistíte
pomocí našeho online testeru.
21. 10. 20212 minuty čtení
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
12. 7. 20219 minut čtení
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
15. 10. 20209 minut čtení
Na rychlosti webu záleží. Nejen proto, že to říká Google.Číst dále