Pochopenie WordPress CSS
Skôr než sa ponoríme do toho, poďme pochopiť, ako funguje bežný CSS vo WordPress.
Každá téma WordPress pozostáva zo súboru style.css, ktorý obsahuje všetok kód potrebný na úpravu vašich stránok. Vývojári tém by mali podporovať všetky funkcie WordPress, ktoré zahŕňajú blogové príspevky, komentáre, produktovú stránku, členskú stránku, formuláre atď. Iné doplnky, ktoré si nainštalujete, môžu tiež pridať podobné šablóny so štýlmi css.
To môže spôsobiť, že súbory css budú nafúknuté a veľké s veľkosťou 200 kb alebo ešte viac.
Čo je CSS kritickej cesty?
Ako vaše súbory CSS rastú, váš prehliadač musí stiahnuť tieto veľké súbory, analyzovať ich a vykresliť. Tiež známe ako blokovanie vykresľovania. Tiež zvýši prvé zmysluplné vykreslenie a prvé zmysluplné vykreslenie.
Kritická cesta CSS je CSS potrebný na vykreslenie vyššie uvedeného obsahu na každej webovej stránke. Ako už názov napovedá, „kritický“ CSS, ktorý pomáha prehliadaču rýchlo ho nakresliť a vykresliť pred načítaním úplných súborov CSS.
Zvyčajne je css kritickej cesty vložený do hlavičky a zdrojový súbor css sa načítava asynchrónne alebo v päte, aby sa uľahčilo používanie.
Prečo je CSS Critical Path také dôležité?
Určite ste už videli varovanie od nástrojov ako Google PageSpeed Insights alebo GTmetrix, ktoré hovorí „optimalizujte doručovanie css“ alebo „odložte nepoužívané css“.
Kritické CSS nemá nič spoločné s časom načítania stránky. Nezvyšuje/neznižuje čas načítania. Poskytuje však oveľa lepší používateľský zážitok. Pomáha rýchlo „vykresliť“ alebo „vyfarbiť“ webovú stránku.
- Vylepšuje prvý obsah kreslenia (FCP)
- Zlepšuje prvú významnú platbu (FMP)
- Odstráňte nepoužívaný CSS (technicky ho neodstraňujte, ale uprednostnite „užitočný“ CSS)
Tu sú dve snímky obrazovky môjho blogu s kritickým CSS a bez neho.
Ako môžete vidieť v časti „žiadna kritická css cesta“, trvalo takmer 5 sekúnd, kým sa používateľovi ukázalo niečo užitočné na mobilnom zariadení. Prehliadač musí vykonať dodatočnú požiadavku HTTP na súbor css, stiahnuť ho, analyzovať, aby mohol začať vykresľovať. Ale pri použití kritického css musia byť všetky potrebné css vložené a prehliadač môže začať vykresľovať ihneď po načítaní súboru HTML za sekundu alebo menej.
Ako vytvoriť kritický CSS vo WordPress?
Existuje niekoľko spôsobov, ako generovať kritické CSS vo WordPress.
Používanie doplnkov pre ukladanie do vyrovnávacej pamäte
WP Rocket je prémiový doplnok na ukladanie do vyrovnávacej pamäte, ktorý funguje naozaj dobre.
Jedným z dôvodov, prečo používam WP Rocket na každej stránke, je samotná kritická generácia CSS. Vygenerujú kritické CSS oddelene pre domovskú stránku, stránku s príspevkami, stránku kategórie, stránku produktu atď. a vložia ich. Ak dôjde k zmenám v téme alebo nastavení, obnovia kritické CSS.
Všetko sa dá urobiť stlačením jediného tlačidla.
Iné doplnky na ukladanie do vyrovnávacej pamäte, ktoré dokážu generovať kritické CSS
Swift Performance a LiteSpeed (vyžaduje server LiteSpeed/OpenLiteSpeed ) sú podobné doplnky, ktoré dokážu generovať kritické CSS. Oba tieto doplnky majú na svojich serveroch zabudovanú cloudovú a plnú vyrovnávaciu pamäť.
Použitie Autoptimize + bezplatný generátor kritických CSS
Existujú online nástroje tretích strán, ktoré poskytujú dôležité css zadaním adresy URL vašej lokality. pegasaas je skvelý bezplatný nástroj.
Postup:
Krok 1. Prejdite na https://pegasaas.com/critical-path-css-generator/ a zadajte svoju adresu URL. Skopírujte vygenerovaný CSS kritickej cesty.
Krok 2 V nastaveniach automatickej optimalizácie (povoliť rozšírené nastavenia) v časti „Možnosti CSS“ začiarknite položku „Inline and Defer CSS“ a vložte skopírovaný CSS.
výhody:
- Je zadarmo
mínusy:
- Žiadne samostatné kritické CSS pre rôzne typy stránok (napr.: domovská stránka, stránka s príspevkami, stránka kategórie, stránka produktu atď.)
- Neprestavujte automaticky pri zmene témy/nastavenia
Prečo nemôže WordPress sám generovať kritické CSS?
Ako ste si možno všimli, vytvorenie kritickej cesty css umožňuje externé služby. Prečo ho teda nedokáže vygenerovať samotný WordPress?
Vytváranie kritických CSS je možné vďaka open source projektom, ako sú Critical (od Google), CriticalCSS alebo penthouse. Všetky tieto projekty sú založené na NodeJS, nie na PHP. Takže musíte nainštalovať NodeJS na svoj server. Väčšina poskytovateľov zdieľaného/spravovaného hostingu to neumožňuje z niekoľkých dôvodov.
