Ytelse og sikkerhet i WordPress-prosjekter – hvordan planlegge et sikkert prosjekt som er kompatibelt med Core Web Vitals?
Siden 2021 har Google kunngjort mange endringer i universet sitt, og dette var ikke første gangen vi har å gjøre med nettstedets ytelse og tilgjengelighet. I 2018 introduserte Google Page Speed Update, som satte mer fokus på nettstedets ytelse emnet, og Mobile Indexing Update, som fikk webmastere til å fokusere på “mobilitetsvennlighet”. Siden den gangen må vi alle huske at når det gjelder ytelsen på nettstedet vårt, er mobilvisningen viktigst.
Både PageSpeed Update og Mobile Indexing Update hadde en viss innvirkning på nettsider, men ærlig er det ikke mange som betrakter dem som betydelige gamechangers. Hva med Core Web Vitals? Dette er det første så kraftige verktøyet utviklet av Google som kan pålegge endringer på hver eneste digital skaper på nettet. Google informerte oss om at Core Web Vitals gradvis vil bli en del av rangeringsfaktorene. Den gradvise utrullingen startet i juni 2021.
Innholdsfortegnelse:
- Hva er Core Web Vitals?
- Core Web Vitals i detalj
- Hvilke målinger valgte Google for å bestemme Core Web Vitals?
- Hvordan måle Core Web Vitals?
- Ytelse og sikkerhet for WordPress-prosjekter – hvordan planlegge et sikkert og Core Web Vitals-kompatibelt prosjekt?
- Hvordan påvirker Core Web Vitals SEO?
- Hvorfor bør du bry deg om Core Web Vitals?
Hva er Core Web Vitals?
Det er rett og slett den matematiske eller numeriske representasjonen av brukeropplevelsen. For de som lurer på hva en god brukeropplevelse er – det er en kompleks idé som omfatter nettsideytelse og presentasjon av innhold og hvordan disse er oppfattet av brukere. Core Web Vitals fokuserer på tre grunnleggende opplevelser som beskriver hvordan en bruker samhandler med nettsiden din:
- Nettsidens lastetid
- Interaktivitet
- Visuell stabilitet
Disse tre faktorene har tilhørende indikatorer:
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Statusdefinisjoner i henhold til Google
Du bør evaluere statusmålene mot følgende omfanger:
Bilde: Kjerne nettvital-metrikk
Disse normene er ganske strenge. Google vil sikkert evaluere disse grunnleggende metrikkene over tid, og det kan hende det vil legges til flere i fremtiden som gjenspeiler teknologi oppdateringer og brukerforventninger.
Core Web Vitals i detalj
CWV-rapporten viser hvordan nettstedet ditt presterer basert på brukerdata fra hele verden, som kommer fra CrUX-rapporten. Før vi går videre, la oss fokusere på hver metrikk separat for å forstå bedre hva de er og hvordan Google definerer dem.
Largest Contentful Paint (LCP)
LCP er tiden det tar å vise det største synlige innholdselementet i visningsområdet. Klokken begynner å tikke når brukeren ber om URL-en. Det synlige elementet er det som er definert i visningsområdet i <HEAD>-delen av siden. Det største elementet er vanligvis et bilde eller video, eller et stort blokk-nivå tekstelement. Det betyr noe fordi det forteller leseren at URL-en lastes.
For å gjøre det enkelt, er LCP-scoren gitt når det største synlige elementet lastes inn på skjermen. For å beregne metrikken, bruk Google Chrome Dev Tools eller Google PageSpeed Insights. Disse verktøyene tar følgende elementer i betraktning:
- <img>-elementer
- <image>-elementer inne i et <svg>-element
- <video>-elementer (plakatbildet brukes)
- Et element med et bakgrunnsbilde lastet via URL()-funksjonen (i motsetning til en CSS-gradient)
- Blokk-nivå-elementer som inneholder tekstnoder eller andre inline-nivå tekstelementer-barn.
Det er viktig å huske at bilder som opptar hele visningsområdet (viewport) ikke regnes som LCP-kandidater. Gruppe-LCP som presenteres i rapporten, er tiden det tar for at 75% av besøkene til en URL i gruppen skal nå LCP-tilstanden.
First Input Delay
FID er tiden fra når en bruker først samhandler med siden din (uansett interaktivt element som brukeren først klikker på) til tiden når nettleseren svarer på den interaksjonen. Jo lengre tid det tar for brukeren å samhandle med siden, jo dårligere FID-nivået er. Fokusering på første inndataforsinkelse er avgjørende for e-handel, da det er nødvendig å laste inn alle informasjonskapslene som følger med brukeren i handlingen. Det er også avgjørende på sider der brukeren må gjøre noe – altså samhandle med nettsiden – fordi dette er når siden har blitt interaktiv.
Alle skjønner viktigheten av det første inntrykket vi gir, det er like viktig når vi møter mennesker som når vi bygger våre brukeres førsteinntrykk når de kommer inn på nettsiden eller butikken vår. Når det gjelder Internettet, hjelper det oss med å få lojale, tilbakevendende brukere som blir våre kunder eller til og med merkevaretilhengere. Hva som utgjør et godt førsteinntrykk da? Hva skal måles og hvordan?
Det kan ta forskjellige former på nettet, fra nettdesign og hastighet til nettside-responsivitet. Det kan være vanskeligere å måle hvordan visuelle aspekter appellerer til brukerne våre enn å måle hastighet og responsivitet. Metrikken “First Contentful Paint” hjelper til med å forstå hvordan en nettsides interaktivitet og responsivitet legger til rette for brukernes førsteinntrykk.
Hva er en god FID-poengsum?
Ifølge Google bør nettsteder strebe etter å ha en First Input Delay på 100 millisekunder eller mindre for å gi en god brukeropplevelse. For å sikre at du oppnår dette for de fleste brukerne, bør du holde deg til en 75. persentil av sideinnlastingsmålingene, segmentert på mobile og stasjonære enheter.
Cumulative Layout Shift (CLS)
CLS er målingen som tar for seg endringene i den største utbruddet av layoutforskyvninger for hver uventede layoutforskyvning som oppstår i løpet av hele livssyklusen til en side. En layoutforskyvning skjer hver gang et synlig element endrer posisjon fra én rendret ramme til den neste. Med andre ord, det er alle disse tilfellene når du går inn på en nettside og plutselig flyttes innholdet du ser på nedover synlig del av skjermen fordi annonsen vises over folden. Teksten beveger seg uten advarsel, og du mister oversikten. Noen ganger vil du trykke på en knapp, men du ender opp med å klikke på noe annet, og lenken flytter deg til et annet sted. Er ikke det irriterende?
Google anbefaler at en god CLS ikke bør overstige 0,1 poeng. Hvordan beregnes dette:
layoutforskyvningspoeng = påvirkningsbrøk * avstandsbrøk
Hva betyr de ulike elementene i Layout Shift Score (layoutforskyvningspoeng)?
For å beregne layoutforskyvningspoenget, ser nettleseren på visningsområdet og bevegelsen til ustabile elementer i visningsområdet mellom to rendrede rammer. CLS-poengsummen beregnes på grunnlag av to målinger av denne bevegelsen: påvirkningsbrøken og avstandsbrøken. Se definisjonene nedenfor:
- Impact fraction (Påvirkningsbrøk): det måler hvordan ustabile elementer påvirker visningsområdet mellom to rammer. For eksempel, på grunn av lasting av ytterligere ressurser, flyttet et synlig element seg med 25%, og tar nå 75% av det tilgjengelige området i en ramme. Påvirkningsbrøken er 0,75.
- Distance Fraction (Avstandsbrøk): Det måler hvor langt et gitt element beveget seg på grunn av lasting av ytterligere ressurser. Hvis et element beveget seg med 25% innenfor et gitt visningsområde, betyr det at avstandsbrøken for dette elementet er 0,25.
Det vil si at 0,75 x 0,25 = 0,18 – la oss si 0,2 for enklere klassifisering av CLS. 0,2 betyr at siden trenger forbedring.
CLS skiller seg betydelig fra andre Core Web Vitals, ettersom det viser om en side er aggressiv, det vil si f.eks. full av annonser over folden. I den siste tiden har Google straffet nettsider som var overbelastet med annonser – nå har vi en offisiell måling som hjelper til med å bekrefte når en nettside tillater for mye reklame.
Hvilke målinger valgte Google for å bestemme Core Web Vitals?
For å avgjøre om en side består Core Web Vitals evalueringen, hevder Google å bare bruke feltdata, som betyr å bruke kun virkelige brukerdata. Sammen med mobilvennlighet og om nettstedet tilbyr HTTPS eller ikke har plagsomme mellomrom, har Core Web Vitals blitt de grunnleggende faktorene som bestemmer hvordan Google rangerer nettopplevelsen et nettsted har å tilby. Poengsummen er en faktor i algoritmene som bestemmer hvor høyt nettsiden din blir rangert i søkeresultatene.
Core Web Vitals-målene blir stadig testet og forbedret. F.eks. har blitt CLS oppdatert for å bli nøytral for tiden på siden. FID skal omarbeides for å bli en bedre responsivitetsmåling, samt en ny mykhet-måling som vil måle animasjoner. For å gjøre prosessen med å implementere endringer som er skreddersydd til kravene, mye enklere, oppdaterte Google sine verktøy for utviklere for å gjøre det mer praktisk å se grunnleggende nettstedsmetrikker og analysere anbefalte områder for forbedring. De oppdaterte Lighthouse og PageSpeed Insights, og Google Search Console ble beriket med en ny spesialrapport.
Hvordan måle Core Web Vitals
- Utviklerverktøy i Google Chrome
Den enkleste måten å måle Core Web Vitals på er å bruke utviklerverktøyene som er innebygd i Google Chrome-nettleseren. Du må bare gå til ytelsesfanen i utviklerverktøyene ved å trykke F12 eller høyreklikke på siden og velge Inspiser. Når du er i ytelsesfanen, klikker du på Opptaksknappen for å starte profilingen. Det bør bare ta noen få sekunder å få en tidslinje med markerte viktige punkter. Du kan bruke denne dataen til å identifisere ytelsesengasjementer og optimalisere ytelsen til nettstedet ditt.
White Label Coders Lighthouse performance report
- PageSpeed Insights drevet av CrUX
Et annet nyttig verktøy fra Google er CrUX. CrUX står for Chrome User Experience Report. Hovedfordelen med dette verktøyet er at resultatene er basert på en reell brukertrafikk. Google Chrome-brukere som tillater at Google samler inn anonyme data, blir kilden til informasjon som brukes til å lage de rapportene. I den intuitive dashbordet kan du se sanntids- og historiske diagrammer. Historiske rapporter er det som gjør verktøyet mer kraftig enn Chrome Console i seg selv, da du raskt og enkelt kan sammenligne dataene hver gang du gjør endringer på nettstedet ditt.
White Label Coders page speed insights
- Google Search Console-rapporter
Google Search Console-rapporter er også basert på feltdata fra CrUX. Verktøyet grupperer sider etter likhet og gir et interessant innblikk i hvordan ytelsesforbedringer påvirker hele kategorier av nettsteder. Du kan evaluere både nettsidens søk og ytelse på måter som ikke er tilgjengelige for andre Google-verktøy. Det er et populært verktøy blant markedsførere og utviklere. Det er to Core Web Vitals-rapporter – en for mobil og en for desktop. Hver av dem gir deg informasjon om feltdata for grupper av URL-er samt ytelsen deres. En flott ting er at du kan få informasjon om hele nettstedet ditt i stedet for bare en side.
GSC
Ytelse for WordPress-prosjekter – hvordan planlegge et Core Web Vitals-kompatibelt prosjekt?
Nå er det på tide å svare på det kritiske spørsmålet – hvordan optimalisere ditt WordPress-prosjekt på riktig måte for å forbedre dine Core Vitals-poeng? Det er ulike strategier du bør vurdere hvis du vil planlegge en sikker og Core Web Vitals-kompatibel nettside.
The Time to First byte & Time to Interactive (Tid til første byte og tid til interaktivitet)
TTFB (tid til første byte). Det er tiden det tar for en server å motta og behandle en forespørsel fra en nettleser og sende det første dataelementet som svar. TTFB påvirkes av serverhastigheten, så det er viktig å velge klokt hvor nettstedet ditt er hosted. Også målingen kan påvirkes av kvaliteten og effektiviteten til server-siden – PHP-kode. Jo lavere TTFB er, desto bedre brukeropplevelsen.
TTI (Time to Interactive – tid til interaktivitet). Det er tiden det tar for en nettside å bli fullt interaktiv og responsiv til brukerinput. I andre ord er det tiden en bruker trenger for å begynne å samhandle med nettsiden din og utføre noen oppgaver. Ifølge Google er en rask TTI under 3,8 sekunder. For å oppnå en lav TTI, bør du optimalisere ytelsen til nettsiden din slik at den lastes raskt og blir interaktiv så raskt som mulig. Blant annet kan fjerning av unødvendig JavaScript-kode være til hjelp – lasting av unødvendige JS- eller CSS-filer før ditt hovedinnhold senker ned lastetiden. Du kan også prøve å bruke et CDN (innholdsdistribusjonsnettverk) for tredjeparts skript. Dette vil øke din LCP-tid for besøkende rundt om i verden og redusere TTFB.
Caching (caching)
HTTP-caching (HTTP-caching). Dette gjør det mulig for en nettleser å lagre en kopi av en nettressurs lokalt. Derfor trenger ikke nettleseren å sende en forespørsel til serveren hver gang den blir åpnet. Å bruke HTTP-caching resulterer i færre runder med å laste inn siden. Det øker hastigheten på hvordan serveren kan svare, noe som forbedrer Core Web Vitals til WordPress-prosjektet ditt.
Optimalisering av nettlesercaching. Dette vil ta tak i anbefalingen fra PageSpeed Insights om å Server statiske eiendeler med en effektiv cache-policy. Optimalisering av nettlesercaching betyr å sette riktig alternativ for de statiske filene som nettleseren din holder i sin cache.
Bilder på nettsiden
Bildeoptimalisering. Store bilder bremser ned nettsiden når den laster inn. Hvis du vil optimalisere CWV-en, bør du vurdere å komprimere bilder og bruke formater som støtter komprimering. Å holde bildene dine optimalisert vil øke hastigheten på nettstedet ditt og adressere anbefalinger fra PageSpeed Insights som Riktig størrelse på bilder (Properly size images ) og Utsett av-skjerm-bilder (Defer offscreen images).
Hvordan påvirker Core Web Vitals SEO?
Siden 2021 har Google betraktet Core Web Vitals som et rangeringssignal i søkealgoritmene sine. Dette betyr at nettsteder med god ytelse på disse metrikker (sammen med mobilvennlighet, HTTPS-sikkerhet og retningslinjer for påtrengende mellomrom) kan rangere høyere i søkeresultatene sammenlignet med nettsteder med dårlig ytelse. Core Web Vitals påvirker både mobil og desktop organisk resultat, og deres poengsum for ikke-indekserte sider kan også ha betydning. Så, hvis du bryr deg om SEO-ytelsen til nettsiden din, er det obligatorisk å forbedre dine Core Web Vitals.
Oppsummering: Hvorfor bør du bry deg om Core Web Vitals?
Som forklart ovenfor, kan Core Web Vitals ha innvirkning på konverteringsraten, tiden på nettstedet og avvisningsraten. De ser på hvordan nettstedet ditt presterer på en rekke web-metrikker som hastighet, responsivitet og sidens lastetid. Selv om ulike interessenter i selskapet ditt kan ha ulike prioriteringer, kan CWV bringe dem alle på samme side ved å fokusere på optimalisering av brukersentrerte metrikker og resulterende forretningsvekst. Hvis nettstedet ikke er oppdatert med hensyn til Core Web Vitals, kan det gi prioritet til konkurrentenes tilbud. Veien til god CWV vil variere avhengig av hvor du er i ytelsesreisen – det kan bety å plukke de lavt-hengende fruktene og få fine resultater eller implementere komplekse løsninger som fikser utfordrende problemer. Uansett omfang, å ta vare på Core Web Vitals er en langsiktig investering i veksten av virksomheten din.
Agata har det overordnede ansvaret for markedsføringsstrategien vår, inkludert merkevareledelse og bedriftsidentitet. Hun er ansvarlig for å designe og administrere selskapets nettsted og utvikle en strategi for innholdsmarkedsføring som er i tråd med selskapets mål. Agata koordinerer og skaper markedsføringskampanjer og gjør oss synlige! Hun er en lidenskapelig og engasjert leder.
