Optimalizovat kritické CSS svého webu WordPress pomocí LWSOptimize

Procédure

Kritické CSS umožňuje rychleji zobrazit viditelný obsah vašich stránek. Když návštěvník otevře stránku, jeho prohlížeč musí nejprve stáhnout různé soubory (obrázky, skripty, CSS styly atd.). [PERSON_NAME] jsou [PERSON_NAME], zobrazení může být zpožděno. S Kritickým CSS se styly nezbytné pro okamžité zobrazení stránky načítají přednostně. Zbytek stylů se načítá následně na pozadí.

Proč jej používat?

Aktivace Kritického CSS může zlepšit rychlost zobrazení vašeho webu, zejména na mobilu nebo při pomalém internetovém připojení.

Nejběžnější přínosy jsou:

• Rychlejší zobrazení hlavního obsahu stránky.

• Lepší uživatelská zkušenost.

• Potenciální zlepšení výkonnostních ukazatelů, jako je LCP (Largest Contentful Paint).

V závislosti na konfiguraci webu může pozorovaný přínos dosáhnout několika stovek milisekund.

Aktivace Kritického CSS

WordPress v tuto chvíli nenabízí optimalizaci CSS stránek a příspěvků. [PERSON_NAME], pro tento účel existují desítky různých pluginů WordPress, včetně pluginu LWS Optimize, vytvořeného společností LWS.

Ve výchozím nastavení je tato možnost u něj vypnuta, protože prodlužuje dobu generování cache, [PERSON_NAME] ještě více, pokud stránka načítá velké množství CSS souborů, a v ojedinělých případech může způsobovat problémy se zobrazením.
Pro její aktivaci přejděte do panelu LWS Optimize a poté zde zvolte nastavení Maximum a uložte; [PERSON_NAME] akcí pluginu, včetně Kritického CSS.

[PERSON_NAME] chcete aktivovat pouze Kritické CSS, můžete také přejít do pokročilých nastavení, v sekci Front-End, kde najdete řádek Kritické CSS.

Po zaškrtnutí možnosti budete vyzváni k výběru mezi 3 režimy fungování: Auto - místně, Auto a Ruční. Jakmile provedete volbu, uložte změny, [PERSON_NAME] Kritické CSS a vyprázdní aktuální cache.

Každý režim má jiné fungování:

• Auto — lokální generování

Jde o výchozí režim pluginu; CSS stránek je analyzováno a poté zpracováno PHP vašeho webu, čímž se přímo generuje Kritické CSS. Výhodou je, že funguje zcela lokálně a je poměrně rychlý, ale na druhou stranu spotřebovává více zdrojů na serveru než druhý režim. Přesto je doporučen pro většinu webů.

Pokud výkon vašeho hostingu [PERSON_NAME], [PERSON_NAME] způsobovat zpomalení pro vaše návštěvníky během generování CSS. [PERSON_NAME], výkon se může po dobu generování zhoršit.

• Auto — služba LWS

Tento režim využívá službu LWS pro generování kritického CSS. Je o něco pomalejší než lokální generování, zejména pokud je generovací API přetížené, jeho hlavní výhodou však je, že veškeré generování probíhá mimo server, což nabízí mnohem lepší výkon než lokální generování. Při velkém vytížení však může být generování nedostupné, takže není tak spolehlivé jako lokální režim.

V případě dočasné nedostupnosti služby se plugin automaticky přepne na lokální generování. Také proto, že generování probíhá jinak než v lokálním režimu, může tento režim podle webu přinášet lepší výsledky.

Ruční

Tento režim je určen pro pokročilé uživatele.
Umožňuje ručně zadat vlastní kritické CSS [ADDRESS] k tomu určené. Přidané CSS bude použito na celém webu.

Kdy se Kritické CSS aktivuje?

V automatickém režimu je kritické CSS generováno současně se zbytkem cache a možností ([PERSON_NAME]); [PERSON_NAME], další návštěvy budou používat vygenerovanou cache.

Co je dobré vědět

Některé prvky mohou ztratit své formátování

Po aktivaci se některé komponenty, které načítají styly dynamicky (karusely, modální okna, vyskakovací okna atd.), nemusí zobrazovat správně.

[PERSON_NAME] způsobí:

1. [PERSON_NAME] režim Auto — služba LWS.

2. Pokud problém přetrvává, použijte režim Ruční k přidání chybějících stylů.

Externí styly

Automatické generování bere v úvahu pouze styly hostované na vaší doméně.

Styly načítané z externích služeb (CDN, Google Fonts atd.) nejsou do automaticky generovaného kritického CSS zahrnuty.

Závěr

Kritické CSS je skvělý nástroj pro urychlení zobrazení vašich stránek a zlepšení zkušenosti vašich návštěvníků 🚀. Přednostním načtením základních stylů zkracujete dobu načítání viditelného obsahu a potenciálně optimalizujete své výkonnostní ukazatele, [PERSON_NAME] LCP 📈.

Nyní už víte, jak: pochopit přínos Kritického CSS, aktivovat jej ve WordPressu pomocí LWS Optimize, vybrat mezi režimy Auto — lokální generování, Auto — služba LWS a Ruční, určit kdy se aktivuje a předvídat rizika spojená s dynamickými komponentami a externími styly 😉.

Při dodržování těchto osvědčených postupů si můžete užít web, který je rychlejší, plynulejší a příjemnější pro navigaci pro vaše uživatele ✨.

Děkujeme za přečtení 🙏 Neváhejte zanechat komentář ke službě a podělit se o své zkušenosti! 🙂