Core Web Vitals visar de tre mätvärdena som Google rankas på – LCP, CLS och INP – mätt live på sidan du tittar på, betygsatt mot Googles trösklar och spåras tillbaka till det exakta elementet bakom varje nummer.
Core Web Vitals bestämmer en del av hur dina sidor rankas, men de vanliga sätten att mäta dem är besvärliga. Labverktyg ger en syntetisk belastning som ingen upplever. Search Console rapporterar riktiga användare, fyra veckor försenade, grupperade i URL-segment. Ingen av dem berättar vilket element på sidan framför dig som är problemet.
Detta verktyg mäter sidan du faktiskt tittar på, när du använder den. LCP, CLS och INP får varsin bricka med sitt värde, ett Bra, Behöver arbete eller Dåligt betyg mot Googles publicerade trösklar, och en stapel som visar var du sitter. FCP och TTFB sitter bredvid dem för sammanhang, eftersom en långsam LCP orsakad av en långsam server är ett annat problem än ett som orsakas av en tung bild.
Definitionerna matchar vad Chrome rapporterar till CrUX, vilket spelar roll om du tänker jämföra siffror med Search Console. CLS använder sessionsfönster – ett fönster slutar efter ett mellanrum på en sekund eller efter fem sekunder, och det värsta fönstret vinner – snarare än att lägga ihop varje skift naivt. INP är den 98:e percentilen av dina interaktionslanser, vilket för ett normalt besök helt enkelt är den långsammaste interaktionen. LCP slutar ändras vid din första interaktion, precis som Chrome gör det.
Det mest användbara är att varje nummer tillskrivs. Panelen namnger det största färgelementet, de element som skiftade och de långsammaste interaktionerna, och en Visa-knapp rullar till något av dem och beskriver det på sidan. Istället för att veta att CLS är 0.31 ser du bannern som trycker ner ditt innehåll. Kopiera rapporten ger dig hela grejen som text för en biljett.
De tre rankningsmåtten uppdateras när du använder sidan: rullning flyttar CLS, klickar och skriver flytta INP. Var och en bedöms som Bra, Behöver arbete eller Dålig mot Googles tröskelvärden.
Namner det största färgelementet, de element som skiftade och de långsammaste interaktionerna. Tryck på Visa för att bläddra till någon av dem och skissera den direkt på sidan.
CLS använder sessionsfönster med ett 1s gap och 5s cap, INP är den 98:e percentilen av interaktionslatenser och LCP fryser vid första interaktion – så dina siffror stämmer överens med Search Console.
First Contentful Paint och Time To First Byte sitter bredvid de tre stora, så du kan skilja en långsam server från en tung hjältebild innan du börjar optimera fel sak.
Listar dina långsammaste interaktioner med händelsetypen och det inblandade elementet, så en trög rullgardinsmeny eller filter kan hittas istället för att gissa på.
Ett klick kopierar varje mätvärde, betyg och stötande väljare som vanlig text – redo att klistra in i en biljett, en pull-begäran eller ett kliente-postmeddelande.
Bekräfta att LCP, CLS och INP är gröna på en ny mall innan den släpps, snarare än att ta reda på det från Search Console en månad senare.
Search Console talar om för dig att en grupp webbadresser inte klarar CLS; öppna en av dem med det här verktyget och se exakt vilket element som växlar.
Bläddra på sidan och se CLS klättra och tryck sedan på Visa för att beskriva den sent inlästa annonsen, bannern eller webbfonten som flyttar ditt innehåll.
Klicka dig igenom filter, menyer och modaler och läs sedan listan med långsammaste interaktioner för att se vilken kontroll som kostar hundratals millisekunder.
Anteckna siffrorna, implementera korrigeringen, mät sedan samma sida igen och jämför de två rapporterna sida vid sida.
Klicka på Core Web Vitals-ikonen i DevSuite Pro-dockan. Metriska brickor visas direkt med det som sidan redan har registrerat.
LCP är bara meningsfullt från början av en sidladdning, så ladda om med panelen öppen när du vill ha en läsning som du kan lita på.
Bläddra igenom hela sidan för att träna CLS och klicka, tryck och skriv för att generera INP-mätningar. Brickorna uppdateras allt eftersom.
Tryck på Visa bredvid LCP-elementet, en layoutförskjutningskälla eller en långsam interaktion. Sidan rullar till den och beskriver den så att det inte finns någon tvetydighet om vilket element som är ansvarigt.
Klicka på Kopiera rapport för en sammanfattning i vanlig text av varje mätvärde, betyg och väljare. Tryck på Reset för att starta CLS och INP igen från början.
Installera DevSuite Pro gratis och lås upp 71+ utvecklarverktyg för din webbläsare.
