Forbedr Interaction to Next Paint (INP)

Hvad er Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) er en relativt ny og spændende metrik, der måler  responsiviteten af en webside gennem alle interaktionerne på en side. En lav Interaction to Next Paint sikrer, at siden vil være pålideligt responsiv til enhver tid. INP vil blive en Core Web Vital i marts 2024, når Google erstatter FID-metrikken med INP-metrikken.

For at beregne Interaction to Next Paint-metrikken gemmes alle forskelle mellem hver brugerinteraktion og den endelige præsentationsændring på siden. Det højeste tal af alle interaktionerne (eller den 98. percentil) vil være den endelige  Interaction to Next Paint (INP)-metrik.

98. percentil eller den værste INP?

INP er en metrik, der sigter mod at repræsentere en sides samlede interaktionsforsinkelse ved at vælge en af de længste enkeltinteraktioner, der forekommer, når en bruger besøger en side. For sider med færre end 50 interaktioner i alt er INP interaktionen med den værste forsinkelse. For sider med mange interaktioner er INP oftest den 98. percentil af interaktionsforsinkelsen.

Hvordan fungerer Interaction to Next Paint (INP) præcist?

En interaktion sker, når en besøgende klikker eller trykker på en side. Den interaktion kan resultere i en ændring i præsentationen på skærmen.  Interaction to Next Paint (INP) måler tiden mellem klikket og præsentationen.

En enkelt interaktions forsinkelse består af den længste varighed af enhver hændelse, der er en del af interaktionen, hvor varigheden måles fra det punkt, hvor brugeren interagerede med siden, indtil den næste frame præsenteres, efter at alle tilknyttede event handlers er blevet udført. Varigheden er summen af følgende tidsperioder:

Hvad er gode og dårlige værdier for Interaction to Next Paint (INP)?

Hvordan måler man Interaction to Next Paint (INP)?

Interaction to Next Paint kan kun måles med feltværktøjer. For at måle Interaction to Next Paint har vi brug for reel brugerinteraktion. Google måler alle interaktioner, som rigtige Chrome-brugere har med en side, og gemmer dem i CrUX-datasættet. CrUX-datasættet er det officielle datasæt for Core Web Vitals.

Få de officielle INP-målinger

Du kan få de officielle INP-målinger i PageSpeed Insights eller CrUX dashboard og Google BigQuery. PageSpeed Insights giver dig den 75. percentil-score for de seneste 28 dage. Google BigQuery (via datastudio) giver dig mere historisk kontekst.

Sporing af Interaction to Next Paint med Real User Monitoring

Mens det officielle CrUX-datasæt er den endelige kilde for Interaction to Next Paint-målinger, er CrUX-datasættet ikke rigtig brugbart, fordi det er stærkt anonymiseret. CrUX-datasættet tilbyder ikke realtidsovervågning og tillader heller ikke meget filtrering. Derfor er Web Performance-konsulenter typisk afhængige af Real User Monitoring.

Mål Interaction to Next Paint for den aktuelle session.

Den nemmeste måde at debugge Interaction to Next Paint på er gennem Lighthouse i 'timespan'-tilstand.  Du kan også bruge Core Web Vitals Visualizer, eller hvis du vil have hænderne i koden, kan du bruge Google Web Vitals JavaScript Library

Log INP til konsollen med Web Vitals JavaScript-biblioteket

<script type="module">
 import {onINP} 
 from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
 onINP(console.log);
</script>

Hvordan forbedrer man Interaction to Next Paint?

Interaction to Next Paint er en kompliceret metrik. Din side kan være rigtig hurtig og reagere øjeblikkeligt det meste af tiden. Desværre, hvis bare én interaktion er langsom, vil det påvirke hele Interaction to Next Paint.

Husk nu, INP kan opdeles i input delay, processing time og presentation delay.

PageSpeed TIP: det meste af tiden vil INP være meget værre, når en bruger interagerer med siden under opstartsfasen af sideindlæsningen.  Derfor giver det mening at logge alle interaktioner samt sideindlæsningstilstanden, når man debugger INP!

1. Minimer input delay - undgå lange opgaver på hovedtråden

Normalt er enhver side mindre responsiv under sidens opstartsfase. Det er der, det meste hovedtrådsarbejde udføres (parsing, afkodning, rendering og scripting).  For at holde hovedtråden så fri som muligt, overvej:

• Fjern ubrugt kode. Dette kan gøres gennem en proces kaldet tree shaking (fjernelse af ubrugt kode) og code splitting (bundling af din kode på en måde, så den er grupperet i mange små bundter, der kan indlæses, når de er nødvendige). 
• Indlæs ikke-essentiel kode under browserens inaktive perioder. For eksempel, har du virkelig brug for en chatwidget i de første 500ms af sideindlæsningen? Nej, sandsynligvis ikke!
• Identificer langsomme scripts, der kræver mange ressourcer, og omskriv koden for at gøre den mere effektiv.
• Sørg for, at din side er 'nem at rendere'. Undgå store DOM-størrelser, for mange eller enorme billeder, for mange videoer, CSS-animationer osv.
  

2. Minimer processing time - giv øjeblikkelig feedback for at sikre, at siden reagerer direkte på brugerinput

Når en besøgende udfører en handling som at sende en formular eller tilføje en vare til kurven, skal du ikke vente på serverbekræftelsen (din formular er sendt, dine varer er tilføjet til kurven), men give øjeblikkelig feedback (vi sender din formular, tilføjer vareX til kurven). 

Giv også kontrol tilbage til hovedtråden så hurtigt som muligt. Fordi JavaScript gør dette, der kaldes 'run to completion', vil det blokere hovedtråden, indtil al koden er udført. Du kan manuelt oprette et breakpoint, hvor browseren kan opdatere layoutet (og derefter fortsætte resten af koden) ved at 'yielde til hovedtråden.' Den nemmeste måde at gøre dette på er ved at pakke dele af koden ind i en setTimeout()

const formfeedbackEl = document.getElementById("formfeedback");
const formEl = document.getElementById("form");

formEl.addEventListener("submit", (evt) => {
  evt.preventDefault();
  formfeedbackEl.innerText = "Submitting form ... please hold on";

  let headers = new Headers({ Accept: "application/json" });
  let formData = new FormData(formEl);
  fetch("/form-endpoint", { method: "POST", headers, body: formData })
    .then(function (response) {
      return response.json();
    })
    .then(function (jsonData) {
      formEl.reset();
      formfeedbackEl.innerText = jsonData.message;
    });
   setTimeout(other_code_that_needs_to_run(),0);
});

3. Minimer presentation delay - hold tingene simple!