Core Web Vitals -visualisoija

Olemme ylpeitä voidessamme esitellä  Core Web Vitals -visualisoijan.

Tänään julkaisimme ilmaisen Core Web Vitals -visualisoijan Chrome Web Storessa. 

Core Web Vitals -visualisoija on Chrome-laajennus, joka auttaa käyttäjiä seuraamaan ja visualisoimaan sivun Core Web Vitals -mittareita. Näihin mittareihin kuuluvat Largest Contentful Paint, first input delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint ja Time to First Byte. Laajennus luo peittokuvan, joka näyttää käyttäjälle, mitkä elementit aiheuttavat visuaalista epävakautta ja mitkä tapahtumat aiheuttavat viivettä syötteessä. Lisäksi laajennus erittelee Core Web Vitals -mittarit perusosiin, jolloin käyttäjät saavat yksityiskohtaisemman käsityksen sivun suorituskyvystä. Laajennus on saatavilla ilmaiseksi Chrome Web Storesta.

Core Web Vitals -asiantuntijana vietän paljon aikaa tarkistaessani, miten sivu reagoi ja vastaa, kun olen vuorovaikutuksessa sen kanssa.  Mitä se tekee Core Web Vitals -mittareille ja miten Core Web Vitals muuttuvat, kun vaihdan mobiiliemulaatioon tai poistan selaimen välimuistin käytöstä?

Toki käytän RUM-seurantaa.  Se kertoo minulle sivukohtaisesti, mitkä mittarit läpäisevät ja mitkä eivät läpäise Core Web Vitals -arvioita.  Mutta miksi ne eivät läpäise?  Se on asia, jonka voi todella selvittää vain olemalla vuorovaikutuksessa sivun kanssa.

Säästääkseni itseltäni paljon aikaa päätin automatisoida tämän pienen osan pitkästä prosessista ja luoda Chrome-laajennuksen, joka tekee osan tylsästä työstä puolestani.  Tuloksena on Core Web Vitals -visualisoija.  Päätin tarjota tämän laajennuksen kaikille saataville.  Käy siis tutustumassa siihen Chrome Web Storessa.

Mitä Core Web Vitals  -visualisoija tekee?

Ensinnäkin se tallentaa Core Web Vitals -mittarit perustuen vuorovaikutukseesi sivun kanssa.  Se seuraa Largest Contentful Paint -mittaria,  first input delay -mittaria,  Cumulative  Layout Shift -mittaria,  First Contentful Paint -mittaria,  Interaction to Next Paint -mittaria ja  Time to First Byte -mittaria.

Seuraavaksi se luo peittokuvan, joka visualisoi kaikki nämä mittarit. Tämä kertoo sinulle, mikä elementti on Largest Contentful Paint,  mitkä elementit  aiheuttavat visuaalista epävakautta  ja, jos olet ollut vuorovaikutuksessa sivun kanssa, mikä tapahtuma aiheutti first input delay -viiveen.

Lopuksi kun klikkaat mitä tahansa mittaria, Core Web Vitals -visualisoija  erittelee nämä mittarit perusosiin.

Miksi et käytä Lighthouse-työkalua?

Kokeile Core Web Vitals -visualisoijaa!

Siirry Chrome Storeen ja asenna Core Web Vitals -visualisoija. Ja ehkä... jos pidät siitä, jätä arvostelu. Arvostaisin sitä suuresti.