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
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
Nové diskuze
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

Co píší na Interval.cz
@maxiorel na Twitteru

Maxiorel na Twitteru