Forståelse af WordPress CSS
Før vi dykker ind, lad os forstå, hvordan almindelig CSS fungerer i WordPress.
Hvert WordPress-tema består af style.css, som indeholder al den kode, der er nødvendig for at style dit websted. Temaudviklere bør understøtte alle WordPress-funktioner, som inkluderer blogindlæg, kommentarer, produktside, medlemsside, formularer osv. Andre plugins, du installerer, kan også tilføje lignende css-stylesheets.
Dette kan gøre css-filer oppustede og store i størrelse på 200 kb eller endda mere.
Hvad er Critical Path CSS?
Efterhånden som dine CSS-filer vokser, skal din browser downloade de store filer, analysere dem og gengive dem. Også kendt som gengivelsesblokering. Det vil også øge den første meningsfulde gengivelse og den første meningsfulde gengivelse.
Critical Path CSS er den CSS, der kræves for at gengive ovenstående indhold på hver webside. Som navnet antyder, "kritisk" CSS, som hjælper browseren med hurtigt at tegne og gengive den, før den indlæser hele CSS-filer.
Normalt er css'en for den kritiske sti indlejret i headeren, og kildens css-fil indlæses asynkront eller i sidefoden for at lette brugen.
Hvorfor er Critical Path CSS så vigtig?
Du må allerede have set en advarsel fra værktøjer som Google PageSpeed Insights eller GTmetrix, der siger "optimer css-levering" eller "udskyd ubrugt css".
Kritisk CSS har intet at gøre med sideindlæsningstid. Det øger/sænker ikke indlæsningstiden. Men giver en meget bedre brugeroplevelse. Det hjælper hurtigt at "gengive" eller "farve" en webside.
- Forbedrer First Content Draw (FCP)
- Forbedrer First Significant Payment (FMP)
- Fjern ubrugt CSS (fjern det teknisk set ikke, men prioriter "nyttig" CSS)
Her er to skærmbilleder af min blog med og uden kritisk CSS.
Som du kan se i afsnittet "ingen kritisk css-sti", tog det næsten 5 sekunder at vise brugeren noget nyttigt på en mobilenhed. Browseren skal lave en ekstra HTTP-anmodning til css-filen, downloade den, parse den for at begynde at gengive. Men når du bruger kritisk css, skal al nødvendig css være inline, og browseren kan begynde at rendere umiddelbart efter indlæsning af HTML-filen på et sekund eller mindre.
Hvordan laver man kritisk CSS i WordPress?
Der er flere måder at generere kritisk CSS i WordPress.
Brug af caching plugins
WP Rocket er et premium caching-plugin, der fungerer rigtig godt.
En af grundene til, at jeg bruger WP Rocket på hvert websted, er selve den kritiske CSS-generation. De genererer Kritisk CSS separat til startside, indlægsside, kategoriside, produktside osv. og indlejrer den. De vil gendanne kritisk CSS, hvis der er ændringer i temaet eller indstillingen.
Alt kan gøres med et tryk på en knap.
Andre caching-plugins, der kan generere kritisk CSS
Swift Performance og LiteSpeed (kræver LiteSpeed/OpenLiteSpeed-server) er lignende plugins, der kan generere kritisk CSS. Begge disse plugins har cloud og fuld cache indbygget i deres servere.
Brug af Autoptimize + Gratis Critical CSS Generator
Der er tredjeparts onlineværktøjer, der giver vigtig css ved at indtaste dit websteds URL. pegasaas er sådan et fantastisk gratis værktøj.
Sådan gør du:
Trin 1. Gå til https://pegasaas.com/critical-path-css-generator/ og indtast din URL. Kopier den genererede "Critical Path CSS".
Trin 2 I indstillingerne for automatisk optimering (aktiver avancerede indstillinger), under "CSS-indstillinger", skal du markere "Inline and Defer CSS" og indsætte den kopierede CSS.
Fordele:
- Er ledig
Minusser:
- Ingen separat kritisk CSS for forskellige sidetyper (f.eks.: startside, indlægsside, kategoriside, produktside osv.)
- Genopbyg ikke automatisk ved ændring af tema/indstilling
Hvorfor kan WordPress ikke selv generere kritisk CSS?
Som du måske har bemærket, muliggør oprettelse af en kritisk css-sti eksterne tjenester. Så hvorfor kan WordPress ikke selv generere det?
Oprettelse af kritisk CSS er muliggjort af open source-projekter såsom Critical (af Google), CriticalCSS eller penthouse. Alle disse projekter er baseret på NodeJS, ikke PHP. Så du skal installere NodeJS på din server. De fleste delte/administrerede hostingudbydere tillader ikke dette af flere årsager.
