Core/Dash Dimension: Navigation Origin

Se om dina besökare kommer från samma domän eller från externa källor, och hur den uppdelningen formar dina Core Web Vitals.

Gratis provperiod

Trusted by market leaders · Client results

erasmusmccomparedpg mediamonarchnestlekpnmarktplaatsfotocasaharvardadevintamy work featured on web.devperionvpnebaynina carewhowhatwearaleteiaworkivahappyhorizonloopearplugssaturnsnv

Vad Navigation Origin mäter

Dimensionen Navigation Origin delar upp din fältdata i två grupper:

  • Same Origin (1) — den föregående sidan var på samma domän.
  • Cross Origin (2) — användaren kom från en annan domän, en sökmotor, en social plattform eller skrev in webbadressen direkt.

Denna skillnad är viktig eftersom webbläsarens startförhållanden är helt olika i varje fall. En same-origin-navigering kan återanvända en befintlig anslutning, hämta från HTTP-cachen för underresurser och dra nytta av eventuell prefetching som din webbplats har konfigurerat. En cross-origin-navigering börjar från noll.

Varför cross-origin-navigeringar är långsammare

När en användare klickar på en länk från en extern webbplats har webbläsaren arbete att göra innan den ens kan begära din HTML:

  1. DNS-uppslag — översätter din domän till en IP-adress.
  2. TCP-handskakning — öppnar en anslutning till din server.
  3. TLS-förhandling — slutför HTTPS-handskakningen.

Tillsammans lägger dessa steg vanligtvis till 200 till 500 ms på en mobilanslutning innan den första byten av din sida har begärts. Den kostnaden visas direkt i Time to First Byte (TTFB), och om ditt LCP-element beror på en resurs som laddas efter att HTML:en anländer, kaskaderar det till en sämre Largest Contentful Paint (LCP) också.

Cachade underresurser är också otillgängliga. En besökare som klickade sig vidare från Google har ingen cachad kopia av dina typsnitt, hero-bild eller kritisk CSS. En besökare som precis kom från din startsida har troligen allt detta.

Same-origin-navigeringar och back-forward cache

Same-origin-navigeringar öppnar dörren till två prestandafördelar som cross-origin-navigeringar inte kan använda lika tillförlitligt.

För det första låter Speculation Rules API dig prefetch eller prerender interna sidor innan användaren klickar. Webbläsaren kan ha nästa sida fullt renderad i en bakgrundsflik, vilket gör navigeringen omedelbar. Detta gäller endast för same-origin-destinationer.

För det andra återställer back-forward cache (bfcache) en sida från minnet när användaren trycker på bakåtknappen. Bfcache-träffar är extremt snabba och får bra poäng över alla Core Web Vitals. De visas i din data som same-origin-navigeringar. Om din same-origin LCP är betydligt bättre än din cross-origin LCP, bidrar sannolikt bfcache och prefetch till det gapet.

Hur man läser denna dimension i CoreDash

coredash metric table urls

I CoreDash, använd Navigation Origin som ett filter eller som en nedbrytningsdimension vid sidan av valfritt mätvärde. Den mest användbara jämförelsen är LCP efter Navigation Origin. Ett stort gap mellan same-origin och cross-origin LCP säger dig en av tre saker:

  • Dina cross-origin-ingångssidor har en långsam TTFB som blåser upp LCP.
  • Same-origin-navigeringar drar nytta av prefetch eller bfcache och det gör inte dina cross-origin-sidor.
  • Dina cachade underresurser hjälper återkommande besökare men inte förstagångsanvändare från externa källor.

Cross-origin-data är vanligtvis den viktigare siffran för SEO. Googles Chrome UX Report (CrUX) inkluderar alla navigeringstyper, men organisk söktrafik är nästan uteslutande cross-origin. Om din cross-origin LCP godkänns medan din same-origin LCP misslyckas, är det ovanligt och värt att undersöka. Det omvända är mycket vanligare.

Att minska cross-origin-straffet

Du kan inte helt eliminera kallstartsstraffet, men du kan minska det:

  • Använd ett CDN med en snabb TTFB. Anslutningsoverhead krymper när din server är geografiskt nära användaren och svarar snabbt. Sikta på en TTFB under 200 ms för HTML-dokumentet.
  • Förinläs LCP-bilden. En <link rel="preload"> i <head> startar hämtningen av bilden så tidigt som möjligt, vilket minskar tiden mellan HTML-leverans och utritning av LCP-elementet.
  • Inlina kritisk CSS. Inga render-blockerande stilmallsbegäranden betyder att webbläsaren kan rita ut tidigare även på en kall anslutning.
  • Lägg till preconnect-tips för tredjepartsursprung. Om din LCP-bild eller en render-blockerande resurs hostas på en annan domän, startar ett rel="preconnect"-tips TCP- och TLS-arbetet tidigt.

För same-origin-navigeringar är Speculation Rules API den förbättring med högst påverkan som finns tillgänglig idag. Att prerender den mest sannolika nästa sidan sänker LCP till nära noll för de övergångarna.

Navigation Origin i sitt sammanhang

Navigation Origin fungerar bra tillsammans med dimensionen Navigation Type (som separerar navigera, ladda om, bakåt-framåt och prerender) och dimensionen Effective Connection Type. En cross-origin-navigering på en långsam anslutning är det tuffaste scenariot din webbplats står inför. Att filtrera på dessa två förhållanden tillsammans kommer att visa dig din sanna värsta-scenarioprestanda och var de största förbättringarna finns tillgängliga.