Core Web Vitals-visualiserare

Vi är stolta att presentera  Core Web Vitals-visualiseraren.

Idag lanserade vi den kostnadsfria Core Web Vitals-visualiseraren i Chrome Web Store. 

Core Web Vitals-visualiseraren är ett Chrome-tillägg som hjälper användare att spåra och visualisera Core Web Vitals för en sida. Dessa mätvärden inkluderar Largest Contentful Paint, first input delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint och Time to First Byte. Tillägget skapar ett överlägg som visar användaren vilka element som orsakar visuell instabilitet och vilka händelser som orsakar fördröjning i inmatning. Dessutom bryter tillägget ner Core Web Vitals i deras grundläggande komponenter, vilket ger användare en mer detaljerad förståelse för hur en sida presterar. Tillägget finns tillgängligt gratis i Chrome Web Store.

Som Core Web Vitals-specialist spenderar jag mycket tid på att kontrollera hur en sida reagerar och svarar när jag interagerar med den.  Vad gör det med Core Web Vitals och hur förändras Core Web Vitals när jag byter till mobilemulering eller inaktiverar webbläsarcache?

Visst använder jag RUM-spårning.  Det berättar på sidnivå vilka mätvärden som klarar och inte klarar Core Web Vitals.  Men varför klarar de sig inte?  Det är något du verkligen bara kan ta reda på genom att interagera med sidan.

För att spara mig massor av  tid bestämde jag mig för att automatisera en liten del av en lång process och skapa ett Chrome-tillägg som gör en del av det tråkiga arbetet åt mig.  Resultatet är Core Web Vitals-visualiseraren.  Jag bestämde mig för att göra detta tillägg tillgängligt för alla.  Så gå vidare och kolla in det i Chrome Web Store.

Vad gör Core Web Vitals-  visualiseraren?

Först registrerar den Core Web Vitals baserat på din interaktion med sidan.  Den spårar Largest Contentful Paint,  first input delay,  Cumulative  Layout Shift,  First Contentful Paint,  Interaction to Next Paint och  Time to First Byte.

Därefter skapar den ett överlägg som visualiserar alla dessa mätvärden. Detta berättar för dig vilket element som är Largest Contentful Paint,  vilka element  som orsakar visuell instabilitet  och, om du har interagerat med sidan, vilken händelse som orsakade first input delay.

Slutligen, när du klickar på något av mätvärdena, bryter Core Web Vitals-visualiseraren  ner dessa mätvärden i deras mest grundläggande komponenter.

Varför inte använda Lighthouse?

Prova Core Web Vitals-visualiseraren!

Gå till Chrome Web Store och installera Core Web Vitals-visualiseraren. Och kanske ... om du gillar den, lämna en recension. Det skulle jag uppskatta.