Vad är Googles INP-poäng och hur man förbättrar den i WordPress

När Google introducerar en ny rankningsfaktor som INP (Interaction to Next Paint) är det lätt att känna sig överväldigad. Du undrar förmodligen vad denna tekniska term betyder för din WordPress-webbplats och vad du behöver göra nu.

Vi förstår helt. Med över ett decenniums erfarenhet av att optimera WordPress-webbplatser började vårt team omedelbart testa för att hitta de mest effektiva sätten att förbättra denna nya poäng.

Efter att ha undersökt ämnet översatte vi all komplex jargong till enkla, handlingsbara steg. Vi är glada att kunna dela de beprövade metoder som vi nu använder på vår egen portfölj av webbplatser.

I den här guiden går vi igenom exakt vad INP är och hur du kan förbättra dina poäng, även om du inte är utvecklare.

Här är en snabb översikt över de ämnen vi kommer att täcka i den här guiden:

1. Vad är Google Core Web Vitals?
2. Vad är Google INP?
3. Varför bytte Google FID-måttet till INP?
4. Hur man mäter Googles INP-poäng i WordPress
5. Hur man förbättrar Google INP-poäng i WordPress
6. Hur webbplatsägare kan optimera sina webbplatser för INP
7. Hur utvecklare kan optimera sin kod för INP
8. Exempel på goda kodningsmetoder för JavaScript för utvecklare
9. Vanliga frågor om Google INP
10. Experthandledningar för att förbättra WordPress-prestanda

Vad är Google Core Web Vitals?

Google Core Web Vitals är webbplatsens prestandamått som Google anser vara viktiga för den övergripande användarupplevelsen. Dessa webbvitale poäng är en del av Googles totala sidupplevelsepoäng, vilket kommer att påverka dina SEO-rankningar.

Dessa mätvärden är användbara eftersom, även om din WordPress-webbplats laddar snabbt, kanske den inte är fullt fungerande för användarna. Även om en sida har laddats, kanske en besökare inte kan göra det de vill eller komma åt den information de behöver.

Core Web Vitals är utformade för att hjälpa till med detta. De låter dig mäta hur snabbt din webbplats laddas, blir synlig och är redo för dina besökare att använda.

Tidigare använde Google tre kvalitetstester:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Kumulativ layoutförskjutning (CLS)

Du kan lära dig mer om dessa tester i vår ultimata guide om hur man optimerar Core Web Vitals för WordPress.

Google ersatte dock FID med ett nytt test som kallas INP (Interaction to Next Paint) i mars 2024. De andra två testerna fortsätter att användas.

Låt oss titta på vad INP är och varför Google bytte till det.

Vad är Google INP?

INP står för 'Interaction to Next Paint'. Det är en ny Google Core Web Vital-metrik som mäter användarinteraktioner som orsakar fördröjningar på din webbplats.

INP-testet mäter hur lång tid det tar mellan att en användare interagerar med din webbplats, som att klicka på något, och att ditt innehåll visuellt uppdateras som svar. Denna visuella uppdatering kallas 'nästa färg'.

Till exempel kan en användare skicka in ett kontaktformulär på din webbplats, klicka på en knapp eller välja en bild som öppnas i en lightbox. INP-testet mäter tiden mellan att användaren utför dessa interaktioner och faktiskt ser det uppdaterade innehållet på din webbplats.

Googles test ger sedan en enda INP-poäng baserad på varaktigheten av de flesta användarinteraktioner på din webbplats. Poängen blir antingen 'Bra', 'Behöver förbättras' eller 'Dålig', beroende på hur lång tid det tar för din webbplats att uppdateras visuellt.

Varför bytte Google FID-måttet till INP?

Det äldre FID-testet mätte hur snabbt din webbplats svarade på den första användarinputen efter att sidan laddats, som ett musklick eller ett tangenttryck. Det gör detta genom att mäta tiden mellan den första inputen från användaren och när din webbplats börjar agera på den inputen.

Med andra ord mätte den hur responsiv din webbplats var när den först laddades och vilket första intryck den gav riktiga användare.

Dock var denna metrik inte så hjälpsam som den kunde ha varit. Det fanns två begränsningar med FID-testet:

1. Den mätte bara den första användarinteraktionen, inte alla.
2. Den mätte bara tills webbplatsen började bearbeta interaktionen, inte när användaren faktiskt kunde se den visuella återkopplingen på skärmen.

