NextJS Core Web Vitals - mittaa Core Web Vitals

Mittaa Core Web Vitals NextJS:ssä

Next.js on JavaScript-kehys REACTin päällä, jonka avulla voit rakentaa erittäin nopeita ja käyttäjäystävällisiä verkkosivustoja. Tämä pitää paikkansa, Next.js on melko nopea ja siinä on paljon sisäänrakennettuja ominaisuuksia nopeuden varmistamiseksi. Ainakin ....., teoriassa. Ajan myötä, kun verkkosivustosi kasvaa ja uusia ominaisuuksia lisätään, ja ehkä kun kaikkia parhaita käytäntöjä ei noudateta, Next.js-sivut muuttuvat hitaammiksi ja hitaammiksi. Siksi luultavasti vierailet tällä sivulla :-)

Hitaiden sivujen mittaamiseksi ja estämiseksi on tärkeää mitata Core Web Vitals ja ryhtyä toimiin, kun Core Web Vitals -mittari on kynnysarvon alapuolella.

Mitä ovat Core Web Vitals?

Core Web Vitals ovat Web Vitals -mittareiden osajoukko, joka koskee kaikkia verkkosivuja, jonka kaikkien sivustojen omistajien tulisi mitata ja joka näkyy kaikissa Googlen työkaluissa. Jokainen Core Web Vitals -mittari edustaa erillistä user experience -osa-aluetta, on mitattavissa kentällä ja heijastaa todellista käyttäjäkeskeistä kokemusta.

Core Web Vitals -mittarit kehittyvät ajan myötä. Vuoden 2020 nykyinen kokoelma keskittyy kolmeen user experience -osa-alueeseen — latautumiseen, vuorovaikutteisuuteen ja visuaaliseen vakauteen — ja sisältää seuraavat mittarit (ja niiden kynnysarvot):

Largest Contentful Paint (LCP): mittaa lataussuorituskykyä. Hyvän user experience tarjoamiseksi LCP:n tulisi tapahtua 2,5 sekunnin kuluessa sivun latauksen alkamisesta.

First Input Delay (FID): mittaa vuorovaikutteisuutta. Hyvän user experience tarjoamiseksi sivujen FID:n tulisi olla 100 millisekuntia tai vähemmän.

Cumulative Layout Shift (CLS): mittaa visuaalista vakautta. Hyvän user experience tarjoamiseksi sivujen CLS:n tulisi olla 0,1 tai vähemmän.

Unohda Lighthouse (tavallaan)

Lighthouse on Core Web Vitals -testaustyökalu. Lähes jokainen asiakas, jonka kanssa työskentelen, alkaa jossain vaiheessa puhua Lighthouse-pisteistään ja siitä, miten ne eivät vastaa heidän Search Console -pisteitään. Ensimmäinen asia, jonka kerron heille, on tämä: unohtakaa Lighthouse. Selitän:

Lighthouse on erittäin hyödyllinen työkalu, joka kerää 'laboratoriotietoja välimuistittomasta ensimmäisestä käynnistä säädellyissä olosuhteissa. Valitettavasti kerätyt tiedot eivät välttämättä vastaa kenttätietoja. Kenttätiedot kerää selain joka kerta, kun käyttäjä lataa jonkin sivuistasi. Tämä data lähetetään sitten Googlelle ja sitä käytetään todellisten Core Web Vitals -pisteidesi määrittämiseen. Tätä prosessia kutsutaan myös nimellä real-user monitoring (RUM).

Älä ymmärrä minua väärin: rakastan Lighthousea. Se on mestarillinen ohjelmisto ja se antaa sinulle loistavia ehdotuksia, jotka sinun todennäköisesti kannattaa toteuttaa. Tarkoitan sitä, että RUM-mittarit Next.js-sivustolla eivät koostu pelkästään ensimmäisistä, välimuistittomista näkymistä ja kävijöistä, jotka eivät ole vuorovaikutuksessa verkkosivustosi kanssa (Lighthouse ei ole vuorovaikutuksessa verkkosivustosi kanssa!)

Ei, Core Web Vitals Next.js-verkkosivustolla ovat monimutkaisempia. Siksi yksi ensimmäisistä asioista, jotka toteutan asiakkailleni, on reaaliaikainen real user monitoring.

Asenna Core Web Vitals reaaliaikainen real user monitoring

Core Web Vitals -tietojen kerääminen Next.js:ssä on yksinkertaista, sillä Next.js tarjoaa sisäänrakennetun menetelmän Core Web Vitals -tietojen kaappaamiseen. Sinun tarvitsee vain viedä funktio reportWebVitals tiedostossa _app.tsx ja olet valmis.

Korkean liikenteen verkkosivustoilla ei ole järkevää kerätä kaikkea dataa kaikilta käyttäjiltä. Voimme helposti ottaa näytteen 50 %:sta tai vähemmästä näin:

c
export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital' && bInSample) {
  	console.log(metric)
  }
}

Jos haluamme esimerkiksi lähettää Core Web Vitals -mittarit analytiikkaan, meidän tarvitsee vain tehdä näin:

export function reportWebVitals(metric: NextWebVitalsMetric) {
  if (metric.label === 'web-vital') {
    window.gtag('event', name, {
      event_category: 'web-vital',
      value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), // values must be integers
      event_label: metric.id, // id unique to current page load
      non_interaction: true, // avoids affecting bounce rate.
    })  
  }
}

Ja yhtä helposti voimme lähettää Core Web Vitals -tiedot mihin tahansa mukautettuun analytiikkapalvelimeen:

  const url = 'https://example.com/custom-analytics'

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, JSON.stringify(metric))
  } else {
    fetch(url, { JSON.stringify(metric), method: 'POST', keepalive: true })
  }
}

Muista, että kun luet RUM-dataa Core Web Vitals -mittareille, sinun on käytettävä 75. prosenttipistettä.

Kolmannen osapuolen työkalut, jotka keräävät Core Web Vitals -tietoja Next.js:ssä

On olemassa muutamia kolmannen osapuolen työkaluja, jotka keräävät Core Web Vitals -tietoja Next.js:ssä. Esimerkiksi NewRelic ja Sentry. Core Web Vitals -asiantuntijana en ole fani. Sentry laukaisee korkean prioriteetin pyyntöjä aikaisin renderöintiprosessissa ja NewRelic hidastaa myös sivustoasi huomattavasti. Toisaalta ymmärrän tällaisten työkalujen tärkeyden, ja jos käytät jo jotakin näistä työkaluista, ne tekevät erinomaista työtä Core Web Vitals -tietojen keräämisessä ja raportoinnissa.s