Spoločnosť Perfmatters pridala 19. januára do verzie 1.8.5 novú funkciu na odstránenie nepoužívaného CSS. Nikdy ma neomrzí odporúčať tento doplnok, ktorý sa stal povinnou výbavou, ak chcete zlepšiť výkon svojho blogu.
Za krátkych 25 dolárov ročne ponúka výkonný nástroj, ktorý neustále vylepšujú. Sprievodca konfiguráciou je k dispozícii tu.
Už som to testoval na WordPress 5.8 a 5.9-RC a zatiaľ sa nič nepokazilo. Aj keď som už mal CSS bez použitia veľmi kontrolované cez Správcu skriptov tohto pluginu, len aktiváciou tejto možnosti môžete ušetriť aspoň pár požiadaviek a nejaké Kb.
Prečo odstrániť nepoužívané CSS?
Obvyklé varovania PageSpeed"Odstrániť nepoužívaný CSS" alebo"Znížiť nepoužívaný obsah CSS" sa zvyčajne zobrazujú, keď CSS načítaný zásuvným modulom alebo šablónou nie je potrebný alebo sa na konkrétnej stránke nepoužíva.
Vývojári zvyčajne zapisujú súbor štýlov len vtedy, ak sa používa. Mnohokrát sa však pridávajú aj ďalšie štýly, ktoré nemusia byť potrebné. Výsledkom je veľa nepoužívaných štýlov CSS, čo spomaľuje načítavanie.
Niekedy môže tiež vyvolať upozornenia"Odstrániť prostriedky, ktoré blokujú vykresľovanie".
Odstránenie nepoužívaného CSS má okrem lepšieho skóre PageSpeed veľký vplyv na skrátenie času, ktorý trvá od začiatku načítavania stránky do vykreslenia akejkoľvek časti obsahu stránky na obrazovku(FCP), času, ktorý je potrebný na stiahnutie hlavného obsahu webovej stránky a jeho úplnú pripravenosť pre používateľa(LCP), a času od začiatku načítavania stránky do jej úplnej interaktivity(TTI). Skrátka, viete, dôležitá časť príbehu Core Web Vitals.
Ako nájsť nepoužívané CSS?
Najjednoduchší spôsob, ako nájsť nepoužívané CSS, je otestovať adresu URL pomocou PageSpeed. Ak je tam nepoužité CSS, zobrazí sa upozornenie, ktoré sa spustí len vtedy, ak je nad hranicou toho, čo Google považuje za dostatočne dôležité na upozornenie, takže ak je vnímaná rýchlosť načítavania (skutočná rýchlosť, ktorú zažívate) dobrá, príliš sa na ňu neupínajte.
Ďalším spôsobom, ako nájsť nepoužívané CSS, je použiť nástroje Chrome DevTools. Otvorte inšpektor v prehliadači Chrome (Ctrl+Shift-I), stlačte Shitft+Control+P, napíšte "Coverage" a tam nájdete nepoužité bajty pre CSS aj JS. Červenou farbou sú označené nepoužité a modrou/zelenou farbou použité.
Odtiaľto a s vedomím, že poznáte každý CSS, čo robí a či ho môžete odstrániť alebo zakázať na stránke, na ktorej meriate, existuje niekoľko možností, ako napríklad nahradenie určitých zásuvných modulov inými ľahšími, preskúmanie alebo zváženie zmeny šablóny, použitie správcu skriptov na selektívne zakázanie JS a CSS atď.
Najjednoduchší spôsob, ako odstrániť varovania PageSpeed, je aktivovať funkciu"Odstrániť nepoužívané CSS" v aplikácii Perfmatters, ktorá to urobí automaticky. Tvrdia, že ju otestovali na stovkách adries URL (s rôznymi šablónami a konfiguráciami) a uvádzajú tieto výsledky:
Priemerný pokles FCP o 15,20 %.
Priemerný pokles LCP o 19,66 %.
Priemerné zníženie TTI o 14,95 %.
Pred aktiváciou
Spoločnosť Perfmatters odporúča, aby ste pred povolením tejto možnosti odstránili všetky existujúce prednačítania CSS, ktoré boli nakonfigurované v spoločnosti Perfmatters (okrem lokálnych súborov štýlov Google Fonts), a NEZLÚČOVALI CSS.
Zlúčenie CSS je od protokolu HTTP/2 zastaraná optimalizačná technika. V niektorých prípadoch môže byť zlučovanie CSS dokonca na škodu výkonu. Opäť pamätajte, že každá stránka sa bude správať inak v závislosti od jej konfigurácie a najlepšie je testovať a pozorovať, kým nenájdete najlepší bezchybný výsledok pre váš prípad.
Mali by ste si tiež uvedomiť možné konfigurácie iných výkonnostných alebo vyrovnávacích zásuvných modulov, ktoré môžete používať a ktoré môžu byť v konflikte alebo sa navzájom potláčať tým, že majú povolené rovnaké funkcie.
Po aktivácii nájdete dve možnosti s dvoma nastaveniami:
1 - Použitá metóda CSS
1.1- Inline (predvolené): použité CSS sa zobrazí zarovnané nad záhybom v zdrojovom kóde stránky. Táto možnosť je najlepšia pre skóre PageSpeed.
1.2 -Súbor: použitý CSS je umiestnený v samostatnom súbore štýlov CSS. Táto možnosť je najlepšia pre používateľa a vnímaný výkon, pretože súbor sa môže pri opakovaných návštevách ukladať do vyrovnávacej pamäte a znižuje veľkosť dokumentu HTML.
2 - Správanie listu štýlu
2.1- Oneskorenie (predvolené a odporúčané).
Vaše súbory CSS boli inline a všetky súbory štýlov CSS (nepoužité súbory CSS) sa oneskorujú a načítavajú sa pri interakcii s používateľom.
2.2- Asynchrónne
Použité súbory CSS sa konvertujú na inline a všetky súbory štýlov CSS (nepoužité súbory CSS) sa načítajú asynchrónne. Táto metóda môže pomôcť vyhnúť sa pop-in, pretože súbory štýlov sa vykonávajú asynchrónne počas načítavania stránky. Táto metóda bude mať za následok mierne vyššie LCP/FCP ako predchádzajúce správanie s oneskorením.
2.3- Odstrániť
Použité súbory CSS sa stanú inline a všetky pôvodné súbory štýlov CSS (nepoužité súbory CSS) sa odstránia. Toto je najagresívnejšia metóda, ale pravdepodobne si bude vyžadovať aj pridanie výnimiek. Odporúča sa len pre pokročilých používateľov.
Po aktivácii sa stránky a záznamy budú správať inak.
Stránky majú tendenciu obsahovať veľa jedinečných súborov CSS, a preto sa použité súbory CSS vygenerujú a vložia do riadkov samostatne pre každú stránku pri prvej návšteve.
Keďže však záznamy majú tendenciu zdieľať veľa CSS, použité CSS sa vygeneruje len raz, pri prvej návšteve, a stane sa inline. Rozdiel záznamov v porovnaní so stránkami spočíva v tom, že generovanie použitého CSS sa uskutoční len raz.
Všetky použité CSS vygenerované aplikáciou Perfmatters budú uložené lokálne v tejto ceste:
/wp-content/cache/perfmatters/tudominio.com/css/
Takto vyzerá CSS vygenerované aplikáciou Perfmatters pre stránky, príspevky, kategórie, značky, vyhľadávanie, domovskú stránku alebo 404.
V poli"Vylúčené súbory štýlov" môžete vylúčiť konkrétne súbory štýlov z funkcie "Odstrániť nepoužívané CSS" pridaním celej zdrojovej adresy URL(loquesea.css) alebo pridaním jednej časti zdrojovej adresy URL. Formát: jeden na riadok.
V nasledujúcom poli"Vylúčené selektory" môžete z funkcie "Odstrániť nepoužívané CSS" vylúčiť konkrétne selektory CSS (selektory) pridaním id prvku, názvu triedy atď. (#id, .class). Formát: jeden na riadok.
Je pravdepodobné, že v určitom okamihu budete musieť odstrániť použité CSS. Napríklad po zmene dizajnu stránky alebo po pridaní nového prvku. Ak chcete vymazať vygenerované CSS a nechať ho po ďalších návštevách znovu vytvoriť, jednoducho kliknite na možnosť v spodnej časti"Vymazať použité CSS".
Môžete vylúčiť jednotlivé príspevky, stránky alebo vlastné typy príspevkov z používania funkcie Odstrániť nepoužívané CSS. V editore na pravej strane zrušte začiarknutie políčka"Nepoužité CSS".
Tým sa vylúči celá stránka a môže to byť užitočné napr. pre stránku s košíkom, pokladňou alebo kontaktom, ktorá môže mať viac problémov ako zvyšok stránky.
Môžete tiež použiť filter perfmatters_remove_unused_css na zmenu miesta, kde sa na vašej stránke odstráni nepoužívané CSS. Tento príklad by zakázal nepoužívané CSS len na stránkach.
add_filter('perfmatters_remove_unused_css', function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});