Så Google ändrade testet för att ge en mer komplett bild av en webbsidas övergripande responsivitet. INP kommer att mäta hela tiden som användaren tillbringar där tills de lämnar sidan.

Hur man mäter Googles INP-poäng i WordPress

Det enklaste sättet att testa din Google Core Web Vitals-poäng är att använda verktyget PageSpeed Insights. Ange helt enkelt URL:en du vill testa och klicka på knappen ‘Analysera’.

Verktyget kommer att analysera webbsidan i några sekunder och sedan visa dig testresultaten.

Nu, tillsammans med andra Google Core Web Vitals, kommer du också att se sidans Interaction to Next Paint (INP)-poäng.

Det kommer att finnas olika poäng för mobil- och skrivbordsanvändare.

I skärmdumpen ovan kan du se INP-poängen för skrivbordsanvändare som tittar på den här webbsidan på WPBeginner är 47 ms. Den gröna pricken betyder att detta är en bra poäng.

När du kan se poängen för din egen webbplats kommer du förmodligen att undra hur den jämför sig med andra webbplatser och om den behöver förbättras.

Google har gett några riktlinjer för att tolka din INP-poäng:

• Snabbare än 200 millisekunder – bra responsivitet
• 200-500 millisekunder – behöver förbättras
• Långsammare än 500 millisekunder – dålig responsivitet

Se till att du kontrollerar din poäng för både mobil- och datorenanvändare och strävar efter god responsivitet.

Du kan sedan förbättra din INP-poäng genom att följa riktlinjerna i avsnitten nedan.

Fallstudie: Hitta långsamma interaktioner på Awesome Motives webbplatser

Men först kan det vara bra att titta på en fallstudie. Vi har börjat mäta INP-poängen på våra egna webbplatser, inklusive All in One SEO, MonsterInsights och WPForms.

När vårt team kontrollerade vår webbplats INP-poäng, visade de första resultaten att våra mest populära sidor behövde förbättras.

Med hjälp av Chrome User Experience (CrUX) dashboard kunde vi se att:

• 80% av våra sessioner bedömdes som 'bra'
• 12% av våra sessioner bedömdes som 'behöver förbättras'
• 8% av våra sessioner bedömdes som 'dåliga'

En PageSpeed Insights-rapport ger oss en övergripande INP-poäng, men den talar inte om för oss vilka specifika knappar eller formulärfält som orsakar fördröjningen för verkliga användare. För att ta reda på det måste vi gräva lite djupare med andra verktyg som analyserar data från faktiska besöksessioner.

Det betyder att vi nästa gång måste köra våra egna tester för att hitta långsamma interaktioner på sidor med lägre INP-poäng. Detta är en detaljerad och avancerad uppgift som bäst utförs av en utvecklare.

Det görs genom att gå till varje sida som behöver förbättras och sedan testa varje interaktion med faktiska klick, tryckningar och tangenttryckningar. Dessa måste tidsbestämmas och utvärderas med hjälp av verktyg.

Chrome Developers Blog listar ett antal verktyg som kan användas för testning, såsom Chrome Web Vitals-tillägget och det nya tidsspannsläget i Lighthouse-panelen i DevTools. Du kan också se Googles artikel om hur man felsöker med Web Vitals-tillägget.

Det är viktigt att notera att sessionerna med lägre betyg mest troligt ägde rum på långsammare enheter eller anslutningar. Det betyder att när du testar, rekommenderas det att strypa din webbläsares hastighet, annars kanske du inte upptäcker de långsamma interaktionerna.

Du kan göra det med hjälp av Chromes funktion Inspektera element genom att gå till Visa » Utvecklare » Inspektera element. Du kan växla till fliken 'Nätverk' och välja ett alternativ för begränsning från rullgardinsmenyn.

Det är viktigt att testa på en långsammare anslutning eftersom många av dina användare kan vara på mobila enheter eller ha mindre än perfekt internet. Ett problem som är osynligt på din snabba kontorsdator kan vara en stor källa till frustration för dem.

När du har hittat INP-poängen för dina sidor kan du använda tipsen i nästa avsnitt av den här handledningen för att förbättra dem.

Hur man förbättrar Google INP-poäng i WordPress

