TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan generere kritisk CSS på WordPress -nettsted?

1

Det er mange dra og slipp nettstedbyggere tilgjengelig på internett for å lage nettsted uten tekniske ferdigheter. Du må imidlertid lære deg et teknisk aspekt ved SEO for å holde nettstedet ditt på toppen av søkeresultatsider. Kritisk CSS er et slikt teknisk emne for å optimalisere innholdsleveransen din i tur og orden som direkte påvirker hastigheten. WordPress -økosystem gjør dette mer komplisert for vanlige brukere som bruker flere plugins på nettstedet sitt. I denne artikkelen, la oss utforske hvordan du lager kritisk CSS for WordPress -nettsted for å forbedre Google PageSpeed ​​-poengsummen.

Forstå det grunnleggende

Før du diskuterer om kritisk CSS, er det nødvendig å forstå noen terminologier som over-folden og optimalisering av innholdslevering. I tillegg må du også forstå den grunnleggende metoden for å bruke eksterne stilark på WordPress.

Over innholdet i brettet

Når du åpner et nettsted på skrivebordet eller mobilenheten, er den synlige delen du ser på skjermen, innholdsområdet over folden. Dette er en tradisjonell avisterminologi hvor du kan se innhold over folden øverst på første side. Vanligvis pleide folk å brette avisen og over bretteområdet tilbyr viktig innhold. På samme måte bør den øverste synlige delen av nettsiden som lastes først, tilby mest verdifullt innhold til brukeren. Derfor bør du fokusere på å optimalisere den synlige toppdelen for å laste med brennende fart.

Innholdsleveranseoptimalisering

Mange hastighetsverktøy som Google PageSpeed ​​Insights måler hvordan nettstedet leverer innhold over brettet. Du kan se dette som en måling av First Contentful Paint (FCP). Hvis de oppdager en blokkering, vil du se en advarsel om å fjerne blokkeringselementet. Et av de populære forslagene du vil se i Google PageSpeed ​​Insights-verktøyet, er å eliminere gjengivelsesblokkerende ressurser. Hvis du klikker på forslaget, viser Google deg optimalisering av kritisk CSS/JS og utsetter all ikke-kritisk CSS/JS.

Hvordan generere kritisk CSS på WordPress -nettsted?

Kritisk CSS og JS forslag

Å fikse gjengivelsesblokkerende JavaScript (jQuery) er ganske enkelt siden temaer/plugins som standard laster inn skriptene i bunntekstdelen. jQuery er det eneste problemet, som kan være nødvendig for mange nettsteder for å laste inn innhold over folden. Siden WordPress også bruker jQuery, kan du ignorere denne feilen hvis den bare skyldes jQuery. Ellers kan du bruke plugins som WP Rocket til å kombinere og levere alle skript hvis det ikke bryter nettstedets oppsett.

Problemet er imidlertid å generere kritisk CSS og laste den først. I denne artikkelen vil vi forklare hvordan du håndterer CSS -optimalisering for å forbedre sidehastighetspoeng.

Relatert: Riktig WP Rocket -plugin -innstillinger for å øke hastigheten på nettstedet ditt.

Laster inn CSS på nettsteder

Det er flere måter å sette inn CSS på nettsiden din. Du kan gjøre dette som inline, intern eller ekstern måte. Den mest populære og anbefalte måten er å koble eksterne stilark i toppteksten på en webside. Ettersom innholdet i overskriftsseksjonen først lastes inn med nettsiden, påvirker det drastisk innlasting over innholdet ovenfor og dermed sidehastigheten.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Laster inn CSS i WordPress

WordPress bruker style.css som en ekstern fil for å levere temastiler. Dette er en obligatorisk fil (i tillegg til functions.php) for å kjøre et WordPress -nettsted. I tillegg kan hvert plugin på nettstedet ditt legge til ytterligere CSS -filer. Åpne nettstedet ditt i Chrome -nettleseren og se kildekoden (sørg for at du ikke har noen hurtigbufremoduler installert eller deaktivert hurtigbufring for siden).

Hvordan generere kritisk CSS på WordPress -nettsted?

Stilark i topptekst

Du kan se WordPress kobler alle eksterne stilark under toppteksten på siden. Dette kan forårsake flere problemer fra optimeringsperspektivet:

  • Noen temaer bruker tunge CSS -stiler med få MB -størrelse. Du trenger ikke at alle disse stilene skal lastes ned når en bruker åpner en webside på skrivebordet eller mobilen.
  • Det er forskjellige innleggstyper som produkter som kan bruke helt forskjellige stiler. I dette tilfellet trenger du ikke den andre CSS-en for første (over-fold) lasting.

Hver side på nettstedet ditt trenger et minimum CSS for å laste inn innhold over brettet. Denne minimums -CSSen som trengs for sidelastning kalles kritisk CSS på teknisk sikt. I alle tilfellene ovenfor vil Google PageSpeed ​​Insights og andre verktøy vise deg en advarsel for å optimalisere CSS -levering.

