Optimera det kritiska CSS:et för sin WordPress-webbplats med LWSOptimize

Procédure

Kritiskt CSS gör det möjligt att visa det synliga innehållet på dina sidor snabbare. När en besökare öppnar en sida måste webbläsaren först hämta olika filer (bilder, skript, CSS-formatmallar osv.). [PERSON_NAME] är [PERSON_NAME] kan visningen fördröjas. Med Kritiskt CSS laddas de stilar som är nödvändiga för att sidan ska visas omedelbart i första hand. Resten av stilarna laddas sedan i bakgrunden.

Varför använda det?

Aktivering av Kritiskt CSS kan förbättra visningshastigheten på din webbplats, särskilt på mobil eller med en långsam internetanslutning.

De vanligaste fördelarna är:

• Snabbare visning av sidans huvudinnehåll.

• Bättre användarupplevelse.

• Potentiell förbättring av prestandamått som LCP (Largest Contentful Paint).

Beroende på webbplatsens konfiguration kan den observerade vinsten uppgå till flera hundra millisekunder.

Aktivera Kritiskt CSS

WordPress erbjuder för närvarande ingen optimering av sidors och inläggs CSS. [PERSON_NAME], det finns dussintals olika WordPress-plugins för att möta detta behov, däribland pluginet LWS Optimize, skapat av LWS.

Som standard är alternativet inaktiverat i detta plugin eftersom det ökar cachegenereringstiden, [PERSON_NAME] ännu mer om sidan laddar ett stort antal CSS-filer, och kan i sällsynta fall orsaka visningsproblem.
För att aktivera det, gå till kontrollpanelen i LWS Optimize och välj sedan, [PERSON_NAME], Maximum-inställningarna och spara; [PERSON_NAME] pluginets åtgärder, däribland Kritiskt CSS.

Om du vill aktivera endast Kritiskt CSS kan du också gå till de avancerade inställningarna, i avsnittet Front-End, där du hittar raden Kritiskt CSS.

När du markerar alternativet kommer du att bli ombedd att välja mellan 3 driftlägen: Auto - lokal, Auto och Manuell. När valet är gjort, spara dina ändringar, [PERSON_NAME] av Kritiskt CSS och tömmer det aktuella cachen.

Varje läge har ett olika arbetssätt:

• Auto — lokal generering

Detta är pluginets standardläge; sidornas CSS analyseras och bearbetas sedan av din webbplats PHP, vilket direkt genererar Kritiskt CSS. Fördelen är att det fungerar helt lokalt och är rimligt snabbt, men i gengäld förbrukar det mer resurser på servern än det andra läget. Det rekommenderas dock fortfarande för de flesta webbplatser.

Om prestandan hos ditt webbhotell [PERSON_NAME], [PERSON_NAME] orsaka långsamhet för dina besökare under genereringen av CSS. [PERSON_NAME], kan prestandan försämras under genereringstiden.

• Auto — LWS-tjänst

Detta läge använder LWS:s tjänst för generering av kritiskt CSS. Lite långsammare än lokal generering, särskilt om genererings-API:et är överbelastat, är dess främsta fördel att all generering sker utanför servern, vilket ger betydligt bättre prestanda än lokal generering. Vid hög belastning kan genereringen dock vara otillgänglig, så den är inte lika pålitlig som lokal generering.

Vid tillfällig otillgänglighet för tjänsten växlar pluginet automatiskt över till lokal generering. Eftersom genereringen också görs på ett annat sätt än i lokalt läge kan detta dessutom ge bättre resultat för vissa webbplatser.

Manuell

Detta läge är avsett för avancerade användare.
Det gör det möjligt att manuellt ange ditt eget kritiska CSS [ADDRESS] avsedd för detta. Det CSS som läggs till kommer att användas på hela webbplatsen.

När blir Kritiskt CSS aktivt?

I automatiskt läge genereras det kritiska CSS:et samtidigt som resten av cachen och alternativen ([PERSON_NAME]) ; [PERSON_NAME], de kommande besöken kommer att använda den genererade cachen.

Saker att känna till

Vissa element kan förlora sin formatering

Efter aktivering kan vissa komponenter som laddar sina stilar dynamiskt (karuseller, modala fönster, popups osv.) eventuellt inte visas korrekt.

[PERSON_NAME] ger upphov till detta:

1. [PERSON_NAME] läget Auto — LWS-tjänst.

2. Om problemet kvarstår, använd läget Manuell för att lägga till de saknade stilarna.

Externa stilar

Den automatiska genereringen tar endast hänsyn till formatmallar som är hostade på din domän.

Stilar som laddas från externa tjänster (CDN, Google Fonts osv.) inkluderas inte i det kritiska CSS som genereras automatiskt.

Slutsats

Kritiskt CSS är en utmärkt hävstång för att snabba upp visningen av dina sidor och förbättra dina besökares upplevelse 🚀. Genom att prioritera de viktigaste stilarna minskar du laddningstiden för det synliga innehållet och optimerar potentiellt dina prestandamått, [PERSON_NAME] LCP 📈.

Nu vet du hur du ska: förstå nyttan med Kritiskt CSS, aktivera det i WordPress med LWS Optimize, välja mellan lägena Auto — lokal generering, Auto — LWS-tjänst och Manuell, avgöra när det blir aktivt och förutse uppmärksamhetspunkter kopplade till dynamiska komponenter och externa stilar 😉.

Genom att följa dessa bästa praxis kan du få en webbplats som är mer snabb, mer smidig och trevligare för dina användare att navigera på ✨.

Tack för att du läste 🙏 Tveka inte att lämna en kommentar om tjänsten och dela med dig av din erfarenhet! 🙂