Det mesta av arbetet med att optimera INP-poängen kommer att behöva göras av utvecklare. Det inkluderar författarna till temat och plugins som du använder på din webbplats, plus utvecklarna av eventuell anpassad JavaScript som du kör.

Det beror på att INP-poängen mestadels är relaterad till den tid som krävs för att utföra JavaScript-interaktioner på din webbplats.

Till exempel, när en användare klickar på en knapp, körs viss JavaScript-kod för att utföra den funktion som förväntas vid klick på knappen. Den här koden laddas ner till användarens dator och körs i deras webbläsare.

För att optimera din INP-poäng måste fördröjningarna som sker under JavaScript-användarinteraktioner minskas. Det finns tre komponenter till denna fördröjning:

1. Indatadröjsmål, vilket inträffar när din webbplats väntar på bakgrundsuppgifter på den sidan som förhindrar att händelsehanteraren körs.
2. Bearbetningstid, vilket är den tid som krävs för att köra händelsehanterare i JavaScript.
3. Presentationsfördröjning, vilket är den tid som krävs för att beräkna om sidan och rita upp sidinnehållet på skärmen.

Som webbplatsägare finns det steg du kan ta för att förbättra de första och tredje fördröjningarna. Vi visar dig hur i nästa avsnitt.

För att göra verkliga förbättringar av din INP-poäng måste du dock förbättra den andra fördröjningen, vilket är bearbetningstiden för själva koden. Det är inget som du kan göra själv.

Utvecklarna av ditt WordPress-tema, plugins och anpassad JavaScript kan behöva optimera sin kod för att ge omedelbar feedback till dina användare. Den goda nyheten är att de förmodligen redan arbetar på detta för att uppfylla tidsfristen i mars 2024.

Vi erbjuder några specifika tips för utvecklare med exempel senare i den här artikeln.

Hur webbplatsägare kan optimera sina webbplatser för INP

Medan den mest betydande påverkan på din webbplats INP-poäng kommer från utvecklare som optimerar sin kod, finns det några saker som webbplatsägare kan göra.

Framför allt kan du se till att dina användares musklick och tangenttryckningar känns igen så snabbt som möjligt genom att optimera bakgrundsprocesser på din webbplats. Du kan också se till att svaret på deras inmatning visas på skärmen så snabbt som möjligt.

Även om dessa steg kanske inte direkt skriver om koden som orsakar en långsam interaktion, förbättrar de din webbplats övergripande hälsa. En snabbare, smidigare webbplats ger webbläsaren mer resurser för att hantera användarinteraktioner snabbt, vilket definitivt kan hjälpa din INP-poäng.

Här är några steg du kan ta för att uppnå det.

1. Se till att du kör den senaste versionen av WordPress

Det första du bör göra är att se till att du använder den senaste versionen av WordPress.

Det beror på att WordPress-versionerna 6.2 och 6.3 introducerade betydande prestandaförbättringar. Dessa kommer att förbättra din webbplats prestanda på serversidan och klientsidan, vilket kommer att förbättra din INP-poäng.

För detaljerade instruktioner kan du se vår guide om hur du säkert uppdaterar WordPress.

2. Optimera bakgrundsprocesser i WordPress

Bakgrundsprocesser är schemalagda uppgifter i WordPress som körs i bakgrunden. De kan inkludera att kontrollera efter WordPress-uppdateringar, publicera schemalagda inlägg och säkerhetskopiera din webbplats.

Om din webbplats blir för upptagen med att köra dessa bakgrundsuppgifter, kanske den inte omedelbart inser att användaren har klickat med musen eller tryckt på en tangent, vilket resulterar i en dålig INP-poäng.

Du kanske kan konfigurera dina bakgrundsskript och plugins för att minska mängden arbete de utför, vilket minskar belastningen på din webbplats. Annars kanske du kan köra dem bara när de behövs istället för att låta dem köras i bakgrunden.

För detaljerade instruktioner kan du se avsnittet Optimera bakgrundsprocesser i vår ultimata guide om hur du ökar WordPress hastighet och prestanda.

3. Kontrollera PageSpeed Insights prestandarekommendationer

När du har kört PageSpeed Insights testet på din webbplats, kan du scrolla ner till avsnittet Prestanda i testresultaten.