Husk at fjerning av ubrukt CSS og skript også er relatert til bruk av for mye CSS / skript på siden. Dette er imidlertid ganske forskjellig fra kritisk CSS -optimalisering. Du kan ikke engang bruke noen plugins på en bestemt side. For eksempel trenger du ikke CSS for kontaktskjema -plugin på alle sidene på nettstedet. I dette tilfellet er CSS/JS -filer fra kontaktskjemafiler unødvendige på et vanlig blogginnlegg, og du vil se fjerne ubrukt CSS/JS -advarsel. Sjekk artikkelen vår om hvordan du deaktiverer ubrukte CSS/JS i WordPress og optimaliserer WooCommerce -sider for admin AJAX -anrop.

Hvordan generere kritisk CSS i WordPress?

Nå som du vet hvor viktig den kritiske CSS for å forbedre sidehastigheten. Det er to måter å generere kritisk CSS for nettstedet ditt.

  • Generer kritisk CSS manuelt og sett inn på nettstedet ditt
  • Bruk WP Rocket -plugin for å optimalisere innholdsleveringen

Vi vil forklare både prosessen i detaljer, og du kan velge den beste som fungerer for nettstedet ditt.

Relatert: Vil WP Rocket fungere med SiteGround -hosting?

Manuell kritisk CSS -generasjon

Det er mange tredjepartsverktøy tilgjengelig på internett for å generere kritisk CSS manuelt. Dette er imidlertid fornuftig når alle sidene på nettstedene dine er like og ikke har tilpasset innhold i området over folden. Du kan prøve andre gratis kritiske CSS -generasjonstjenester som Sitelocity.

  • Gå til Sitelocity -nettstedet og skriv inn sidens URL.
  • Klikk på knappen "Generer Critical Path CSS".
  • Du kan få minifisert kritisk CSS for siden din.

Hvordan generere kritisk CSS på WordPress -nettsted?

Generer kritisk CSS

Nå som du har generert kritisk CSS, og den neste oppgaven er å sette den inn i overskriftsdelen på nettstedet ditt. I teorien kan du sette inn stilene i header.php -filen mellom og tagger. Det er plugins som hjelper deg med å sette inn stiler i overskriftsseksjonen uten å endre malfiler. Autoptimize er en av pluginene vi kan anbefale for dette formålet. Hvis du allerede bruker Autoptimize for hurtigbufring, kan du også bruke den samme pluginen for å sette inn kritisk CSS.

Du kan sette inn kritisk CSS under "CSS -alternativer" i Autoptimize -pluginet. Aktiver først avkrysningsboksen “Inline and Defer CSS" og lim inn den kritiske CSS -en i tekstboksen som vises.

Hvordan generere kritisk CSS på WordPress -nettsted?

CSS -alternativer

Som du kan se, kan Autoptimize plugin også automatisk inline over CSS mens den utsetter andre stiler. Imidlertid vil dette raskt øke hurtigbufferstørrelsen til 100%, og du har ikke noe alternativ i pluginet for å automatisk tømme bufferen. I tillegg vil det i de fleste tilfeller bryte nettstedet. Du kan gå til Autoptimize CriticalCSS Power-Up-tillegg som vil hjelpe deg på en bedre måte. For å bruke dette tillegget må du få API-en fra Criticalcss.com for $ 10 per måned.

Hvorfor vil manuell kritisk CSS -generasjon ikke fungere?

Selv om den manuelle innsettingsprosessen ovenfor ser lett ut, er det ikke en lett oppgave. Følgende er noen av grunnene til at din kritiske CSS ikke vil fungere.

  • Du kan ha forskjellig innhold som sider, blogginnlegg, produkter osv. Hver innholdstype på nettstedet ditt trenger forskjellig kritisk CSS for å laste inn over brettet. Ved å bruke plugin eller manuell innsetting vil den kritiske CSS lastes på alle sider og ødelegge noe innhold.
  • Du må generere kritisk CSS hver gang du oppdaterer tema, plugin og WordPress -kjerne. Ellers vil bruk av gammel kritisk CSS ødelegge nettstedets layout. Dette er en umulig oppgave for vanlige brukere å kontinuerlig oppdatere kritisk CSS for hver eneste oppdatering på nettstedet. Med alternativer for automatisk oppdatering tilgjengelig, må du være veldig forsiktig før du oppdaterer plugin/tema/kjerne på installasjonen.
  • Du kan trenge separate kritiske CSS for mobile og stasjonære enheter.

Med alle disse problemene er det eneste alternativet som er igjen å bruke en plugin som tar seg av disse og genererer kritisk CSS dynamisk og automatisk.

Lag kritisk CSS for WordPress med WP Rocket

