WordPress er det mest populære innholdsstyringssystemet (CMS) på planeten, takket være dets brukervennlighet og fleksibilitet. WordPress' rike tilpasningsalternativer lar utgivere lage nettsteder som gir dyp resonans hos publikummet deres.
Og til tross for CMSs kraftige funksjoner, er det fortsatt mulig å lage nettsteder som ser bra ut, men som sliter med å øke publikumstallene. Selv om en innholdsrevisjon absolutt er tilrådelig, bør utgivere først vurdere en teknisk revisjon for å sikre at det ikke skjer noe i nettstedets bakgrunn som hindrer deres rekkevidde.
De viktigste resultatene de bør måle er Google Core Web Vitals (CWVs).
Disse beregningene, som Google konverterte til rangeringssignaler kort tid etter introduksjonen i 2020 , spiller en nøkkelrolle i å måle en nettsides brukeropplevelse (UX).
CWV-ene omfatter tre distinkte, men tilkoblede beregninger:
- Største innholdsrike maling (LCP)
- Første inngangsforsinkelse (FID)
- Kumulativt oppsettskift (CLS)
Disse signalene måler henholdsvis oppfattet lastehastighet, interaktivitet og visuell stabilitet til en nettside.
La oss ta en nærmere titt på disse CWV-ene for å forstå hvorfor de er så viktige, hvordan vi kan måle dem nøyaktig og deretter veie opp handlingene vi kan ta for å øke poengsummen deres.
Hva er kjerneverdier for nett?
Googles tre Core Web Vitals (CWVs) evaluerer kvaliteten på et nettsteds brukeropplevelse (UX), og gir innsikt i hvor godt nettsider presterer når det gjelder lastehastighet, interaktivitet og visuell stabilitet.
- Largest Contentful Paint (LCP): Dette måler nettstedets lastehastighet og refererer spesifikt til punktet i lasteprosessen når hovedinnholdet sannsynligvis er lastet.
Ta for eksempel et blogginnlegg om en ny, ny, teknisk gadget. Hvis hovedbildet – kanskje et bilde av gadgeten – og den innledende teksten lastes inn raskt (innen 2,5 sekunder er Googles anbefalte terskel for LCP), er det mer sannsynlig at besøkende blir, leser og engasjerer seg i innholdet.
Omvendt kan sakte lastetider føre til at besøkende forlater siden, noe som kan resultere i redusert trafikk.
- First Input Delay (FID): Dette representerer et øyeblikksbilde av hvor responsiv en nettside er ved første brukerinteraksjon, for eksempel et lenkeklikk eller et knappetrykk, ved å måle tiden mellom denne handlingen og når nettleseren kan begynne å behandle hendelsesbehandlere som svar .
Vurder en "Abonner nå"-knapp. Hvis en besøkende klikker på denne knappen og opplever en forsinkelse før nettstedet svarer (alt over 100 millisekunder anses som et dårlig resultat), kan den besøkende tro at nettstedet ikke svarer, noe som fører til en dårlig brukeropplevelse og potensielt et tapt abonnement.
Google forbereder seg på å introdusere en ny beregning kalt Interaction to Next Paint (INP) i mars 2024 som vil erstatte FID som en CWV.
- Cumulative Layout Shift (CLS): Dette kvantifiserer visuell stabilitet, eller mengden av uventet layoutforskyvning av synlig innhold på en nettside.
Hvis et nyhetsnettsted har tekst, bilder eller annonser som plutselig skifter når siden lastes helt inn, kan besøkende miste plassen sin eller ved et uhell klikke på en utilsiktet lenke eller knapp. Dette er en frustrerende opplevelse og kan hindre dem fra å gå tilbake til nettstedet.
Kilde: Web.dev - Interaksjon til neste maling (INP): Dette evaluerer en sides generelle respons på brukerinteraksjoner. Den overvåker ventetiden til alle mus- og tastaturinteraksjoner gjennom en brukers besøk på en nettside, med den lengste interaksjonen som er observert (ignorerer uteliggere) som danner den endelige INP-verdien.
Å oppnå en ideell INP-score kan utgjøre en utfordring på grunn av den store variasjonen i enhetens kapasitet. Det vil imidlertid fortsatt være rimelig for utgivere å sikte på en INP-poengsum i 75. persentilen av sideinnlastinger, segmentert på tvers av mobile og stasjonære enheter.
Et nettsted med en INP på eller under 200 millisekunder anses å ha god respons. Hvis INP er mellom 200 millisekunder og 500 millisekunder, trenger nettstedets respons litt arbeid. Til slutt, hvis INP er større enn 500 millisekunder, anses responsen som dårlig.
Kilde: Web.dev
Hvorfor er Core Web Vitals-poengsummen viktig?
Brukere krever raske lastehastigheter, jevn interaktivitet og et visuelt stabilt miljø, og en Core Web Vitals-vurdering er avgjørende for å hjelpe utgivere med å forstå hvordan nettstedene deres leverer på denne fronten.
Google fant ut at avvisningssannsynligheten hoppet med 32 % når sideinnlastingstiden steg fra 1 sekund til 3 sekunder. I mellomtiden så nyhetssider som besto CWV-testen en 22 % lavere avbruddsrate enn de som mislyktes.
1. Påvirk søkeresultater
CWV-er fungerer som en målestokk for Google for å måle ytelsen til et nettsted. De gir Google innsikt i hvor godt et nettsted tjener brukerne, noe som direkte påvirker nettstedets posisjon i søkeresultatene.
Enkelt sagt kan en bedre CWV-score hjelpe et WordPress-nettsted til å vises høyere i Googles søkerangeringer.
2. Øk trafikken
Nettsteder med optimaliserte CWV-er kan se en økning i trafikken. For eksempel reduserte det populære karriereveiledningsnettstedet LearnHowToBecome.org sin gjennomsnittlige lastetid fra 7 til 2,9 sekunder og så den månedlige trafikken øke fra 500 000 til 750 000.
3. Øk inntektene
En bruker er mindre sannsynlig å lese en artikkel hvis de opplever en lang lastetid (LCP), forsinket respons på deres interaksjon (FID) eller en ustabil layout (CLS). Nettsteder som utmerker seg i alle tre beregningene holder ikke bare brukerens oppmerksomhet, men kan også lede dem ned i konverteringstrakten, og til slutt generere mer inntekter for virksomheten.
I hovedsak er CWV-beregninger mer enn bare tall. De gir innsikt i et nettsteds ytelse fra en brukers perspektiv, og lar merkevaren forbedre seg på områder som betyr mest for de besøkende.
Slik sjekker du et WordPress-nettsteds kjernepoeng for webvitaler
Å forstå hvordan du sjekker CWV-score er det første skrittet mot å forbedre et nettsteds ytelse. Det er to måter å måle disse poengsummene på, enten internt ved å bruke Googles førstepartsverktøy eller ved hjelp av en WordPress-spesialist som har erfaring med å optimalisere ytelsesmålinger.
For de som valgte å gå den interne ruten, er det viktig å forstå at måling av CWV krever bruk av en blanding av feltdata og laboratoriedata.
Feltdata er faktiske brukeropplevelsesdata, samlet inn fra virkelige miljøer. Denne typen data gir en bedre forståelse av hvordan brukere engasjerer seg med et nettsted på tvers av en rekke enheter, tilkoblinger og andre forhold i den virkelige verden.
For eksempel, hvis brukere primært får tilgang til et WordPress-nettsted på mobile enheter på 3G-nettverk, kan feltdata avsløre ytelsesproblemer som kanskje ikke vises i et kontrollert laboratoriemiljø.
På den annen side genereres laboratoriedata i et kontrollert miljø og brukes til å feilsøke ytelsesproblemer. Den fanger ikke opp hele spekteret av virkelige brukeropplevelser, men gir reproduserbare resultater for feilsøking og optimalisering av nettstedets ytelse.
Å bruke et verktøy som Lighthouse i et utviklingsmiljø kan simulere et tregt nettverk for å identifisere ytelsesflaskehalser.
Alle Googles populære utviklerverktøy, fra Google Search Console (GSC) til Google Analytics (GA) kan måle CWV-poeng.
Kilde: Web.dev
For i dag skal vi imidlertid se på Googles PageSpeed Insights -verktøy av den enkle grunn at det er et av de enkleste og mest omfattende verktøyene du kan komme i gang med.
Hvordan oppdage og forbedre FID og TBT med PageSpeed Insights
Frem til dette punktet har vi snakket om First Input Delay (FID) som et middel til å måle et nettsteds respons, men i denne neste delen skal vi faktisk se på både FID og Total Blocking Time (TBT).
Begge er mål på brukerinteraksjoner, og måling og optimalisering av begge kan ha positive resultater for nettstedets brukeropplevelse.
1. Hva er TBT og hvordan skiller det seg fra FID
TBT indikerer tidsrommet et nettsted er for opptatt til å reagere på brukerinteraksjoner, for eksempel knappeklikk. TBT måler den totale varigheten som en nettside er "blokkert" - som er beslektet med nettsiden som sier: "Vent litt, jeg er opptatt" mens den behandler andre oppgaver.
TBT er en laboratoriemåling som brukes til ytelsesevaluering i utviklingsfasen, mens FID er en feltmåling som gir innsikt i faktiske brukeropplevelser.
I et scenario der en bruker klikker på en knapp på en nettside, måler FID forsinkelsen som finner sted mellom den brukerens handling og nettstedets svar.
Disse to beregningene henger sammen - hvis en utgiver klarer å optimalisere TBT under testing, vil de sannsynligvis observere en positiv innvirkning på FID-score i virkelige omstendigheter.
2. Hvordan måle FID og TBT med PageSpeed Insights
Følg disse trinnene for å måle disse beregningene med PageSpeed Insights:
- Naviger til PageSpeed Insights -verktøyet
- Analyser ønsket nettside
- Rull for å finne nettstedets FID- og TBT-score
3. Hvordan forbedre FID og TBT på et WordPress-nettsted
Forbedring av FID og TBT innebærer å optimalisere et nettsteds respons og interaktivitet. Her er noen tips:
- Komprimer og optimaliser CSS- og JavaScript-koden: Dette bidrar til å redusere filstørrelser og forbedrer responsen til nettstedet. Mange verktøy, for eksempel WPRocket, vil tilby en filoptimaliseringsfane som tilbyr å komprimere koden, noe som potensielt kan føre til en betydelig forbedring i FID- og TBT-score.
- Eliminer lange oppgaver: Lange oppgaver er de som blokkerer hovedtråden i 50 millisekunder eller mer. Å dele opp disse lange oppgavene i mindre, asynkrone oppgaver kan frigjøre hovedtråden og forbedre både FID og TBT.
- Optimaliser JavaScript-kjøring: Parsing, kompilering og utførelse av JavaScript kan være en viktig bidragsyter til høy FID og TBT. Utsettelse av ubrukt JavaScript, asynkron lasting av nødvendige store filer, minimalisering av ubrukte polyfills og sikring av at JavaScript kjøres effektivt kan redusere FID og TBT.
- Utnytt WordPress-temaets ytelsesinnstillinger: Mange WordPress-temaer kommer med innebygde ytelsesinnstillinger. Dra full nytte av disse innstillingene for å optimalisere nettstedet.
- Forhåndslasting og etterlasting av aktiva: Teknikker som lat innlasting av bilder, utsettelse av ikke-kritisk CSS, forhåndsinnlasting av kritiske eiendeler og forhåndshenting av tredjepartsressurser kan forbedre TBT-ytelsen og, senere, også forbedre FID.
Profftips: Når du optimaliserer, fokuserer du på den generelle brukeropplevelsen i stedet for individuelle metriske poengsummer. Denne helhetlige tilnærmingen kan gi bedre resultater for å forbedre nettstedets ytelse.
Å forbedre FID-poengsum er en kompleks prosess da den omhandler nettstedskode. Derfor er det første utgivere bør gjøre å begrense tung JavaScript-kjøring og eliminere unødvendige JS-filer, slik at nettleseren raskt kan reagere på brukerinteraksjoner.
Ved å ta opp nøkkelproblemene som påvirker et WordPress-nettsteds interaktivitet, kan utgivere effektivt forbedre både FID og TBT, og forbedre den generelle brukeropplevelsen og ytelsen.
Hvordan oppdage og forbedre LCP med PageSpeed Insights
Dårlig LCP-score betyr at en besøkende må vente lenger på at innholdet skal vises, noe som vanligvis fører til høyere fluktfrekvenser.
1. Hva er LCP-elementer?
LCP vurderer tiden det tar før hovedinnholdet på en nettside lastes: jo raskere dette innholdet vises på en skjerm, desto bedre brukeropplevelse.
De viktigste bidragsyterne til LCP-poengsummen er overveiende store elementer, for eksempel bildeelementer, videoelementer eller elementer med bakgrunnsbilder lastet gjennom URL-funksjoner.
I tillegg spiller blokknivåelementer - som overskrifter, underoverskrifter og tabeller, og blokkbaserte elementer som tekst - også en viktig rolle i utformingen av LCP.
2. Hvordan måle LCP med PageSpeed Insights
Følg disse trinnene for å måle LCP-poengsummen:
- Naviger til PageSpeed Insights
- Analyser ønsket nettside
- Rull til delen «Diagnoser ytelsesproblemer».
- Sett «Vis revisjoner som er relevante for» til LCP
- Brukere kan nå se relevante muligheter og diagnostikk.
Utgivere kan også identifisere LCP-elementet i PageSpeed Insights-rapporten ved å finne anbefalingen for Largest Contentful Paint-elementet i Diagnostikk-delen og utvide den for ytterligere detaljer.
3. Hvordan forbedre LCP-en til et WordPress-nettsted
Forbedring av LCP innebærer flere trinn, som hver bidrar til en raskere og mer strømlinjeformet nettsideopplevelse. Her er noen nøkkelstrategier:
- Optimaliser LCP-elementet: Dette trinnet avhenger av naturen til LCP-elementet. For eksempel kan et LCP-element som er et bilde komprimeres (uten at det går på bekostning av kvaliteten). Andre løsninger inkluderer forhåndsinnlasting av bilder over folden og plassholdere, visning av responsive bilder ved hjelp av srcset avhengig av brukerens skjermstørrelse og pass på at du ikke laster bilder over folden.
- Forbedre serverresponstider: LCP måler tiden fra en bruker kommer til en side til det punktet nettleseren mottar et svar fra serveren. Å investere i en webhotellplan av høyere kvalitet, implementere en riktig hurtigbuffermekanisme på både servernivå og nettlesernivå og flytte til en robust CMS-plattform som WordPress kan bidra til å redusere serverens responstid.
- Reduser gjengivelsesblokkerende elementer: Gjengivelsesblokkerende elementer som HTML, fonter og CSS er statiske filer som nettleseren behandler først før den laster inn innholdet. Færre gjengivelsesblokkerende kilder betyr at nettlesere vil bruke mindre tid på å gjengi disse elementene, øke hastigheten på innlastingstiden og forbedre LCP-resultatene. For eksempel kan utgivere bruke en enkel skrift for nettsidene sine eller forhåndsinnlaste modulære nettfonter.
- Fjern ubrukte plugins: WordPress-nettsteder kan bruke plugins til å administrere mange av sine tekniske aspekter. Det er imidlertid viktig å bare beholde pluginene og funksjonene deres som direkte bidrar til nettstedets funksjonalitet, mens du fjerner ubrukte. Dette kan rydde opp på nettstedet og forbedre LCP-poengsummen.
Profftips: Bufring er en kraftig prosess som kan forbedre LCP-poengsummen betydelig. Implementer en hurtigbufferløsning som lagrer en statisk kopi av nettsider på besøkendes enheter, og eliminerer behovet for å laste ned de samme dataene hver gang de besøker nettstedet.
Det er viktig å forstå at LCP er den desidert mest utfordrende CWV-beregningen å forbedre. Dette er fordi LCP er avhengig av TTFB (Time to First Byte), som er avhengig av hvor raskt serveren svarer. Avhengig av rammeverket som brukes, kan det være utfordrende å redusere serverens responstid.
Utgivere må huske på at forbedringsmarginen kan variere basert på infrastrukturen de jobber med.
Ved å fokusere på å optimalisere innholdselementene på hovedsiden, forbedre serverens responstider, redusere blokkeringstiden for JavaScript og CSS og være fornuftig med bruk av plugin-moduler, kan utgivere forbedre LCP-skårene sine betydelig.
Hvordan oppdage og forbedre CLS med PageSpeed Insights
Cumulative Layout Shift (CLS) dreier seg om visuell stabilitet, og måler eventuelle uventede endringer i en nettsides visuelle innhold mens den lastes inn. Visuelt ustabile nettsider kan erodere brukeropplevelsen deres, noe som bidrar til fluktfrekvenser.
1. Hva er CLS-elementer?
CLS måler visuell stabilitet, så elementene som bidrar til det er de som potensielt kan endre posisjoner uventet mens siden lastes. Dette kan være bilder uten spesifiserte dimensjoner, annonser, embeds og iframes uten faste dimensjoner.
I hovedsak kan ethvert element som kan bevege seg mens siden lastes, skade CLS-poengsummen.
2. Hvordan måle CLS med PageSpeed Insights
Bruk PageSpeed Insights til å identifisere og måle en nettsides CLS med disse trinnene:
- Naviger til PageSpeed Insights
- Analyser ønsket nettside
- Rull til delen «Diagnoser ytelsesproblemer».
- Sett «Vis revisjoner som er relevante for» til CLS
Denne tilnærmingen lar oss null inn på elementene som er ansvarlige for layoutskifter, og gir et utgangspunkt for forbedring.
3. Hvordan forbedre CLS-en til et WordPress-nettsted
Å forbedre CLS-en til et WordPress-nettsted innebærer strategiske skritt som kan forbedre en sides visuelle stabilitet betydelig:
- Rediger elementoppsettet: Se gjennom og juster oppsettet til elementene for å sikre at de ikke forskyves under innlasting av siden. Dette trinnet innebærer å angi spesifikke bredde- og høydeattributter for bilder og videoer, og statisk reservere plass for lazy-lastede annonser eller iframes ved å bruke en plassholder.
- Bruk kritisk CSS eller fjern ubrukt CSS: Ubrukt CSS kan bidra til layoutskift. Vurder å implementere Critical CSS som bare inneholder stilene som brukes over den synlige delen av nettsiden, eller eliminer overflødige CSS-koder for å forhindre unødvendige skift. Innføring av mindre stiler og forhåndsinnlasting av viktige stiler vil også bidra til å forbedre CLS.
- Unngå Sliders-plugins: Sliders kan utløse layoutskift på grunn av deres dynamiske natur. Hvis mulig, styr unna dem.
- Bruk riktig bilde- og div-størrelse: Nøyaktig størrelse og bruk av responsive bilder med samme sideforhold kan forhindre at elementer forskyves mens siden lastes inn. Spesifiser alltid størrelsene på disse elementene i bilde-CDN (nettverk for innholdslevering).
- Flytt CSS fra temaredigering til undertema style.css: Overføring av CSS til et undertema kan bidra til å redusere layoutskift ved å sikre at stiler lastes inn riktig.
- Bruk temaer og plugins som bruker transformasjonsanimasjoner: Disse verktøyene har mindre innvirkning på layoutskift sammenlignet med andre typer animasjoner.
Ved å gjøre disse justeringene kan eiere av WordPress-nettsteder betraktelig redusere sidens CLS-poengsum, noe som fører til en mer stabil og morsom brukeropplevelse.
Profftips: Implementer lat lasting for bilder utenfor skjermen. Denne strategien lar bilder kun lastes inn når de er i ferd med å gå inn i visningsporten, og forhindrer dermed layoutskifter forårsaket av sent-lastede bilder.
Husk at CLS er en kritisk brukersentrisk beregning som måler i hvilken grad innholdet på et nettsted har endret seg etter hvert som siden lastes inn. Jo lavere CLS-score, jo bedre brukeropplevelse.
Til syvende og sist krever forbedring av CLS-score en flerstrengende tilnærming. Regelmessige kontroller med verktøy som PageSpeed Insights, konsekvent layoutspraksis og flittig bruk av temaer og plugins kan alle bidra til en lavere CLS-poengsum og en mer stabil, brukervennlig nettside.
Innpakning
Utgivere som måler Core Web Vitals (CWVs) vil være bedre posisjonert til å optimalisere brukeropplevelsen på nettstedet.
Ikke bare vil optimalisering av CWV-er bidra til å forbedre leseropplevelsen betydelig, men å gjøre det bidrar også til SEO. Sider som lastes raskt, er visuelt stabile og reagerer raskt på brukerinndata er ikke bare attraktive for brukere, men også søkemotoralgoritmer.
Bortsett fra å lære verktøyene som PageSpeed Insights, bør utgivere også følge nøye med på digitale publiseringstrender , oppdateringer av søkemotoralgoritmer og ekspertinnsikt for å levere en leseopplevelse i verdensklasse.