Här hittar du några möjligheter att förbättra din webbplats prestanda tillsammans med den uppskattade tidsbesparingen om du följer råden.

Till exempel kan du se rekommendationer om att eliminera renderblockerande resurser. Du kan göra detta genom att följa vår guide om hur du åtgärdar renderblockerande JavaScript och CSS i WordPress.

Du kan också se en rekommendation om att minska oanvänd JavaScript. Du hittar en inställning för att göra detta i många av de bästa WordPress-cache-plugins, som till exempel WP Rocket.

4. Minimera JavaScript i WordPress

JavaScript måste laddas ner till användarens dator innan det kan köras. Genom att göra dina JavaScript-filer så små som möjligt kan du uppnå små prestandavinster.

Minifiering av din JavaScript gör filerna mindre genom att ta bort blanksteg, rader och onödiga tecken från källkoden.

Detta kommer inte att ha en dramatisk effekt på din prestanda, men om du vill raka av några extra millisekunder från din INP-poäng kan du tycka att det är värt det.

För att lära dig hur kan du se vår guide om hur man minifierar CSS- och JavaScript-filer i WordPress.

Hur utvecklare kan optimera sin kod för INP

Om du är utvecklare kommer de största INP-poängvinsterna från att optimera din kod. Här är några saker du kan göra.

1. Bekräfta användarinmatning visuellt omedelbart

Här är den enda sak som kommer att göra störst skillnad när du optimerar din kods INP-poäng: Du måste ge omedelbar visuell feedback till all användarinmatning.

Användaren bör omedelbart se att deras inmatning har erkänts och att du agerar på den. Detta kommer att få din kod att kännas mer responsiv för användaren och resultera i en bra INP-poäng.

Här är några exempel:

• Om en användare klickar på ett element, bör du visa något som visar att elementet klickades på.
• Om en användare skickar in ett formulär, då behöver du omedelbart visa något för att bekräfta det, som ett meddelande eller en spinner.
• Om en användare klickar på en bild för att öppna den i en lightbox, vänta då inte bara på att bilden ska laddas. Visa istället omedelbart en demo-bild eller en spinner. Sedan, när bilden är laddad, kan du visa den i lightboxen.

Mer än något annat kommer detta att förbättra din INP-poäng, särskilt om du behöver utföra tung JavaScript-bearbetning som svar på användarinmatning.

Se bara till att du uppdaterar användargränssnittet innan du påbörjar uppgiften.

Därefter kan du schemalägga det tunga arbetet att köras lite senare med hjälp av en setTimeout-callback. Detta ger webbläsaren ett ögonblick att uppdatera skärmen innan den blir upptagen med den intensiva uppgiften.

När du har fått det rätt finns det några fler saker du kan göra för att optimera din kod.

2. Optimera var webbläsaren spenderar mest tid

Nästa sak du bör göra är att undersöka var webbläsaren spenderar mest tid och sedan optimera dessa delar.

I Google Chrome, när du navigerar till Visa » Utvecklare » Utvecklarverktyg » Prestanda, är det möjligt att inspektera JavaScript-funktioner och händelsehanterare som blockerar nästa målningsoperation.

Med den kunskapen kan du se vad som kan optimeras för att minska tiden fram till nästa färg efter användarinteraktion.

3. Minska dina layouter

Ibland består mycket CPU-aktivitet av layoutarbete.

När detta händer bör du kontrollera om din kod får webbläsaren att upprepade gånger räkna om sidlayouten. Detta kallas ofta 'layout thrashing', och vi ger ett exempel på hur man undviker det senare i den här guiden.

4. Visa innehåll ovanför vecket först

Om renderingen av sidinnehållet är långsam, kan din INP-poäng påverkas.

Du kan överväga att först visa endast viktigt innehåll ‘ovanför vecket’ för att leverera nästa bildruta snabbare.

Exempel på goda kodningsmetoder för JavaScript för utvecklare

Det kan vara hjälpsamt att visa några exempel på hur dålig kod kan resultera i en dålig INP-poäng.

Vi har satt ihop ett exempelprojekt på CodePen som du kan experimentera med. Du kan granska vår exempelkod, läsa våra korta förklaringar och se skillnaden det gör genom att klicka på knapparna.

Här är en animation från det CodePen-projektet. Du kan se att den ooptimerade exempelkoden resulterar i en dålig INP-poäng på 965 millisekunder. Knapptryckningen kommer att kännas fördröjd för användarna.

