React Academy · Oppitunti

Core Web Vitals -mittaus React-sovelluksissa

Käyttäkää Lighthousea, WebPageTestiä ja web-vitals-kirjastoa LCP-, INP- ja CLS-arvojen keräämiseen.

Oppitunti 1/413 vaihetta

Core Web Vitals -mittaus React-sovelluksissa on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä Core Web Vitals ovat

Core Web Vitals ovat Googlen käyttäjäkokemuksen mittareita, jotka vaikuttavat hakukonesijoitukseen: LCP (Largest Contentful Paint – lataus), INP (Interaction to Next Paint – reagointikyky) ja CLS (Cumulative Layout Shift – visuaalinen vakaus).

Hyvät raja-arvot

Tavoitearvot ovat LCP ≤ 2.5s, INP ≤ 200ms ja CLS ≤ 0.1. Heikon tuloksen raja-arvon ylittävät arvot (LCP > 4s, INP > 500ms, CLS > 0.25) heikentävät merkittävästi käyttäjäkokemusta ja hakukonesijoitusta.

web-vitals-kirjasto

web-vitals-npm-paketti mittaa CWV-arvoja oikeissa selaimissa yksinkertaisen rajapinnan avulla.

npm install web-vitals

import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));

Vital-arvojen lähettäminen analytiikkaan

Lähettäkää vital-arvot analytiikkapäätteeseenne oikeiden käyttäjien seurantaa (RUM) varten – Lighthouse mittaa laboratorio-olosuhteiden suorituskykyä, mutta RUM näyttää, millaisena oikeat käyttäjät kokevat palvelun.

function sendToAnalytics(metric) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Next.js:n sisäänrakennetut vital-arvot

Next.js instrumentoi Core Web Vitals -arvot automaattisesti. Viekää reportWebVitals-funktio _app.js-tiedostosta (Pages) tai käyttäkää App Routerin sisäänrakennettua tukea.

// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric.name, metric.value);
  }
}

Lighthouse Chromen DevToolsissa

Suorittakaa Lighthouse-auditointi Chromen DevToolsissa (Lighthouse-välilehti) laboratorio-olosuhteiden CWV-mittauksia varten. Käyttäkää incognito-tilaa laajennusten häiriöiden välttämiseksi ja rajoittakaa yhteyttä mobiililaitteen simuloimiseksi.

WebPageTest

WebPageTest.org tarjoaa yksityiskohtaiset vesiputouskaaviot, videotallenteen ja CWV-mittaukset eri sijainneissa olevista oikeista laitteista – tulokset ovat realistisempia kuin paikallisessa Lighthousessa.

Chrome User Experience Report (CrUX)

Googlen CrUX-aineisto kokoaa oikeiden käyttäjien CWV-tietoja miljoonilta verkkosivustoilta. Voitte käyttää sitä Google Search Consolen, PageSpeed Insightsin tai CrUX API:n kautta.

PerformanceObserver LCP:tä varten

Käyttäkää natiivia PerformanceObserver-rajapintaa LCP-merkintöjen tarkkailuun ja selvittääksenne, mikä elementti muodostaa Largest Contentful Paint -tuloksen.

const po = new PerformanceObserver(entries => {
  for (const entry of entries.getEntries()) {
    console.log('LCP element:', entry.element, 'time:', entry.startTime);
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });

CLS:n virheenkorjaus

Käyttäkää Chromen DevToolsin Layout Shift Regions -toimintoa (Rendering-paneelissa) korostamaan punaisilla peittokuvilla elementtejä, jotka aiheuttavat asettelun siirtymiä.

Attribuutiotiedot

web-vitals-kirjasto tarjoaa attribuutiotietoja, jotka osoittavat, mikä aiheutti heikon mittaustuloksen – LCP-elementti, INP-interaktio vai CLS:n aiheuttava elementti.

onLCP(metric => {
  const { element, url } = metric.attribution.lcpEntry;
  console.log('LCP element:', element);
}, { reportAllChanges: true });

Pikatarkistus

Mikä Core Web Vital mittaa reagointikykyä eli sitä, kuinka nopeasti sivu vastaa käyttäjän toimintoihin?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Mitatkaa CWV-arvot web-vitals-kirjastolla tai Lighthousella. Lähettäkää mittarit analytiikkaanne oikeiden käyttäjien seurantaa varten. Tavoitelkaa arvoja LCP ≤ 2.5s, INP ≤ 200ms ja CLS ≤ 0.1. Käyttäkää attribuutiotietoja niiden yksittäisten elementtien tai toimintojen tunnistamiseen, jotka aiheuttavat heikkoja tuloksia.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Core Web Vitals -mittaus React-sovelluksissa” ilmainen?

Kyllä – oppitunnin ”Core Web Vitals -mittaus React-sovelluksissa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Core Web Vitals -mittaus React-sovelluksissa”?

Käyttäkää Lighthousea, WebPageTestiä ja web-vitals-kirjastoa LCP-, INP- ja CLS-arvojen keräämiseen. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Core Web Vitals -mittaus React-sovelluksissa”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Core Web Vitals -mittaus React-sovelluksissa
Bundlen analysointi ja koodin jakamisen strategia
Kuvien ja fonttien optimointi Reactissa
INP:n pienentäminen: tapahtumankäsittelijöiden optimointi

← Takaisin: React Academy