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