Däremot uppdaterar den optimerade koden knapptexten omedelbart, vilket resulterar i bästa möjliga INP-poäng.

Läs vidare för att se fyra exempel på hur du kan förbättra din kod för att optimera INP-poängen.

Exempel 1: Uppdatera skärmen innan du kör en tung CPU-uppgift

CPU-intensiva uppgifter tar tid, och detta kan leda till dåliga INP-poäng om du inte skriver bra kod. I det här fallet är det bäst att uppdatera skärmen innan du kör den uppgiften.

Här är ett dåligt exempel där användargränssnittet uppdateras efter en tung CPU-uppgift. Detta resulterar i en hög INP:

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

I det här förbättrade exemplet uppdateras användargränssnittet omedelbart när knappen klickas.

Därefter flyttas den tunga CPU-uppgiften till en setTimeout-callback:

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

Detta gör att webbläsaren kan uppdatera skärmen innan den långsamma uppgiften påbörjas, vilket resulterar i en bra INP-poäng.

Exempel 2: Schemalägg icke-brådskande bearbetning

Du bör också se till att du inte kör icke-brådskande eller icke-väsentligt arbete i ett skript omedelbart när det kan försena det svar som användaren förväntar sig.

Du bör börja med att omedelbart uppdatera sidan för att bekräfta användarens inmatning. Därefter kan du använda requestIdleCallback för att schemalägga resten av skriptet när det finns ledig tid i slutet av en bildruta eller när användaren är inaktiv.

Här är ett exempel:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

Detta gör att webbsidan känns mer responsiv för användaren och ger dig en bättre INP-poäng.

Exempel 3: Schemalägg en funktion att köras före nästa bildruta

Du kan också användarequestAnimationFrame för att schemalägga en funktion som ska köras före nästa omritning:

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

Detta kan vara användbart för animationer eller visuella uppdateringar som svar på användarinteraktioner.

Återigen bör du ge användaren feedback genom att omedelbart bekräfta deras inmatning.

Exempel 4: Undvik layout-thrashing

Layout thrashing uppstår när du upprepade gånger läser och skriver till DOM (Document Object Model), vilket gör att webbläsaren måste räkna om layouten flera gånger.

Här är ett exempel på layout thrashing:

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

Detta kan undvikas genom att batcha dina läsningar och skrivningar.

Detta är ett bättre exempel:

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Vanliga frågor om Google INP

Vi förstår att ett tekniskt ämne som INP kan väcka många frågor. För att hjälpa till har vi besvarat några av de vanligaste frågorna vi får från våra läsare.

Vad är Googles Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) är ett Google Core Web Vital-mått som mäter en webbplats övergripande responsivitet mot användarinteraktioner. Det beräknar tiden från det att en användare klickar, trycker eller skriver på en sida tills nästa visuella uppdatering visas på skärmen.

Detta ger en bredare bild av användarupplevelsen än den tidigare FID-mätningen.

Varför ersatte Google First Input Delay (FID) med INP?

Google ersatte FID med INP eftersom det ger en mer heltäckande mätning av en sidans responsivitet. FID mätte bara fördröjningen av den första interaktionen.

Däremot bedömer INP latensen för alla användarinteraktioner under ett besök, vilket ger en mer komplett bild av användarens upplevelse.

Vad är en bra INP-poäng?

Enligt Googles riktlinjer är en bra INP-poäng 200 millisekunder eller mindre. En poäng mellan 200 och 500 millisekunder 'behöver förbättras', och allt över 500 millisekunder anses vara 'dålig responsivitet'.

Hur kan jag förbättra min INP-poäng i WordPress?

Att förbättra din INP-poäng i WordPress involverar flera steg. Webbplatsägare kan optimera bakgrundsprocesser, minifiera JavaScript och säkerställa att deras webbplats är uppdaterad.

Utvecklare kan göra en betydande skillnad genom att optimera kod för att ge omedelbar visuell feedback på användaråtgärder, som att visa en laddningsindikator, och genom att skjuta upp tunga uppgifter.

Experthandledningar för att förbättra WordPress-prestanda

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du förbättrar din Google INP-poäng i WordPress. Du kanske också vill se några andra artiklar relaterade till att förbättra WordPress-prestanda:

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.