Hvordan forbedrer du Google Core Web Vitals-poengene?

(23. august 2020)

Neste æra på ytelsen til websiden

Det har gått et par måneder jeg har jobbet om strategier for å forbedre nettsidenes ytelse på mine selskapseide nettsteder og for å være ærlig, det er et veldig interessant stykke arbeid å dele med dere.

Jeg forstår at det ikke er noe å jobbe med ytelse på websiden. ting og folk har kommet med mange ideer og triks for å øke hastigheten på siden. Men nå virker det som om det ikke er nok lenger, og du må gå videre til neste nivå !!

Som dere burde vite om viktigheten av SEO (søkemotoroptimalisering) og å få frem nettsideresultatene dine, ikke bare på den første siden av google-resultatene, men det er veldig bra på toppen av den samme første siden! Lang historie kort – la meg garantere deg at heretter vil Google Core Web Vitals være en av disse største bidragsyterne til SEO-rangering av Googles søkeresultater.

Kort & Enkel forklaring på Google Core Web Vitals

Core Web Vitals, introdusert i første kvartal i år, er et sett med beregninger relatert til hastighet, respons og visuell stabilitet på websiden din.

Google har definert disse som Core Web Vitals:

  • Størst innholdsrik maling : Tiden det tar før en sides hovedinnhold lastes inn. En ideell LCP-måling er 2,5 sekunder eller raskere.
  • Forsinkelse for første inngang : Tiden det tar for en side å bli interaktiv. En ideell måling er mindre enn 100 ms .
  • Kumulativ Layout Shift : Mengden uventet layoutskift for visuelt sideinnhold. En ideell måling er mindre enn 0,1 .

Dette settet med beregninger ble designet for å hjelpe nettstedseiere til å måle brukeropplevelsen de gir når det gjelder lasting, interaktivitet og visuell stabilitet.

Som en helhet vil siden din ytelse bli rangert som nedenfor.

Komplett liste over beregninger som vurderes for sidens ytelsesberegninger.

Den neste delen snakker i utgangspunktet om ideene eller metodene for å forbedre sidelastingsytelsen og CWV-poengene.

Tips for å forbedre Core Web Vitals-poengene dine

