Forstå WordPress CSS
Før vi dykker inn, la oss forstå hvordan vanlig CSS fungerer i WordPress.
Hvert WordPress-tema består av style.css som inneholder all koden som trengs for å style nettstedet ditt. Temautviklere bør støtte alle WordPress-funksjoner som inkluderer blogginnlegg, kommentarer, produktside, medlemsside, skjemaer osv. Andre plugins du installerer kan også legge til lignende css-stilark.
Dette kan gjøre css-filer oppblåste og store i størrelse på 200 kb eller enda mer.
Hva er Critical Path CSS?
Etter hvert som CSS-filene dine vokser, må nettleseren din laste ned de store filene, analysere dem og gjengi dem. Også kjent som gjengivelsesblokkering. Det vil også øke den første meningsfulle gjengivelsen og den første meningsfulle gjengivelsen.
Critical Path CSS er CSS-en som kreves for å gjengi innholdet ovenfor på hver nettside. Som navnet antyder, "kritisk" CSS, som hjelper nettleseren raskt å tegne og gjengi den før den laster inn hele CSS-filer.
Vanligvis er css-en til den kritiske banen innebygd i overskriften og kildens css-fil lastes asynkront eller i bunnteksten for enkel bruk.
Hvorfor er Critical Path CSS så viktig?
Du må allerede ha sett en advarsel fra verktøy som Google PageSpeed Insights eller GTmetrix som sier "optimaliser css-levering" eller "utsett ubrukt css".
Kritisk CSS har ingenting med sidelastetid å gjøre. Det øker/reduserer ikke lastetiden. Men gir en mye bedre brukeropplevelse. Det hjelper å raskt "rendere" eller "fargelegge" en nettside.
- Forbedrer First Content Draw (FCP)
- Forbedrer første betydelige betaling (FMP)
- Fjern ubrukt CSS (teknisk sett ikke fjern den, men prioriter "nyttig" CSS)
Her er to skjermbilder av bloggen min med og uten kritisk CSS.
Som du kan se i delen "ingen kritisk css-bane", tok det nesten 5 sekunder å vise brukeren noe nyttig på en mobilenhet. Nettleseren må lage en ekstra HTTP-forespørsel til css-filen, laste den ned, analysere den for å begynne å gjengi. Men når du bruker kritisk css, må all nødvendig css være innebygd og nettleseren kan begynne å gjengi umiddelbart etter at HTML-filen er lastet inn på et sekund eller mindre.
Hvordan lage kritisk CSS i WordPress?
Det er flere måter å generere kritisk CSS i WordPress.
Bruker caching plugins
WP Rocket er en premium caching-plugin som fungerer veldig bra.
En av grunnene til at jeg bruker WP Rocket på hvert nettsted er selve den kritiske CSS-generasjonen. De genererer kritisk CSS separat for hjemmeside, innleggsside, kategoriside, produktside osv. og legger den inn. De vil gjenopprette kritisk CSS hvis det er endringer i temaet eller innstillingen.
Alt kan gjøres ved å trykke på en knapp.
Andre caching-plugins som kan generere kritisk CSS
Swift Performance og LiteSpeed (krever LiteSpeed/OpenLiteSpeed-server) er lignende plugins som kan generere kritisk CSS. Begge disse pluginene har sky og full cache innebygd i serverne sine.
Bruker Autoptimize + Free Critical CSS Generator
Det er tredjeparts nettverktøy som gir viktig css ved å skrive inn nettstedets URL. pegasaas er et så flott gratisverktøy.
Slik gjør du det:
Trinn 1. Gå til https://pegasaas.com/critical-path-css-generator/ og skriv inn nettadressen din. Kopier den genererte "Critical Path CSS".
Steg 2 I innstillingene for automatisk optimalisering (aktiver avanserte innstillinger), under "CSS-alternativer", merk av for "Inline and Defer CSS" og lim inn den kopierte CSS-en.
Fordeler:
- Er gratis
Minuser:
- Ingen separat kritisk CSS for forskjellige sidetyper (f.eks: hjemmeside, innleggsside, kategoriside, produktside osv.)
- Ikke gjenoppbygg automatisk ved endring av tema/innstilling
Hvorfor kan ikke WordPress selv generere kritisk CSS?
Som du kanskje har lagt merke til, aktiverer eksterne tjenester ved å opprette en kritisk css-bane. Så hvorfor kan ikke WordPress selv generere det?
Å lage Critical CSS er gjort mulig av åpen kildekode-prosjekter som Critical (av Google), CriticalCSS eller penthouse. Alle disse prosjektene er basert på NodeJS, ikke PHP. Så du må installere NodeJS på serveren din. De fleste delte/administrerte vertsleverandører tillater ikke dette av flere grunner.
