WordPress er det mest populære innholdsstyringssystemet (CMS) på planeten, takket være brukervennligheten og fleksibiliteten. WordPress' omfattende tilpasningsmuligheter lar utgivere lage nettsteder som resonnerer dypt med målgruppene sine.
Og til tross for CMS-ens kraftige funksjoner, er det fortsatt mulig å lage nettsteder som ser bra ut, men som sliter med å øke publikumstallene. Selv om en innholdsgjennomgang absolutt er tilrådelig, bør utgivere først vurdere en teknisk gjennomgang for å sikre at det ikke skjer noe i bakgrunnen på nettstedet som hindrer rekkevidden deres.
Google Core Web Vitals (CWV-er) er blant de viktigste ytelsesmålingene de bør måle.
Disse beregningene, som Google konverterte til rangeringssignaler kort tid etter introduksjonen i 2020 , spiller en nøkkelrolle i måling av en nettsides brukeropplevelse (UX).
CWV-ene omfatter tre forskjellige, men likevel sammenkoblede målinger:
- Største innholdsrike maling (LCP)
- Første inngangsforsinkelse (FID)
- Kumulativ layoutforskyvning (CLS)
Disse signalene måler henholdsvis den opplevde lastehastigheten, interaktiviteten og den visuelle stabiliteten til en nettside.
La oss se nærmere på disse CWV-ene for å forstå hvorfor de er så viktige, hvordan vi måler dem nøyaktig, og deretter veie opp de handlingsrettede tiltakene vi kan ta for å forbedre poengsummene deres.
Hva er Core Web Vitals-målinger?
Googles tre Core Web Vitals (CWV-er) evaluerer kvaliteten på et nettsteds brukeropplevelse (UX), og gir innsikt i hvor godt nettsider presterer når det gjelder lastehastighet, interaktivitet og visuell stabilitet.
- Største innholdsrike farge (LCP): Dette måler nettstedets lastehastighet og refererer spesifikt til punktet i lasteprosessen når hovedinnholdet sannsynligvis er lastet inn.
Ta for eksempel et blogginnlegg om en populær ny teknologidings. Hvis hovedbildet – kanskje et bilde av dingsen – 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 værende, leser og engasjerer seg i innholdet.
Omvendt kan langsomme lastetider føre til at besøkende forlater siden, noe som kan resultere i redusert trafikk.
- Forsinkelse ved første input (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 hendelseshåndterere 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 regnes 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 tap av 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.
- Kumulativ layoutforskyvning (CLS): Dette kvantifiserer visuell stabilitet, eller mengden uventet layoutforskyvning av synlig innhold på en nettside.
Hvis et nyhetsnettsted har tekst, bilder eller annonser som plutselig endrer seg når siden lastes 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 avskrekke dem fra å komme tilbake til nettstedet.
: Web.dev - Interaksjon til neste maling (INP): Dette evaluerer en sides generelle responstid på brukerinteraksjoner. Den overvåker latensen til alle mus- og tastaturinteraksjoner gjennom en brukers besøk på en nettside, der den lengste observerte interaksjonen (ignorering av utelukkende verdier) danner den endelige INP-verdien.
Å oppnå en ideell INP-poengsum kan være en utfordring på grunn av den store variasjonen i enhetskapasitet. Det vil imidlertid fortsatt være rimelig for utgivere å sikte mot en INP-poengsum i den 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 responstid. Hvis INP-en er mellom 200 millisekunder og 500 millisekunder, trenger nettstedets responstid litt arbeid. Til slutt, hvis INP-en er større enn 500 millisekunder, anses responstiden som dårlig.
Kilde: Web.dev
Hvorfor er Core Web Vitals-poengsummen viktig?
Brukere krever raske lastehastigheter, smidig 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 sannsynligheten for avvisning økte med 32 % da sideinnlastingstiden økte fra 1 sekund til 3 sekunder. Samtidig opplevde nyhetssider som besto CWV-testen en 22 % lavere forlatelsesrate enn de som ikke besto.
1. Påvirk søkeresultatene
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 betjener brukerne, noe som direkte påvirker nettstedets plassering i søkeresultatene.
Enkelt sagt kan en bedre CWV-poengsum hjelpe et WordPress-nettsted med å vises høyere i Googles søkerangeringer.
2. Øk trafikken
Nettsteder med optimaliserte CWV-er kan oppleve en økning i trafikk. For eksempel reduserte det populære nettstedet for karriereveiledning LearnHowToBecome.org den gjennomsnittlige lastetiden fra 7 til 2,9 sekunder og så en økning i den månedlige trafikken fra 500 000 til 750 000.
3. Øk inntektene
En bruker har mindre sannsynlighet for å lese en artikkel hvis de opplever lang lastetid (LCP), forsinket respons på interaksjonen (FID) eller en ustabil layout (CLS). Nettsteder som utmerker seg på alle tre målinger, holder ikke bare brukerens oppmerksomhet, men kan også lede dem nedover konverteringstrakten, noe som til slutt gir mer inntekter for bedriften.
I bunn og grunn er CWV-beregninger mer enn bare tall. De gir innsikt i et nettsteds ytelse fra et brukerperspektiv, slik at merkevaren kan forbedre seg på områder som er viktigst for de besøkende.
Slik sjekker du et WordPress-nettsteds Core Web Vitals-poengsum
Å forstå hvordan man sjekker CWV-poengsummer er det første skrittet mot å forbedre et nettsteds ytelse. Det finnes to måter å måle disse poengsummene på, enten internt ved hjelp av 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 løsningen, er det viktig å forstå at måling av CWV-er 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 samhandler med et nettsted på tvers av en rekke enheter, tilkoblinger og andre virkelige forhold.
Hvis brukere for eksempel primært bruker et WordPress-nettsted på mobile enheter i 3G-nettverk, kan feltdata avdekke ytelsesproblemer som kanskje ikke vises i et kontrollert laboratoriemiljø.
På den annen side genereres labdata i et kontrollert miljø og brukes til å feilsøke ytelsesproblemer. De fanger ikke opp hele spekteret av brukeropplevelser i den virkelige verden, men gir reproduserbare resultater for feilsøking og optimalisering av et nettsteds 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-poengsummer.
Kilde: Web.dev
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 å komme i gang med.
Slik oppdager og forbedrer du FID og TBT med PageSpeed Insights
Frem til dette punktet har vi snakket om First Input Delay (FID) som en metode for å måle et nettsteds responstid, men i neste avsnitt skal vi faktisk se på både FID og Total Blocking Time (TBT).
Begge er målinger av brukerinteraksjoner, og måling og optimalisering av begge kan ha positive resultater for et nettsteds brukeropplevelse.
1. Hva er TBT og hvordan skiller det seg fra FID
TBT indikerer tidsperioden et nettsted er for opptatt til å reagere på brukerinteraksjoner, for eksempel knappeklikk. TBT måler den totale varigheten en nettside er «blokkert» – noe som kan sammenlignes med at nettsiden 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 oppstår mellom brukerens handling og nettstedets respons.
Disse to målingene er sammenkoblet – hvis en utgiver klarer å optimalisere TBT under testing, vil de sannsynligvis observere en positiv innvirkning på FID-poengsummene under reelle omstendigheter.
2. Slik måler du FID og TBT med PageSpeed Insights
For å måle disse beregningene med PageSpeed Insights, følg disse trinnene:
- Naviger til PageSpeed Insights- verktøyet
- Analyser den ønskede nettsiden
- Bla for å finne nettstedets FID- og TBT-poengsummer
3. Hvordan forbedre FID og TBT på et WordPress-nettsted
Forbedring av FID og TBT innebærer å optimalisere et nettsteds responsivitet og interaktivitet. Her er noen tips:
- Komprimer og optimaliser CSS- og JavaScript-koden: Dette bidrar til å redusere filstørrelser og forbedrer nettstedets responsivitet. Mange verktøy, som WPRocket, tilbyr en filoptimaliseringsfane som tilbyr å komprimere koden, noe som potensielt kan føre til en betydelig forbedring av FID- og TBT-poengsummene.
- Eliminer lange oppgaver: Lange oppgaver er de som blokkerer hovedtråden i 50 millisekunder eller mer. Å dele disse lange oppgavene inn i mindre, asynkrone oppgaver kan frigjøre hovedtråden og forbedre både FID og TBT.
- Optimaliser JavaScript-kjøring: Parsing, kompilering og kjøring av JavaScript kan bidra vesentlig til høy FID og TBT. Å utsette ubrukt JavaScript, asynkron lasting av nødvendige store filer, minimere ubrukte polyfills og sørge for at JavaScript kjøres effektivt kan redusere FID og TBT.
- Utnytt ytelsesinnstillingene til WordPress-temaer: Mange WordPress-temaer har innebygde ytelsesinnstillinger. Dra full nytte av disse innstillingene for å optimalisere nettstedet.
- Forhåndslasting og etterlasting av ressurser: Teknikker som lat lasting av bilder, utsettelse av ikke-kritisk CSS, forhåndslasting av kritiske ressurser og forhåndshenting av tredjepartsressurser kan forbedre TBT-ytelsen og dermed også forbedre FID.
Profftips: Når du optimaliserer, fokuser på den generelle brukeropplevelsen i stedet for individuelle metriske poengsummer. Denne helhetlige tilnærmingen kan gi bedre resultater når det gjelder å forbedre nettstedets ytelse.
Å forbedre FID-poengsummene er en kompleks prosess, ettersom det gjelder 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 tak i de viktigste problemene som påvirker interaktiviteten til et WordPress-nettsted, kan utgivere effektivt forbedre både FID og TBT, og dermed forbedre den generelle brukeropplevelsen og ytelsen.
Slik oppdager og forbedrer du LCP med PageSpeed Insights
Dårlige LCP-poengsummer betyr at en besøkende må vente lenger på at innholdet skal vises, noe som vanligvis fører til høyere avvisningsrater.
1. Hva er LCP-elementer?
LCP vurderer tiden det tar for hovedinnholdet på en nettside å laste: jo raskere dette innholdet vises på skjermen, desto bedre er brukeropplevelsen.
De viktigste bidragsyterne til LCP-poengsummen er hovedsakelig elementer av betydelig størrelse, for eksempel bildeelementer, videoelementer eller elementer med bakgrunnsbilder lastet inn via URL-funksjoner.
I tillegg spiller blokknivåelementer – som overskrifter, underoverskrifter og tabeller, og blokkbaserte elementer som tekst – også en viktig rolle i utformingen av det store indekskonseptet.
2. Slik måler du LCP med PageSpeed Insights
For å måle LCP-poengsummen, følg disse trinnene:
- Naviger til PageSpeed Insights
- Analyser den ønskede nettsiden
- Bla til delen «Diagnostisering av 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 det største innholdsrike malingselementet 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 hvert bidrar til en raskere og mer strømlinjeformet nettstedopplevelse. Her er noen viktige strategier:
- Optimaliser LCP-elementet: Dette trinnet avhenger av LCP-elementets natur. 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åndslasting av bilder over brettet og plassholderbilder, servering av responsive bilder ved hjelp av srcset avhengig av brukerens skjermstørrelse, og å sørge for at bilder over brettet ikke lastes inn for sent.
- Forbedre serverresponstider: LCP måler tiden fra en bruker kommer til en side til nettleseren mottar et svar fra serveren. Å investere i en webhotellplan av høyere kvalitet, implementere en skikkelig hurtigbuffermekanisme både på servernivå og nettlesernivå og gå over til en robust CMS-plattform som WordPress kan bidra til å redusere serverresponstiden.
- Reduser gjengivelsesblokkerende elementer: Gjengivelsesblokkerende elementer som HTML, fonter og CSS er statiske filer som nettleseren behandler først før den laster innholdet. Færre gjengivelsesblokkerende kilder betyr at nettlesere vil bruke mindre tid på å gjengi disse elementene, noe som øker lastetiden og forbedrer LCP-poengsummene. Utgivere kan for eksempel bruke en enkel font for nettsidene sine eller forhåndslaste modulære webfonter.
- Fjern ubrukte programtillegg: WordPress-nettsteder kan bruke programtillegg for å administrere mange av sine tekniske aspekter. Det er imidlertid viktig å bare beholde programtilleggene og funksjonene deres som direkte bidrar til nettstedets funksjonalitet, samtidig som man fjerner ubrukte. Dette kan rydde opp på nettstedet og forbedre LCP-poengsummen.
Profftips: Caching er en kraftig prosess som kan forbedre LCP-poengsummen betydelig. Implementer en caching-lø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 klart mest utfordrende CWV-målingen å forbedre. Dette er fordi LCP er avhengig av TTFB (Time to First Byte), som avhenger av hvor raskt serveren reagerer. Avhengig av hvilket rammeverk 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 responstider for servere, redusere blokkeringstider for JavaScript og CSS og være nøye med bruk av plugins, kan utgivere forbedre LCP-poengsummene sine betydelig.
Slik oppdager og forbedrer du CLS med PageSpeed Insights
Kumulativ layoutforskyvning (CLS) dreier seg om visuell stabilitet, og måler eventuelle uventede endringer i en nettsides visuelle innhold når den lastes inn. Visuelt ustabile nettsider kan svekke brukeropplevelsen deres, noe som bidrar til avvisningsfrekvenser.
1. Hva er CLS-elementer?
CLS måler visuell stabilitet, så elementene som bidrar til dette er de som potensielt kan endre posisjon uventet mens siden lastes inn. Dette kan være bilder uten spesifiserte dimensjoner, annonser, innebygde elementer og iframes uten faste dimensjoner.
I hovedsak kan ethvert element som kan bevege seg rundt mens siden lastes inn, skade CLS-poengsummen.
2. Slik måler du CLS med PageSpeed Insights
Bruk PageSpeed Insights til å identifisere og måle en nettsides CLS med disse trinnene:
- Naviger til PageSpeed Insights
- Analyser den ønskede nettsiden
- Bla til delen «Diagnostisering av ytelsesproblemer»
- Sett «Vis revisjoner som er relevante for» til CLS
Denne tilnærmingen lar oss fokusere på elementene som er ansvarlige for layoutendringer, noe som gir et utgangspunkt for forbedring.
3. Hvordan forbedre CLS-en til et WordPress-nettsted
Å forbedre CLS-en til et WordPress-nettsted innebærer strategiske trinn som kan forbedre en sides visuelle stabilitet betydelig:
- Rediger elementoppsettet: Se gjennom og juster oppsettet til elementene for å sikre at de ikke forskyves under sideinnlasting. Dette trinnet innebærer å angi spesifikke bredde- og høydeattributter for bilder og videoer, og statisk reservere plass for annonser eller iframes som lastes inn sent ved hjelp av en plassholder.
- Bruk kritisk CSS eller fjern ubrukt CSS: Ubrukt CSS kan bidra til layoutendringer. Vurder å implementere kritisk CSS som bare inneholder stilene som brukes over fold-en, eller fjern overflødige CSS-koder for å forhindre unødvendige endringer. Innebygging av mindre stiler og forhåndsinnlasting av viktige stiler vil også bidra til å forbedre CLS.
- Unngå Sliders-pluginer: Sliders kan utløse layoutendringer på grunn av sin dynamiske natur. Hvis mulig, hold deg unna dem.
- Bruk riktig størrelse på bilder og div-filer: Nøyaktig størrelse og bruk av responsive bilder med samme sideforhold kan forhindre at elementer forskyves når siden lastes inn. Spesifiser alltid størrelsene på disse elementene i bilde-CDN-et (content delivery network).
- Flytt CSS fra temaeditoren til barnetemaet style.css: Overføring av CSS til et barnetema kan bidra til å redusere layoutendringer ved å sikre at stiler lastes inn riktig.
- Bruk temaer og programtillegg som bruker transformasjonsanimasjoner: Disse verktøyene har mindre innvirkning på layoutendringer sammenlignet med andre typer animasjoner.
Ved å gjøre disse justeringene kan eiere av WordPress-nettsteder redusere sidens CLS-poengsum betraktelig, noe som fører til en mer stabil og behagelig brukeropplevelse.
Profftips: Implementer lazy loading for bilder utenfor skjermen. Denne strategien lar bilder lastes inn bare når de er i ferd med å komme inn i visningsfeltet, og forhindrer dermed layoutendringer forårsaket av bilder som lastes inn for sent.
Husk at CLS er en kritisk brukersentrert måleenhet som måler i hvilken grad innholdet på et nettsted har endret seg etter hvert som siden lastes inn. Jo lavere CLS-poengsum, desto bedre er brukeropplevelsen.
Til syvende og sist krever forbedring av CLS-poengsummene en flerdelt tilnærming. Regelmessige kontroller med verktøy som PageSpeed Insights, konsekvent layoutpraksis og flittig bruk av temaer og plugins kan alle bidra til en lavere CLS-poengsum og et mer stabilt og brukervennlig nettsted.
Oppsummering
Utgivere som måler Core Web Vitals (CWV-er) vil være bedre i stand til å optimalisere brukeropplevelsen på nettstedet sitt.
Ikke bare vil optimalisering av CWV-er bidra til å forbedre leseropplevelsen betydelig, men det bidrar også til SEO. Sider som lastes inn raskt, er visuelt stabile og reagerer raskt på brukerinput er ikke bare attraktive for brukere, men også for søkemotoralgoritmer.
I tillegg til å lære seg verktøy som PageSpeed Insights, bør utgivere også nøye overvåke trender i digital publisering , oppdateringer av søkemotoralgoritmer og ekspertinnsikt for å konsekvent levere en leseopplevelse i verdensklasse.