Heldigvis har du en hurtigbuffer -plugin som akkurat gjør denne kritiske CSS -generasjonen i WordPress. WP Rocket er en av de mest populære hurtigbuffer -plugins for WordPress på grunn av de forenklede innstillingene. Igjen, kritisk CSS -generasjon er en av skjønnhetene i pluginet som enhver normal bruker kan få fordelen uten å bryte nettstedet.

  • Først må du kjøpe WP Rocket premium plugin.
  • Etter at du har installert og aktivert WP Rocket, går du til "Innstillinger> WP Rocket" og navigerer til "Filoptimalisering" -delen.
  • Rull ned og aktiver avmerkingsboksen "Optimaliser CSS -levering".

Hvordan generere kritisk CSS på WordPress -nettsted?

Aktiver kritisk CSS i WP Rocket

Dette vil tillate pluginet å automatisk generere kritisk CSS for hver innleggstype på WordPress -nettstedet ditt. Den inkluderer forsiden. Hjemmeside, side, innlegg og annen tilpasset innleggstype du bruker på nettstedet ditt. Om nødvendig kan du legge til kritisk CSS som du genererer manuelt ved hjelp av tredjepartsverktøy. Vanligvis kan du la denne kritiske CSS -boksen stå tom. Du kan også aktivere separat mobilbuffer under "Cache" -delen.

Vær oppmerksom på at WP Rocket er en premium -plugin med lisens for ett nettsted tilgjengelig for $ 49. Etter vår mening er det verdt å kjøpe denne pluginen, siden den tilbyr ende-til-ende-hurtigbufferløsning for hastighetsoptimalisering. Programtillegget kommer med ett års støtte og oppdateringer. Etter det vil det fortsette å fungere, og du kan bruke den kritiske CSS og andre funksjoner uten fornyelse. Du kan fornye med 30% rabatt for å få støtte og få tilleggsfunksjoner. Dette er et mye bedre alternativ sammenlignet med $ 10 per måned for criticalcss API for bruk med Autoptimize.

Regenerate Critical CSS

Når du oppdaterer tema/plugin/WordPress -kjerne eller legger til egendefinerte innleggstyper på nettstedet ditt, er det nødvendig å regenerere kritisk CSS. Ellers vil WP Rocket bruke gammel kritisk CSS og bryte nettstedets oppsett. Sørg derfor for å regenerere kritisk CSS uten å glemme.

  • Klikk på "WP Rocket" -menyen på den øverste linjen og velg "Regenerate Critical CSS" alternativet.
  • Alternativt kan du gå til pluginens dashbord og klikke på “Regenerate Critical CSS” -knappen.

Hvordan generere kritisk CSS på WordPress -nettsted?

Regenerate Critical CSS

Tilpasset kritisk CSS for spesifikk side

Som nevnt kan du ha en hjemmeside eller en annen side opprettet med et sidebygger -plugin. Denne siden vil ha en helt annen kritisk CSS sammenlignet med alle andre blogginnlegg på nettstedet ditt. I dette tilfellet må du opprette separat kritisk CSS og bare laste betinget på den siden. WP Rocket kan hjelpe deg med å oppnå dette med få klikk.

  • Gå til side / postredigereren på siden du vil generere separat kritisk CSS.
  • Finn dokumentpanelet "WP Rocket Options" på sidepanelet. Hvis du ikke finner det, klikker du på de tre prikkene øverst til høyre og velger "Innstillinger". På popup-vinduet kan du aktivere nødvendige dokumentpaneler som er tilgjengelige på nettstedet ditt.
  • Merk av for "Optimaliser CSS -levering" og klikk på "Generer spesifikk CPCSS" -knapp.
  • Dette vil generere spesifikk kritisk CSS for den siden, og programtillegget vil laste inn denne kritiske CSS -en når brukere besøker siden.

Hvordan generere kritisk CSS på WordPress -nettsted?

Generer kritisk CSS for spesifikk side

Relatert: Gjennomgang av WP Rocket caching plugin.

Testing av kritisk CSS

Etter å ha implementert den manuelle metoden eller brukt WP Rocket -plugin, kan du teste siden ved å se sidekilden. Sørg for å logge av administrasjonspanelet eller aktivere hurtigbufring for påloggede brukere i programtillegget. Som du kan se på skjermbildet nedenfor, legger WP Rocket til kritisk CSS i toppteksten.

Hvordan generere kritisk CSS på WordPress -nettsted?

WP Rocket Critical CSS

Du kan også sjekke sidene i Google PageSpeed ​​Insights -verktøyet. Hvis alt går bra, vil du se eliminere gjengivelsesblokkerende ressurser og andre CSS-feil under bestått resultat. Dette indikerer at du har implementert kritisk CSS riktig på nettstedet.

Siste ord

Vi håper denne artikkelen ville ha fremhevet viktigheten av kritisk CSS på WordPress -nettstedet. Du kan bruke det manuelle alternativet når du har et mindre nettsted som inneholder få sider. For en kjørende blogg som har et stort antall innlegg og forskjellige innleggstyper, kan du imidlertid prøve WP Rocket -plugin. Selv om det kostet deg litt penger, kan du få en komplett hurtigbufreløsning for nettstedet ditt.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon