Core/Dash-ulottuvuus: Selain

Ulottuvuus: Selain (browser)

Selain-ulottuvuus ryhmittelee suorituskykydataa asiakkaan lähettämän User Agent -merkkijonon perusteella. Tämän avulla voit auditoida Core Web Vitals -suorituskykyä sovelluksesi renderöivän ohjelmiston kautta (esim. Chrome, Firefox, Safari, Edge, Samsung Internet).

Selain-ulottuvuus eristää ohjelmistorajoitteet, renderöintimoottorien erot (Blink, Gecko, WebKit) sekä kolmannen osapuolen skriptien yhteensopivuuden.

RUM vs. CrUX

Tarkka tekninen analyysi edellyttää datalähteen ymmärtämistä.

• CrUX (Chrome User Experience Report): Tämä tietoaineisto kerää dataa vain Chrome-käyttäjiltä (ja joistakin Chromium-pohjaisista selaimista), jotka ovat antaneet siihen luvan. Se sulkee sokeasti pois Firefox- (Gecko-moottori) ja Safari-liikenteen (WebKit-moottori).
• CoreDash RUM: Kerää dataa jokaisesta selaimesta, joka suorittaa JavaScript-koodinpätkän.

Monilla verkkosivustoilla muut kuin Chrome-selaimet muodostavat 30–50 % liikenteestä. Pelkkään CrUX:iin luottaminen luo sokean pisteen: optimoit Googlen V8-moottorille ja laiminlyöt Firefoxin SpiderMonkey- ja Safarin JavaScriptCore-moottorit, joita valtava osa yleisöstäsi käyttää.

Metriikkakohtainen diagnostiikka

Eri selainmoottorit hallitsevat resursseja, kääntävät JavaScriptiä ja laskevat sivun geometriaa eri tavoilla. Käytä tätä ulottuvuutta löytääksesi selainmoottorikohtaiset ongelmat.

Interaction to Next Paint (INP)

INP-ongelmat korreloivat suoraan selaimen JavaScript-moottorin tehokkuuden ja main threadin vuoronnuksen kanssa.

• Firefox (SpiderMonkey): Firefox priorisoi tehtävät eri tavalla kuin Chrome. Raskas tapahtumankuuntelija, joka toimii Chromessa sujuvasti, saattaa aiheuttaa Firefoxissa selvää viivettä, koska main thread yieldaa eri tavalla.
• Safari (JavaScriptCore): käyttäytyy usein eri tavalla kosketusviiveen (tap latency) suhteen mobiilissa. Androidilla (Chrome) välittömältä tuntuva hydration-logiikka voi aiheuttaa viiveitä iOS:llä erilaisten event propagation -mallien vuoksi.

Largest Contentful Paint (LCP)

Erot LCP:n arvoissa johtuvat yleensä puuttuvista ominaisuuksista tai siitä, ettei selain tue moderneja optimointirajapintoja.

• Formaattineuvottelu: Jos Chrome raportoi nopean LCP:n mutta Firefox laahaa jäljessä, tarkista kuvamuotostrategiasi. Saatat tarjoilla AVIF-muotoa Chromelle ja käyttää fallbackina suurempia JPEG-kuvia selaimille, joista tuki puuttuu.
• Priority Hints: Chrome noudattaa tiukasti fetchpriority="high" -määritettä. Selaimet, jotka ohittavat tämän määritteen, käsittelevät LCP-resurssia normaalilla prioriteetilla, mikä nostaa latausviivettä (Load Delay) keinotekoisesti.
• Yhteysprotokollat: Edge ja Firefox saattavat neuvotella HTTP/3 (QUIC) -yhteydet eri tavalla yritys- tai rajoitetuissa verkkoympäristöissä, mikä vaikuttaa LCP:n TTFB:hen.

Cumulative Layout Shift (CLS)

Renderöintimoottorit laskevat pikseligeometrian omilla alipikselilogiikoillaan.

• Fonttien renderöinti (Gecko vs. Blink): Firefox (Gecko) ja Chrome (Blink) renderöivät fonttien perusviivat ja merkkivälit hieman eri tavalla. Ellet sovita fallback-fonttisi mittoja täydellisesti, tekstilohkon koko muuttuu verkkofontin latautuessa. Tämä aiheuttaa siirtymän toisessa selaimessa mutta ei toisessa.
• Vierityspalkin varaus: Windows-selaimet (Edge/Firefox/Chrome) varaavat fyysisen tilan vierityspalkeille, kun taas macOS-selaimet piirtävät ne sisällön päälle. Tämä ero aiheuttaa usein leveyteen liittyviä asettelusiirtymiä, jotka eivät näy Macilla kehittäessä, mutta ovat ilmeisiä Windows-käyttäjille.

Workflow: Isolating Engine-Specific Regressions

Tämän ulottuvuuden pääasiallinen käyttötapaus on "Engine Validation".

• Tunnista poikkeama: Järjestä Selain-taulukkosi Impact- tai Volume-sarakkeen mukaan. Etsi selainta (esim. Firefox Mobile), jonka tulos on huomattavasti huonompi kuin perustaso (Chrome Mobile).
• Varmista ympäristö: Tarkista, liittyykö ongelma pelkästään selaimeen vai selaimen ja käyttöjärjestelmän yhdistelmään (esim. Edge Androidilla vs. Edge Windowsilla).
• Debuggaus: Jos Edge on hidas mutta Chrome nopea (molemmat käyttävät Blink-moottoria), tutki Edge-käyttäjille yleisiä kolmannen osapuolen laajennuksia tai yritystason tietoturvaohjelmistoja, jotka injektoivat skriptejä DOM:iin. Jos Firefox on hidas, tarkista CSS-koodistasi epästandardit ominaisuudet tai layout thrashing, jota Gecko sakottaa enemmän kuin Blink.

Legacy and Embedded Browsers

Käytä Selain-ulottuvuutta tunnistaaksesi pitkän hännän ("Long Tail") aiheuttamat suorituskykyongelmat.

Sovelluksen sisäiset selaimet: Instagramin, LinkedInin tai Facebookin liikenne kulkee usein rajoitetuissa WebView-näkymissä, jotka käyttäytyvät eri tavalla kuin natiivi mobiiliselain.

Vanhat selainversiot: Saatat havaita liikennettä vanhentuneista selainversioista. Jos ne aiheuttavat korkean INP:n, määritä kääntötyökalusi (Babel/PostCSS) joko tarjoamaan tarvittavat polyfillit tai, jos liikennemäärä on vähäinen, tee strateginen päätös lopettaa tuki pienentääksesi bundle-kokoa moderneille käyttäjille.