CLS och INP är Core Web Vitals som mäter andra delar av användarupplevelsen än hastighet.
CLS mäter visuell stabilitet. Ett layoutskift uppstår när innehåll flyttar sig efter laddning. Användaren läser en artikel. En annons laddas. Artikeln flyttas ned. Användaren tappar bort sig. CLS mäter hur irriterande det är.
INP mäter respons. Användaren klickar på en knapp. Systemet svarar. Hur lång tid tar svaret? INP mäter fördröjningen i responsen.
Cumulative Layout Shift (CLS) i detalj
Vad som orsakar CLS
Annonser laddas och tar plats. Inbäddningar laddas och tar plats. Bilder laddas utan angiven höjd. Typsnitt byts och texten flödar om. Innehåll läggs in av JavaScript.
Verkligt exempel
Sidans layout är stabil. Användaren börjar läsa. En annons laddas. Annonsen är trehundra pixlar hög. Innehållet under annonsen flyttas ned trehundra pixlar. Användaren tappar bort sig. Frustrerande.
Mätning
CLS mäts som andelen av visningsytan som flyttar sig. Är visningsytan tusen pixlar hög och innehållet flyttas trehundra pixlar blir CLS noll komma tre. Målet är under noll komma ett (tio procents skift är acceptabelt, trettio procent är det inte).
Så optimerar du CLS
Strategi ett: reservera plats
Reservera plats för annonser, inbäddningar och bilder. Tala om för layoutmotorn: annonsen tar trehundra pixlar. Reservera platsen. Annonsen laddas in i den reserverade platsen. Inget skift.
Strategi två: lägg in längst ned
Undvik att lägga in innehåll mitt på sidan. Lägg in längst ned (innehållet där har redan scrollats ut ur bild). Eller lägg in i en fast sidhuvud (användaren förväntar sig att sidhuvudet ändras).
Strategi tre: undvik typsnittsbyten
Undvik att byta typsnitt mitt under sidladdningen. Typsnittsbyten gör att texten flödar om. All text med det typsnittet flyttar sig. Använd `font-display: optional` eller `font-display: swap` för att minimera skiftet.
Strategi fyra: ange bildens höjd
Använd fast höjd för bilder. Bilden laddas. Höjden är angiven. Bilden fyller den reserverade platsen. Inget skift.
Verkligt exempel: CLS-optimering av en produktsida i en webbutik
Utgångsvärde för CLS: noll komma två fem (dåligt).
Analys
Produktbilder laddas utan angiven höjd. Bilderna flyttar innehållet. Bidrar med noll komma tio CLS. Annonsen under produkten laddas efter sidan. Annonsen tar plats. Innehållet flyttar sig. Bidrar med noll komma tolv CLS. Kundrecensioner hämtas från ett API. De läggs in på sidan. Innehållet flyttar sig. Bidrar med noll komma tre CLS.
Optimering
Ange bildens höjd i HTML. Bilderna fyller den reserverade platsen. Bidrag till CLS: noll. Reservera plats för annonsen. Annonsen laddas in i den reserverade platsen. Bidrag till CLS: noll. Använd lazy loading för kundrecensioner under vikningen. Lägg inte in dem ovanför vikningen. Bidrag till CLS: noll (skiftet sker utanför visningsytan).
Ny CLS: noll komma noll fem (bra).
Interaction to Next Paint (INP) i detalj
Vad INP mäter
INP mäter respons. Användaren klickar på en knapp. Systemet behandlar klicket. Uppdaterar tillståndet. Renderar ändringen. Ritar den på skärmen. INP är tiden från klick till första ritade visuella uppdatering.
Verkligt exempel
Användaren klickar på knappen Lägg i varukorgen. Systemet kontrollerar lagersaldot. Uppdaterar varukorgsräknaren. Ritar det nya antalet på skärmen. Är INP hundra millisekunder ser användaren varukorgsräknaren uppdateras direkt. Är INP en sekund uppdateras räknaren en sekund senare. Det känns trögt.
Mätning
INP mäts i millisekunder. Ett mål under tvåhundra millisekunder är bra.
Så optimerar du INP
Strategi ett: korta JavaScript-körtiden
Lång JavaScript blockerar renderingen. Dela upp långa uppgifter i mindre. Använd async, defer eller Web Workers för tunga beräkningar.
Strategi två: optimera händelsehanterare
Händelsehanterare ska göra så lite som möjligt. Flytta tungt arbete till bakgrunden.
Strategi tre: optimera CSS
Tung CSS kan fördröja ritningen. Använd CSS containment för att tala om för webbläsaren: det här elementet är fristående, räkna inte om stilarna för hela sidan när det ändras.
Strategi fyra: använd en snabbare renderingsteknik
CSS-uppdateringar går snabbare än DOM-uppdateringar med JavaScript. Använd CSS transforms i stället för positionering med left och top. Använd CSS opacity i stället för att växla synlighet.
Verkligt exempel: respons i ett formulär
Utgångsvärde för INP: fyrahundra millisekunder (dåligt).
Analys
Formuläret har valideringskod i JavaScript. Användaren skriver i ett fält. Valideringen körs. Valideringen är synkron. Den blockerar uppdateringen av fältet. Fältet uppdateras inte förrän valideringen är klar. Det känns trögt.
Optimering
Flytta valideringen till bakgrunden (Web Worker eller setTimeout). Fältet uppdateras direkt. Valideringen sker i bakgrunden. Använd CSS containment på formuläret. Tala om för webbläsaren: formuläret är fristående, räkna inte om stilarna för hela sidan. Använd CSS transform för animation i stället för positionering med JavaScript.
Ny INP: hundrafemtio millisekunder (bra).
CLS och INP tillsammans
CLS får sidan att kännas ostabil. INP får sidan att kännas trög. Tillsammans påverkar de hur användaren uppfattar kvaliteten.
En sida med bra LCP men dålig CLS (snabb men hoppig) känns frustrerande. Användaren skyller på långsamhet fast problemet är stabilitet.
En sida med bra LCP och CLS men dålig INP (snabb och stabil men trög) känns trasig. Knapparna svarar inte på klick.
Alla tre Core Web Vitals spelar roll för en bra användarupplevelse.
Vanliga frågor
Hur upptäcker vi CLS-problem?
Använd Chrome DevTools. Högerklicka på sidan. Välj Inspektera. Gå till fliken Performance. Spela in sidladdningen. DevTools visar layoutskiften under laddningen. Du kan också använda PageSpeed Insights. Lighthouse pekar ut CLS-problem. Kontrollera även rapporten Core Web Vitals i Search Console. Den visar sidor med dålig CLS. Med WEMASY webbplatsbyggare kan du ställa in det direkt på din webbplats.
Ska vi reservera plats för alla annonser eller bara för kritiska?
Reservera plats för annonser ovanför vikningen (annonser som laddas direkt). Reservera inte plats för annonser under vikningen (annonser som laddas efter scrollning). Annonser under vikningen kan flytta innehåll under vikningen, men användaren ser inte skiftet.
Hur optimerar vi INP för komplexa applikationer med mycket JavaScript?
Flytta tunga beräkningar till Web Workers. En Web Worker körs i en separat tråd. Den blockerar inte huvudtråden. Huvudtråden förblir responsiv för användarens inmatning. Använd också React Suspense eller liknande ramverk som skjuter upp tunga beräkningar tills interaktionen är hanterad.
Är CLS viktigare på mobil än på dator?
Ja, viktigare på mobil. Mobilskärmen är mindre. Layoutskiften syns tydligare. Mobilanvändare märker skiftet lättare och blir frustrerade. Prioritera CLS-optimering på mobil.
Kan bra CLS och INP väga upp dålig LCP?
Nej. Tar sidan fem sekunder att ladda är användaren redan frustrerad innan CLS och INP spelar någon roll. Användaren lämnar innan hen interagerar. Snabb laddning (bra LCP) är en förutsättning för en bra upplevelse. Bra CLS och INP förbättrar upplevelsen av en snabb sida, inte av en långsam.
Hur mäter och följer vi förbättringar av CLS och INP?
Utgångsläge: mät före optimeringen. Genomför optimeringen. Ny mätning: mät efter. Använd biblioteket Web Vitals (ett JavaScript-bibliotek som mäter Core Web Vitals) för att följa upp hos riktiga användare. Ställ in aviseringar: om CLS eller INP försämras varnar aviseringen teamet.