Core/Dash-ulottuvuus: Selain

Ulottuvuus: Sivu & Navigaatio: URL-osoitteet (u)

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

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

RUM vs. CrUX

Datan lähteen ymmärtäminen on tärkeää tarkan teknisen analyysin kannalta.

• CrUX (Chrome User Experience Report): Tämä tietojoukko kerää dataa yksinomaan Chromea (ja joitakin Chromium-johdannaisia) käyttäviltä käyttäjiltä, jotka ovat antaneet siihen luvan. Se sulkee sokeasti pois liikenteen Firefoxista (Gecko-moottori) ja Safarista (WebKit-moottori).
• CoreDash RUM: Kerää dataa jokaisesta selaimesta, joka suorittaa JavaScript-pätkän.

Monilla verkkosivustoilla muut kuin Chrome-selaimet edustavat 30–50 % liikenteestä. Pelkkään CrUX-dataan luottaminen luo sokean pisteen: optimoit Googlen V8-moottorille samalla kun laiminlyöt SpiderMonkey- (Firefox) ja JavaScriptCore-moottorit (Safari), joita valtava osa yleisöstäsi käyttää.

Mittarikohtainen diagnostiikka

Eri selainmoottorit hallitsevat resursseja, kääntävät JavaScript-koodia ja laskevat asettelugeometriaa eri tavoin. Käytä tätä ulottuvuutta moottorikohtaisten virheiden paikantamiseen.

Interaction to Next Paint (INP)

INP-ongelmat korreloivat suoraan selaimen JavaScript-moottorin tehokkuuden ja pääsäikeen aikataulutuksen kanssa.

• Firefox (SpiderMonkey): Firefox käsittelee tehtävien priorisointia eri tavalla kuin Chrome. Raskas tapahtumankuuntelija, joka toimii Chromessa, saattaa aiheuttaa huomattavaa syöteviivettä Firefoxissa, koska pääsäikeen yield-toiminnassa on eroja.
• Safari (JavaScriptCore): osoittaa usein erilaista käyttäytymistä mobiililaitteiden "napautusviiveen" suhteen. Hydration-logiikka, joka tuntuu välittömältä Androidilla (Chrome), voi aiheuttaa viiveitä iOS:llä erilaisten tapahtumien etenemismallien vuoksi.

Largest Contentful Paint (LCP)

LCP-poikkeamat viestivät yleensä ominaisuuksien vastaavuuden puutteesta tai tuen puutteesta moderneille optimointirajapinnoille.

• Formaattineuvottelu: Jos Chrome raportoi nopean LCP:n mutta Firefox laahaa perässä, tarkista kuvaformaattistrategiasi. Saatat tarjota AVIF-kuvia Chromelle, mutta käyttää fallback-ratkaisuna suurempia JPEG-kuvia vanhemmille selainversioille, joista tuki puuttuu.
• Prioriteettivihjeet: Chrome kunnioittaa aggressiivisesti fetchpriority="high"-attribuuttia. Selaimet, jotka jättävät tämän huomiotta, käsittelevät LCP-resurssia vakioprioriteetilla, mikä kasvattaa keinotekoisesti latausviivettä.
• Yhteysprotokollat: Edge ja Firefox saattavat neuvotella HTTP/3 (QUIC) -yhteydet eri tavalla yritysverkoissa tai rajoitetuissa verkkoympäristöissä, mikä vaikuttaa LCP:n TTFB-komponenttiin.

Cumulative Layout Shift (CLS)

Renderöintimoottorit laskevat pikseligeometrian käyttämällä erilaista alipikselilogiikkaa.

• Fonttien renderöinti (Gecko vs. Blink): Firefox (Gecko) ja Chrome (Blink) renderöivät fonttien perusviivat ja välistyksen hieman eri tavalla. Jos et täsmää fallback-fonttisi metriikkaa täydellisesti, tekstilohkon koko muuttuu web-fontin latautuessa, mikä aiheuttaa siirtymän yhdessä selaimessa mutta ei toisessa.
• Vierityspalkin varaus: Windows-selaimet (Edge/Firefox/Chrome) varaavat fyysistä tilaa vierityspalkeille, kun taas macOS-selaimet asettavat ne sisällön päälle. Tämä ero aiheuttaa usein leveyteen perustuvia asettelusiirtymiä, jotka ovat näkymättömiä Macilla kehitettäessä mutta huomattavia Windows-käyttäjille.

Työnkulku: Moottorikohtaisten regressioiden eristäminen

Tämän ulottuvuuden ensisijainen käyttötapaus on "moottorin validointi".

• Tunnista poikkeama: Lajittele Selain-taulukkosi vaikutuksen (Impact) tai volyymin (Volume) mukaan. Etsi tietty selain (esim. Firefox Mobile), jonka tulos on merkittävästi huonompi kuin vertailutaso (Chrome Mobile).
• Varmista ympäristö: Tarkista, liittyykö ongelma tiukasti selaimeen vai selaimen ja käyttöjärjestelmän yhdistelmään (esim. Edge Androidilla vs. Edge Windowsilla).
• Debug: Jos Edge on hidas mutta Chrome nopea (molemmat käyttävät Blinkiä), tutki kolmannen osapuolen laajennuksia tai Edge-käyttäjille yleisiä yritystietoturvaohjelmistoja, jotka injektoivat skriptejä DOMiin. Jos Firefox on hidas, auditoi CSS-koodisi ei-standardien ominaisuuksien tai layout thrashing -ilmiön varalta, josta Gecko rankaisee raskaammin kuin Blink.

Vanhentuneet ja upotetut selaimet

Käytä Selain-ulottuvuutta "Long Tail" -suorituskykyhidasteiden tunnistamiseen.

Sovelluksen sisäiset selaimet: Liikenne Instagramista, LinkedInistä tai Facebookista toimii usein rajoitetuissa WebView-näkymissä, jotka käyttäytyvät eri tavalla kuin natiivi mobiiliselain.

Vanhentuneet versiot: Saatat löytää liikennettä vanhentuneista selainversioista. Jos nämä aiheuttavat korkean INP-arvon, konfiguroi koontityökalusi (Babel/PostCSS) tarjoamaan tarvittavat polyfillit tai, jos volyymi on mitätön, tee strateginen päätös tuen lopettamisesta pienentääksesi bundle-kokoa moderneille käyttäjille.