CSS (Cascading Style Sheets) alias kaskádové styly jsou dnes už neodmyslitelnou součástí designu webových stránek. Bez něj by bylo prakticky nemyslitelné udělat zajímavý design anebo dobře fungující UI. Ačkoliv by se zdálo, že tyto poměrně malé soubory, mají jen minimální dopad na rychlost stránek opak je pravdou. Zvláště u webů, které jsou poskládány s většího množství elementů, mohou dopomoct k výraznému zrychlení.
Vyhněte se používání @import
CSS @import umožňuje jednomu souboru s CSS vložit jiný soubor s CSS. Ačkoliv to na první pohled vypadá lákavě, mít připraveno více souborů a ty postupně seskládat podle potřeby, tak to působí prohlížeči návštěvníka značné problémy. Důvod je jednoduchý. Internetový prohlížeč neumí paralelně stahovat jak externí soubor s CSS tak ten importovaný. Takže se čeká na externí soubor a teprve až je ten stažený, tak se pokračuje s tím importovaným.
S tím jsou samozřejmě spojené všechny náklady na přenos – dotaz na DNS (pokud se nachází na jiné doméně), odeslání dat (to je 0ms), počkání na soubor a jeho následný příjem. Dále je to ještě kompilace prohlížečem a vykreslení.
Místo importování jednoduše vložte obsah do externího CSS rovnou a pokud to nejde, tak na druhý CSS vložte odkaz na samotnou stránku.
Poskládejte co nejvíce CSS souborů dohromady
Občas se stane, že na stránku musíte vložit více externích CSS souborů. Jenomže jakmile jich je více, tak nastává problém s paralelním stahováním. Prohlížeč má omezené množství „vláken“ na stahování z jedné domény a pak celkový počet. Liší se to prohlížeč od prohlížeče.
Pokud mu chcete ulehčit práci neváhejte a nakombinujte do jednoho co to jen jde. Ideální množství se doporučuje 2 – 3 CSS soubory na stránku. Nezapomínejte, že spousta externích skriptů má vlastní soubory s CSS, například tlačítka sociálních sítí anebo textová reklama dodaná třetí stranou. Většinou jsou schovány ve vkládaném javascriptu.
Komprese CSS
Komprese zdrojových kódů (odstranění přebytečných částí) je starý a stále oblíbený trik. Na jednu stranu se může zdát, že pokud dáte pryč například mezery anebo komentáře, tak to zas tak velký rozdíl nebude, ale když se přepočtou ušetřené bajty za měsíc, tak se dostanete k zajímavým číslům. Navíc v dnešní době se hodně plýtvá a zvláště uživatelé mobilních zařízení a lidé spoléhající se na různé free wifi vám poděkují.
Takzvané minifi CSS se důsledně věnuje i Google, který se snaží naučit developery neplýtvat prostředky, tam kde to není nutné. Oblíbená je knihovna CSSmin.js. K dispozici je i online demo, kde si můžete vyzkoušet procentuální efektivnost.
Odstranění nepoužívaných stylů
Jedním ze základních doporučení je odstranění z CSS souborů všechny styly, které nejsou na stránce potřebné. Možná se to zdá jako maličkost, vždyť ten historicky nepotřebný styl už toho moc nezabere. Ale zkusme se nad tím zamyslet.
Než začne vůbec internetový prohlížeč vykreslovat stránku, musí poctivě stáhnout úplně všechny CSS styly v externích souborech. Ty pak musí jeden po druhém parsovat. Nezáleží přitom jestli je externí CSS stahováno ze serveru anebo uloženo v cache na lokálním disku. Prostě se musí nahrát. Pak prohlížeč poctivě projde jeden styl za druhým a vyhodnocuje jestli pravidlo v něm se na stránku vztahuje anebo ne. To všechno stojí výkon a čas.
Prakticky většina webů toto vůbec neřeší. Mají všechny styly v jednom externím souboru a ten používají. Často přitom obsahuje styly jak pro web tak i pro administraci, kam mají přístup jen registrovaní uživatelé. To jsou spousty zbytečných dat, které se musí stáhnou a parsovat.
Šetřte výkon, odstraňuje nepoužívané styly a rozlišujte zdali opravdu všechny styly jsou potřeba.
Všechny odkazy na CSS soubory dejte do hlavičky stránky
Tohle je oblíbená chyba nováčků. Místo umístění stylů na jedno místo, prostě použijí přímo v body stránky <style>. Jistě je to jednoduché řešení, které se v ten okamžik jeví jako nejlepší, ale opak je pravdou. Čas který ušetří, pak odnese prohlížeč návštěvníka.
Jak už bylo zmíněno v předchozím odstavci při vykreslování stránky se čeká na všechny styly. Ovšem některé prohlížeče, když narazí v body na style, mohou stránku začít vykreslovat znovu anebo dojde k posouvání či přeskupování elementů.
Řeší se to jednoduše. Všechny style se dají do hlavičky (<head>) anebo do externího souboru.
