Förstå WordPress CSS
Innan vi dyker in, låt oss förstå hur vanlig CSS fungerar i WordPress.
Varje WordPress-tema består av style.css som innehåller all kod som behövs för att styla din webbplats. Temautvecklare bör stödja alla WordPress-funktioner som inkluderar blogginlägg, kommentarer, produktsida, medlemssida, formulär etc. Andra plugins du installerar kan också lägga till liknande css-stilmallar.
Detta kan göra css-filer uppsvällda och stora i storlek på 200 kb eller till och med mer.
Vad är Critical Path CSS?
När dina CSS-filer växer måste din webbläsare ladda ner de stora filerna, analysera dem och rendera dem. Även känd som render blockering. Det kommer också att öka den första meningsfulla renderingen och den första meningsfulla renderingen.
Critical Path CSS är den CSS som krävs för att rendera ovanstående innehåll på varje webbsida. Som namnet antyder, "kritisk" CSS, som hjälper webbläsaren att snabbt rita och rendera den innan hela CSS-filer laddas.
Vanligtvis är css för den kritiska sökvägen inbäddad i sidhuvudet och css-källfilen laddas asynkront eller i sidfoten för enkel användning.
Varför är Critical Path CSS så viktig?
Du måste redan ha sett en varning från verktyg som Google PageSpeed Insights eller GTmetrix som säger "optimera css-leverans" eller "skjut upp oanvänd css".
Kritisk CSS har ingenting att göra med sidladdningstid. Det ökar/minskar inte laddningstiden. Men ger en mycket bättre användarupplevelse. Det hjälper till att snabbt "rendera" eller "färglägga" en webbsida.
- Förbättrar First Content Draw (FCP)
- Förbättrar First Significant Payment (FMP)
- Ta bort oanvänd CSS (tekniskt sett ta inte bort den, men prioritera "användbar" CSS)
Här är två skärmdumpar av min blogg med och utan kritisk CSS.
Som du kan se i avsnittet "ingen kritisk css-väg" tog det nästan 5 sekunder att visa användaren något användbart på en mobil enhet. Webbläsaren måste göra en ytterligare HTTP-förfrågan till css-filen, ladda ner den, analysera den för att börja rendera. Men när du använder kritisk css måste all nödvändig css vara inline och webbläsaren kan börja rendera direkt efter att HTML-filen har laddats in på en sekund eller mindre.
Hur skapar man kritisk CSS i WordPress?
Det finns flera sätt att generera kritisk CSS i WordPress.
Använder caching plugins
WP Rocket är ett premium-cache-plugin som fungerar riktigt bra.
En av anledningarna till att jag använder WP Rocket på varje sida är den kritiska CSS-generationen i sig. De genererar Kritisk CSS separat för hemsida, inläggssida, kategorisida, produktsida, etc. och bäddar in den. De kommer att återställa kritisk CSS om det finns ändringar i temat eller inställningen.
Allt kan göras med en knapptryckning.
Andra caching-plugins som kan generera kritisk CSS
Swift Performance och LiteSpeed (kräver LiteSpeed/OpenLiteSpeed-server) är liknande plugins som kan generera Critical CSS. Båda dessa plugins har moln och full cache inbyggd i sina servrar.
Använder Autoptimize + Free Critical CSS Generator
Det finns onlineverktyg från tredje part som tillhandahåller viktig css genom att ange din webbplats URL. pegasaas är ett så fantastiskt gratisverktyg.
Så här gör du:
Steg 1. Gå till https://pegasaas.com/critical-path-css-generator/ och ange din URL. Kopiera den genererade "Critical Path CSS".
Steg 2 I inställningarna för automatisk optimering (aktivera avancerade inställningar), under "CSS-alternativ", kryssa i "Inline and Defer CSS" och klistra in den kopierade CSS.
Fördelar:
- Är gratis
Minus:
- Ingen separat kritisk CSS för olika sidtyper (ex: startsida, inläggssida, kategorisida, produktsida, etc.)
- Bygg inte om automatiskt vid ändring av tema/inställning
Varför kan inte WordPress själv generera kritisk CSS?
Som du kanske har märkt möjliggör externa tjänster att skapa en kritisk css-väg. Så varför kan inte WordPress själv generera det?
Att skapa Critical CSS möjliggörs av projekt med öppen källkod som Critical (av Google), CriticalCSS eller penthouse. Alla dessa projekt är baserade på NodeJS, inte PHP. Så du måste installera NodeJS på din server. De flesta delade/hanterade värdleverantörerna tillåter inte detta av flera skäl.
