Jak rychle zjistit, které CSS váš web nepoužívá a optimalizovat tak rychlost načítání

Způsobů, jak zrychlit načítání webové stránky, je celá řada. Od zlepšení jejího kódu, přes optimalizaci na straně serveru, až po úpravu obsahu odesílaného ze serveru do prohlížeče. Do něj patří i JavaScript a CSS.

Zejména u webů postavených na šablonách je CSS velice nabobtnalé. Má to jednoduchý důvod – tvůrci šablon je chtějí udělat co nejuniverzálnější, aby oslovili co nejvíce uživatelů a prodali co nejvíce kopií dané šablony. Výsledkem je pak neoptimalizovaný kód, z něhož se na vašem konkrétním webu nakonec využívá jen zlomek věcí.

S pomocí webového prohlížeče Chrome si můžete rychle ověřit, kolik nevyužívaného kódu CSS (nebo i JavaScriptu) na svém webu máte:

1. Otevřete si nástroje pro vývojáře, například klepnutím pravým tlačítkem myši a volbou Prozkoumat. Totéž případně najdete v programovém menu Chromu, kde zjistíte i klávesovou zkratku.
2. Dále vyvolejte nabídku příkazů, a to klávesovou zkratkou Ctrl+Shift+P v případě Windows a Linuxu, nebo Cmd+Shift+P na Macu.
3. V této nabídce vyhledejte položku Show coverage. Stiskem Enteru ji otevřete jako novou záložku ve vývojářské liště.
4. Klepněte na nahrávací tlačítko v rohu a projděte jednotlivé stránky na svém webu. Všechny, to je důležité. Navštívením pouze titulky by analýza nebyla k ničemu, protože řadu prvků v CSS máte obvykle v jednom souboru, zatímco odpovídající HTML, které je v CSS popsáno, je na různých podstránkách webu. Po proklikání nahrávání stejným tlačítkem ukončete.
5. Nyní vidíte přehled načtených zdrojů se znázorněním nevyužitých funkcí JavaScriptu či pravidel v CSS. Využijte filtrování, abyste zobrazili jen svoje zdroje, a nikoli například věci z Facebooku či Map Google.
6. Poklepáním na vybraný zdroj jej otevřete v nové záložce. Nevyužívané části v něm budou červeně označeny.

Mějte na paměti, že pořád je to jenom automatická kontrola a ne vše, co je označeno jako nevyužívané, má smysl mazat. Například u webového magazínu, který má definován vzhled pro značku audio nebo video, nemusíte vložená média aktuálně používat, ale to se může změnit v dalším článku. A pak takové styly budete potřebovat.

Než se tedy pustíte do úprav svých stylů, zapojte trošičku selský rozum. Každopádně je tento audit využívaných zdrojů další užitečnou pomůckou, kterou Chrome nabízí.

Dáváte-li před čtením přednost videu a názorné ukázce, máte možnost: