PurifyCSS – jak odstranit nepoužívané CSS

Hedviga Nosáľová | 25. 1. 2021

Tohle je doplnění článku Divi: ultimátní návod na optimalizaci rychlosti. Protože se ve skupině množí dotazy, jak přesně provést odstranění nepoužívaného CSS, pokusím se udělat návod. Hned zkraje napíšu, že ANO, musíte používat child themu a ANO musíte vložit kód, který bude brát v potaz jen ten purifikovaný soubor CSS.

Dávám na vědomí, že nejsem programátor a nedělám si vlastní kódy. Umím upravit existující snippety a přizpůsobit si je, ale pokud něco neumím, ptám se na programátorských fórech, a podobně. Tak se mě prosím neptejte, pokud vám to nepůjde : D. Mě tento postup funguje.

Upozornění předem

  • Udělejte si zálohu webu
  • ALE Nejlépe to nejdřív otestujte na dev subdoméně, nikdy nevíte, co se může stát..

Odstraňuji zbytečné CSS ručně?

Ne. Už ne. Díky pluginům tento problém mám vyřešený za méně času (je to opravdu „drbačka“). Pokud se stane, že mi svítí v nástrojích „Odstraňte nepoužívané CSS“, většinou se jedná o zbytečky z optimalizačních pluginů, a pokud je to do 0,2s, tak to neřeším.

Nebudu opakovat, co zaznělo ohledně PurifyCSS v článku, tak se rovnou vrhneme na aplikaci:

1. Nahrajte soubor z purifyCSS

Čistý kód z nástroje zkopírujte a vložte do nového souboru. Pojmenujte jej styles.pure.css. Nahrajte do childky.

2. Musí se odebrat existující šablona stylů

Musíte odstranit z webu všechny odkazy na šablonu(y) stylů. Do functions.php:

3. Musí být odstraněné všechny styly – otestujte

Otevřete URL svého webu s připojeným parametrem ?purifytest a měl by se zobrazit pouze nezpracovaný obsah. Otevřete prohlížeč zdrojového kódu a ujistěte se, že nezbývá žádný <link rel="stylesheet" ...> a žádný <style>...</style>blok.

4. Odstraňte vložené styly, pokud existují

Projděte HTML, které se má vykreslit, a odstraňte vložené styly pomocí regulárních výrazů. Abychom zachytili celý HTML, musíme provést řešení s výstupní vyrovnávací pamětí. Do functions.php:

5. Zařaďte vyčištěný CSS do fronty

Jak to otestovat

f12 (v Chrome) a filtrujte podle stylů nebo css. Po obnovení stránky uvidíte, které soubory byly načtené.

Kritické CSS

U kritických CSS budete muset vložit vygenerovaný kritický kód CSS mezi značky <style>… </style> v části <head>, zatímco odkaz na zbytek CSS, např. Cesta <link rel = ” /to/style.css ”> musí jít do footer.php.

Co se může pokazit

Všechno. Ono záleží na tom, jaké další pluginy používáte. Každý web je jiný. Je tedy důležité to raději dělat na testovacím webu (okopírujte web, na který chcete tento návod vyzkoušet i se všemi pluginy). A občas se stane, že výsledek ani nestojí za ten vynaložený čas. Já používám Clearfy, Booster Pack, nebo WP Optimize (fce Minify).

Rubriky v blogu

Divi využívám pro 99 % projektů mých klientů a mohu ji doporučit každému. Píšu o zajímavých tématech ohledně této šablony.

Články na různá témata týkající se tvorby webu.

Vytvářím si vlastní knihovnu různých kódů, které jsou užitečné pro tvorbu webů.

Novinka

Slevy a akce

Akce a doporučení na hostingy, šablony, pluginy, nástroje, kurzy. Vše, co se podnikatelům hodí.

Facebook skupiny

Jediná a největší poradna čiště pro Divi na našem území. Jsem moderátorem.

Zajímavé informace ohledně tvorby webu a podnikání. Tipy, nástroje, poradna. Jsem adminem.

Onebit hosting: Skvělá volba pro váš web

Ano, Onebit hosting miluju! A protože vím, že téma hostingu řeší téměř každý, ráda bych tento článek věnovala jednomu, který využívám pro 98 % webů mých klientů. Proč jsem si oblíbila Onebit? Administrace webhostingu JednoduchostCo opravdu nesnáším...

číst více