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

Jedna z posledních verzí webového prohlížeče Chrome obsahuje funkci umožňující snadno vyhodnotit, která CSS pravidla v jednotlivých souborech se styly váš web vůbec nepoužívá. Díky tomu jste tak teoreticky schopni svoje CSS optimalizovat a ušetřit něco na velikosti webové stránky.

Reklama

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í.

Chrome a funkce Coverage

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:

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:

Tagy: 

Přidat komentář