A WordPress CSS megértése
Mielőtt belemerülnénk, ismerjük meg, hogyan működik a normál CSS a WordPressben.
Minden WordPress téma a style.css fájlból áll, amely tartalmazza a webhely stílusához szükséges összes kódot. A témafejlesztőknek támogatniuk kell a WordPress összes funkcióját, beleértve a blogbejegyzéseket, megjegyzéseket, termékoldalakat, tagsági oldalakat, űrlapokat stb. A többi telepített bővítmény is hozzáadhat hasonló css-stíluslapokat.
Emiatt a css-fájlok felduzzadhatnak, és akár 200 kb-os vagy akár nagyobb méretűek is lehetnek.
Mi az a Critical Path CSS?
Ahogy a CSS-fájlok nőnek, a böngészőnek le kell töltenie ezeket a nagy fájlokat, elemeznie kell és renderelnie kell őket. Renderelés blokkolásaként is ismert. Az első értelmes megjelenítést és az első értelmes megjelenítést is növeli.
A Critical Path CSS az a CSS, amely a fenti tartalom megjelenítéséhez szükséges minden weboldalon. Ahogy a neve is sugallja, "kritikus" CSS, amely segít a böngészőnek gyorsan lerajzolni és renderelni a teljes CSS-fájlok betöltése előtt.
A kritikus elérési út css-je általában a fejlécbe van ágyazva, a forrás css-fájl pedig aszinkron módon vagy a láblécben töltődik be a könnyebb használat érdekében.
Miért olyan fontos a Critical Path CSS?
Biztosan látott már figyelmeztetést az olyan eszközöktől, mint a Google PageSpeed Insights vagy a GTmetrix, amely szerint „optimalizálja a css kézbesítését” vagy „halassza el a nem használt css-t”.
A kritikus CSS-nek semmi köze az oldal betöltési idejéhez. Nem növeli/csökkenti a betöltési időt. De sokkal jobb felhasználói élményt nyújt. Segít gyorsan "renderelni" vagy "színezni" egy weboldalt.
- Javítja az első tartalomrajzolást (FCP)
- Javítja az első jelentős fizetést (FMP)
- Távolítsa el a fel nem használt CSS-t (technikailag ne távolítsa el, hanem a "hasznos" CSS-t részesítse előnyben)
Íme két képernyőkép a blogomról kritikus CSS-sel és anélkül.
Amint a „nincs kritikus css elérési út” részben látható, majdnem 5 másodpercbe telt, mire valami hasznosat mutatott a felhasználónak egy mobileszközön. A böngészőnek további HTTP kérést kell küldenie a css fájlhoz, le kell töltenie, elemeznie kell a renderelés megkezdéséhez. De kritikus css használatakor minden szükséges css-nek be kell lennie, és a böngésző azonnal elkezdheti a renderelést a HTML-fájl betöltése után egy másodperc alatt.
Hogyan készítsünk kritikus CSS-t a WordPressben?
Számos módja van a kritikus CSS létrehozásának a WordPressben.
Gyorsítótárazó bővítmények használata
A WP Rocket egy prémium gyorsítótárazási bővítmény, amely nagyon jól működik.
Az egyik ok, amiért minden oldalon WP Rocketet használok, maga a kritikus CSS-generáció. Külön létrehozzák a kritikus CSS-t a kezdőlaphoz, a bejegyzések oldalához, a kategóriaoldalhoz, a termékoldalhoz stb., és beágyazzák. Visszaállítják a kritikus CSS-t, ha a téma vagy a beállítás módosul.
Minden egy gombnyomással elvégezhető.
Egyéb gyorsítótárazási beépülő modulok, amelyek kritikus CSS-t generálhatnak
A Swift Performance és a LiteSpeed (LiteSpeed/OpenLiteSpeed szerver szükséges) hasonló beépülő modulok, amelyek kritikus CSS-t generálhatnak. Mindkét bővítmény rendelkezik felhővel és teljes gyorsítótárral a szervereibe.
Az Autoptimize + Free Critical CSS Generator használata
Vannak harmadik féltől származó online eszközök, amelyek fontos css-t biztosítanak webhelye URL-címének megadásával. A pegasaas egy nagyszerű ingyenes eszköz.
Íme, hogyan kell csinálni:
1. lépés. Nyissa meg a https://pegasaas.com/critical-path-css-generator/ oldalt, és írja be az URL-címét. Másolja a generált "Critical Path CSS"-t.
2. lépés Az automatikus optimalizálási beállításoknál (speciális beállítások engedélyezése) a „CSS-beállítások” alatt jelölje be a „Inline and Defer CSS” lehetőséget, és illessze be a másolt CSS-t.
Előnyök:
- Ingyenes
Mínuszok:
- Nincs külön kritikus CSS a különböző oldaltípusokhoz (pl.: kezdőlap, bejegyzések oldala, kategóriaoldal, termékoldal stb.)
- Ne építse újra automatikusan a témát/beállítást módosítva
Miért nem képes maga a WordPress kritikus CSS-t generálni?
Amint azt már észrevette, a kritikus css elérési út létrehozása külső szolgáltatásokat tesz lehetővé. Akkor miért nem tudja maga a WordPress előállítani?
A Critical CSS létrehozását olyan nyílt forráskódú projektek teszik lehetővé, mint a Critical (a Google-tól), a CriticalCSS vagy a penthouse. Mindezek a projektek NodeJS-en alapulnak, nem PHP-n. Tehát telepítenie kell a NodeJS-t a szerverére. A legtöbb megosztott/felügyelt tárhelyszolgáltató ezt több okból sem teszi lehetővé.