Nedenfor er noen metoder som hjalp meg med å forbedre Core Web Vitals-poengene mine drastisk, så vel som forbedret sidens ytelse også.

  1. Bruk effektivt nettleser og CDN-cache (forbedrer FID og LCP)
    Dette er en veldig enkel godkjenning ch for å forbedre FID- og LCP-score. Sørg for at statiske eiendeler blir servert fra et CDN (hvis det er AWS, kan du cache det i Cloudfront). Dermed resulterer dette i å få ressursene raskt inn i nettleserne. For å forbedre andre gangs belastning, sørg for at eiendelene som nådde på klientsiden, er bufret i nettleseren din.
    cache-control: max-age=120 – betyr at den returnerte ressursen er gyldig i 120 sekunder, hvoretter nettleseren må be om en nyere versjon.
    Du kan også cache dynamiske sider også i CDN med riktig TTL-verdi basert på applikasjonsadferd.
  2. Angi nøyaktige størrelsesattributter eller dimensjoner til media og annonser (forbedrer CLS)
    Dette er noe veldig viktig for å forbedre CLS-score. Forsikre deg om at du har et riktig height:XXpx; width: YYpx satt til bildet ditt eller mediekoder. Igjen er dette veldig viktig i det minste for komponentene som er over folden. En snarvei for dette er at hvis du går tom for ideer for å få den eksakte høyden på bildet, kan du angi som height:auto; som virkelig hjalp for meg. Bortsett fra media, hvis nettstedet ditt viser annonser, må du sørge for at du har satt riktige annonseplasser med riktige dimensjoner, ettersom å trykke opp eller ned komponentene på siden definitivt vil redusere CLS-poengsummen din. Hold så øye med annonser også!
  3. Late bilder med høy oppløsning i riktig oppsett basert på enhetstype (forbedrer LCP)
    Dette er virkelig en rask seier for deg! Det er mange late lastepakker ute i verden som du kan bruke på websiden din for å la deg laste alle bildene på siden din.Dette vil redusere den totale sidevekten og lastetiden for gjengivelse av siden din i nettleseren. En annen viktig del er at forhåndsdefinere oppløsningen til bildet du vil laste, basert på enhetstype. Du burde ikke laste bilder med samme oppløsning i forskjellige enhetstyper.
  4. Bruk effektivt SSR og CSR på websiden din (forbedrer FID & LCP)
    Du bør være klar over at Google promoterer og oppmuntrer SSR-sider (Server Side Rendered) for å få gode SEO-verdier. Men ideelt sett er det en kompromiss med SEO mot sideytelsesytelse. Hvis siden din er for stor når det gjelder innhold, og hvis du bestemmer deg for å gjengi hele siden på serveren, vil det definitivt ta mer tid å laste hele siden så vel som siden vekten vil også være høy. Lang historie kort – min anbefaling er at det er bedre å gjøre SSR-gjengivelse for sidekomponentene dine som vises over brettet og gjengi resten av komponentene fra klientsiden som vises under brettet. På denne måten får brukeren siden lastet over folden, og resten av siden gjengir asynkront uten hindring av brukeropplevelsen.
  5. Bruk kode Splitting & bryter eiendelene dine opp i biter (forbedrer FID & LCP)
    Det er alltid ikke en god ide å ha store (noe over 100Kb er enorme) eiendeler (spesielt JS-filer) i applikasjonen din. Bruk derfor pakker som «webpack» til å fordele tunge eiendeler til små biter som asynkront laster inn eiendelene dine i nettleseren din (hvis du aktiverer h2-protokollen). Du kan også bruke kodesplittingsfunksjonene til å dele sidekomponentene dine for å skille filer i stedet for å pakke den inn i en enkelt HTML-fil.
  6. Komprimer alle statiske eiendeler med Brotli-komprimering (forbedrer LCP)
    Jeg oppfordrer til å bruke Brotli til å komprimere de statiske eiendelene dine, noe som gir mye bedre co trykkforhold sammenlignet med andre biblioteker i markedet. Samtidig må du huske at når du bruker Brotli med et høyere kompresjonsforhold, vil det definitivt øke bygge- og pakketiden din i DevOps-rørledningsreisen. For meg var det greit å ofre applikasjonens byggetid ettersom jeg får en bedre verdi når det gjelder sidelastingsytelse.
  7. Optimaliser API-forespørselen og responsinnhold (forbedrer FID & LCP)
    Dette er super viktig å bli vurdert da hver byte har betydning her når vi snakker om sideytelse. Jeg stoler på at du ikke angrer på å gå tilbake og sjekke API-forespørslene dine & for å fylle ut siden din. Sørg for at du bare får tilbake dataene du trenger for at siden din skal bli gjengitt fra API-svarene. En annen dum ting du kan gjøre en feil er at API-anropene dine blir påkalt internt i stedet for å bruke offentlige endepunkter eller via Internett – fordi det alltid er dyrt når det gjelder påkaller API-ene dine via internett når du har API-ene som er vert i samme delnett eller i det minste i samme nettverk!
  8. Reduser den samlede siden / dokumentet størrelse (forbedrer LCP)
    Ideelt sett, hvis landingssiden din er tung (jeg vil kategorisere en hvilken som helst side med> 80 KB som tung), vil dette definitivt bidra dårlig til LCP-poengsummen da det proporsjonalt vil øke hentings- og nedlastingshastigheten på siden din. Så sørg for at du ikke får noe ubrukt stort stykke data fra serversiden og last bare inn dataene som er nødvendige for gjengivelse av siden din.
  9. Bruk NESTE-GEN-bildeformater (forbedrer LCP)
    JPEG 2000, JPEG XR og WebP er bildeformater som har overlegne komprimerings- og kvalitetsegenskaper sammenlignet med deres eldre JPEG og PNG-kolleger. Koding av bildene dine i disse formatene i stedet for JPEG eller PNG betyr at de lastes raskere og bruker mindre mobildata. Du kan bruke et hvilket som helst verktøy i markedet for å konvertere bildene til NEXT-GEN-formaterte bilder, eller du kan til og med bygge en kjøretidstjeneste som kan gjøre en sanntidskonvertering fra JPEG til WebP og tjene i nettleseren. li>
  10. Aktiver fallback til de innebygde nettleserstøttede skriftene (forbedrer FID)
    Det er bevist at skrifter kan virkelig redusere resultatene dine hvis nettleseren forsinker for å laste inn den egendefinerte skrifttypen som brukes i applikasjonen din, med mindre den er en standardfont som støttes av nettleseren. I dette tilfellet er en rask gevinst for deg å ha en tilbakevendende tilnærming når du laster skrifttypen din med skriftene som er støttet av nettleseren som standard. Nedenfor ser du et eksempel på kodebit om hvordan du har en tilbakemelding med andre skrifter.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Alle tipsene ovenfor kan implementeres trinnvis i applikasjonen din og igjen som nevnt før Core Web Vitals-poengene er utviklet fra ekte bruker data og ikke lenger fra noen «Lab» -data. Dermed tar det tid å reflektere forbedringene i poengsummen din, som for det meste er 28 dagers tid å reflektere. Du kan fortsatt bruke PageSpeed-verktøyet fra google – https://developers.google.com/speed/pagespeed/insights/ for å få CWV-poengene dine.

Håper det hjelper og ønsker deg all suksess i dine arbeider! Skål!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *