Úvod

O mně

Služby

Reference

Kvíz – archetyp podnikatele

Blog

Kontakt

Služby

Tvorba webů

Pronájem webů

Údržba webů

Podpora při tvorbě webu svépomocí

Individuální konzultace

Kurz: Vylepšete svůj web teď hned

Kurz: Tvorba webu od A do Z s Divi

Kurz v přípravě. Přihlásit se

ONEBIT hosting nyní nabízí slevu
na všechny balíčky až 40 %

Vrátit se do Blogu

Kategorie: Divi
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).

Děláte si web svépomocí?
Přidejte se do Facebookové komunity

Podporující a příjemná atmosféra s dalšími lidmi, kteří řeší stejné otázky jako vy. Probíráme vše v rámci podnikání a tvorby webu.

Další články

20% TAJNÁ sleva na Divi šablonu BEZ ČASOVÉHO OMEZENÍ

20% TAJNÁ sleva na Divi šablonu BEZ ČASOVÉHO OMEZENÍ

Táto nabídka se nikde nepropaguje, není na očích. Získala jsem pro vás možnost si pořídit Divi za zvýhodněnou slevu 20 % bez časového omezení. Pro získání tajné slevy mě kontaktujte Co všechno získáte: Šablonu DiviPlugin Divi builder (to moc nevyužijete, ale máte to...

číst více
Onebit hosting: Skvělá volba pro váš web

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? JednoduchostCo opravdu nesnáším je zastaralost a složitost. Onebit má...

číst více
Získejte Divi s 20% letní slevou! Končí 1.9.2020

Získejte Divi s 20% letní slevou! Končí 1.9.2020

Máme tady další slevu na Divi. Získejte tuto šablonu s 20% slevou (anebo si počkáte na Black Friday?). Získáte: Šablonu Divi Plugin Divi builder (to moc nevyužijete, ale máte to také)Extra šablona (opuštěný synek vývojářů, ale dostačuje pro magazínové weby)100+...

číst více