Core/Dash-dimensio: Navigaation alkuperä

Katso, saapuvatko kävijäsi samalta verkkotunnukselta vai ulkoisista lähteistä, ja miten tämä jako muokkaa Core Web Vitals -arvojasi.

Ilmainen kokeilu

Trusted by market leaders · Client results

kpnwhowhatwearnestleworkivaaleteiaperionmy work featured on web.devharvardebaycompareadevintahappyhorizonsaturndpg medialoopearplugsmarktplaatsnina careerasmusmcfotocasasnvmonarchvpn

Mitä Navigaation alkuperä mittaa

Navigaation alkuperä -dimensio jakaa kenttädatasi kahteen ryhmään:

  • Same Origin (1) — edellinen sivu oli samalla verkkotunnuksella.
  • Cross Origin (2) — käyttäjä saapui eri verkkotunnukselta, hakukoneesta, sosiaalisesta alustasta tai kirjoitti URL-osoitteen suoraan.

Tällä erolla on merkitystä, koska selaimen lähtökohdat ovat kummassakin tapauksessa täysin erilaiset. Same-origin-navigaatio voi uudelleenkäyttää olemassa olevaa yhteyttä, hyödyntää HTTP-välimuistia aliresursseille ja hyötyä sivustosi mahdollisesti määrittämästä esilatauksesta (prefetching). Cross-origin-navigaatio alkaa tyhjästä.

Miksi cross-origin-navigaatiot ovat hitaampia

Kun käyttäjä napsauttaa linkkiä ulkoiselta sivustolta, selaimella on tehtävää ennen kuin se voi edes pyytää HTML-koodiasi:

  1. DNS-kysely (DNS lookup) — selvittää verkkotunnuksesi IP-osoitteen.
  2. TCP-kättely (TCP handshake) — avaa yhteyden palvelimellesi.
  3. TLS-neuvottelu (TLS negotiation) — suorittaa HTTPS-kättelyn loppuun.

Yhdessä nämä vaiheet lisäävät mobiiliyhteydellä tyypillisesti 200–500 ms ennen kuin sivusi ensimmäistäkään tavua on pyydetty. Tämä viive näkyy suoraan Time to First Byte (TTFB) -arvossa, ja jos LCP-elementtisi on riippuvainen HTML:n saapumisen jälkeen ladattavasta resurssista, se heikentää myös Largest Contentful Paint (LCP) -arvoa.

Välimuistissa olevat aliresurssit eivät myöskään ole käytettävissä. Googlesta klikanneella kävijällä ei ole välimuistikopiota fonteistasi, hero-kuvastasi tai kriittisestä CSS:stä. Kävijällä, joka juuri saapui etusivultasi, todennäköisesti on nämä kaikki.

Same-origin-navigaatiot ja back-forward cache

Same-origin-navigaatiot avaavat oven kahdelle suorituskykyedulle, joita cross-origin-navigaatiot eivät voi käyttää yhtä luotettavasti.

Ensinnäkin Speculation Rules API mahdollistaa sisäisten sivujen esilatauksen (prefetch) tai esiesittämisen (prerender) ennen kuin käyttäjä napsauttaa niitä. Selain voi renderöidä seuraavan sivun valmiiksi taustavälilehdellä, jolloin navigaatiosta tulee välitön. Tämä koskee vain same-origin-kohteita.

Toiseksi back-forward cache (bfcache) palauttaa sivun muistista, kun käyttäjä painaa paluupainiketta. Bfcache-osumat ovat erittäin nopeita ja saavat hyviä tuloksia kaikissa Core Web Vitals -mittareissa. Ne näkyvät datassasi same-origin-navigaatioina. Jos same-origin LCP on huomattavasti parempi kuin cross-origin LCP, bfcache ja prefetch todennäköisesti edistävät tätä eroa.

Kuinka tulkita tätä dimensiota CoreDashissa

coredash metric table urls

Käytä CoreDashissa Navigaation alkuperää (Navigation Origin) suodattimena tai erittelydimeniona minkä tahansa mittarin rinnalla. Hyödyllisin vertailu on LCP navigaation alkuperän mukaan. Suuri ero same-origin- ja cross-origin-LCP:n välillä kertoo yhden kolmesta asiasta:

  • Cross-origin-aloitussivuillasi on hidas TTFB, mikä heikentää LCP-arvoa.
  • Same-origin-navigaatiot hyötyvät prefetchistä tai bfcachesta, mutta cross-origin-sivusi eivät.
  • Välimuistissa olevat aliresurssit auttavat palaavia kävijöitä, mutta eivät ulkoisista lähteistä ensimmäistä kertaa saapuvia.

Cross-origin-data on tyypillisesti SEO:n kannalta tärkeämpi luku. Googlen Chrome UX Report (CrUX) sisältää kaikki navigaatiotyypit, mutta orgaaninen hakuliikenne on lähes kokonaan cross-origin-pohjaista. Jos cross-origin LCP on hyväksyttävä ja same-origin LCP epäonnistuu, se on epätavallista ja tutkimisen arvoista. Päinvastainen tilanne on paljon yleisempi.

Cross-origin-viiveen pienentäminen

Kylmäkäynnistyksen (cold-start) viivettä ei voi poistaa kokonaan, mutta sitä voi pienentää:

  • Käytä CDN-verkkoa nopealla TTFB:llä. Yhteysviiveet pienenevät, kun palvelimesi on maantieteellisesti lähellä käyttäjää ja vastaa nopeasti. Pyri alle 200 ms TTFB-arvoon HTML-dokumentin osalta.
  • Esilataa LCP-kuva. <link rel="preload"> <head>-osiossa aloittaa kuvan noudon mahdollisimman aikaisin, mikä lyhentää aikaa HTML:n saapumisesta LCP-elementin piirtämiseen.
  • Sisällytä kriittinen CSS (inline). Renderöinnin estävän tyylisivupyynnön puuttuminen tarkoittaa, että selain voi piirtää sivun nopeammin jopa kylmäkäynnistyksessä.
  • Lisää preconnect-vihjeet kolmannen osapuolen alkuperille. Jos LCP-kuvasi tai renderöinnin estävä resurssi sijaitsee eri verkkotunnuksella, rel="preconnect" -vihje aloittaa TCP- ja TLS-työn varhaisessa vaiheessa.

Same-origin-navigaatioissa Speculation Rules API on nykyään vaikuttavin saatavilla oleva parannus. Todennäköisimmän seuraavan sivun esiesittäminen (prerendering) leikkaa LCP:n lähes nollaan näissä siirtymissä.

Navigaation alkuperä kontekstissaan

Navigaation alkuperä (Navigation Origin) toimii hyvin yhdessä Navigation Type -dimension (joka erottelee navigate, reload, back-forward ja prerender -tyypit) sekä Effective Connection Type -dimension kanssa. Cross-origin-navigaatio hitaalla yhteydellä on vaikein skenaario, jonka sivustosi kohtaa. Suodattamalla nämä kaksi ehtoa yhdessä näet todellisen pahimman tapauksen suorituskykysi ja sen, missä suurimmat parannukset ovat tehtävissä.