Core/Dash Dimension: Navigation Origin

Se om dine besøgende ankommer fra det samme domæne eller fra eksterne kilder, og hvordan den fordeling påvirker dine Core Web Vitals.

Gratis prøveperiode

Trusted by market leaders · Client results

nina careperionadevintawhowhatwearaleteiasaturncomparemarktplaatsnestlemonarchhappyhorizonfotocasasnvkpnebayvpnmy work featured on web.devworkivadpg mediaerasmusmcharvardloopearplugs

Hvad Navigation Origin måler

Navigation Origin-dimensionen opdeler dine feltdata i to grupper:

  • Same Origin (1) — den forrige side var på det samme domæne.
  • Cross Origin (2) — brugeren ankom fra et andet domæne, en søgemaskine, en social platform eller indtastede URL'en direkte.

Denne sondring er vigtig, fordi browserens udgangsbetingelser er helt forskellige i hvert tilfælde. En same-origin navigation kan genbruge en eksisterende forbindelse, trække på HTTP-cachen for underressourcer og drage fordel af eventuel prefetching, dit site har sat op. En cross-origin navigation starter fra bunden.

Hvorfor cross-origin navigationer er langsommere

Når en bruger klikker på et link fra et eksternt site, har browseren arbejde at udføre, før den overhovedet kan anmode om din HTML:

  1. DNS-opslag — oversæt dit domæne til en IP-adresse.
  2. TCP-handshake — åbn en forbindelse til din server.
  3. TLS-forhandling — gennemfør HTTPS-handshaken.

Tilsammen tilføjer disse trin typisk 200 til 500 ms på en mobilforbindelse, før den første byte af din side er blevet anmodet. Denne omkostning viser sig direkte i Time to First Byte (TTFB), og hvis dit LCP-element afhænger af en ressource, der indlæses efter HTML'en ankommer, kaskaderer det til en dårligere Largest Contentful Paint (LCP) også.

Cachede underressourcer er heller ikke tilgængelige. En besøgende, der klikkede igennem fra Google, har ingen cachet kopi af dine skrifttyper, hero-billede eller kritiske CSS. En besøgende, der lige kom fra din forside, har sandsynligvis alle disse.

Same-origin navigationer og back-forward cachen

Same-origin navigationer åbner døren til to ydelsesfordele, som cross-origin navigationer ikke kan udnytte lige så pålideligt.

For det første lader Speculation Rules API dig prefetche eller prerendere interne sider, før brugeren klikker. Browseren kan have den næste side fuldt renderet i en baggrundsfane, hvilket gør navigationen øjeblikkelig. Dette gælder kun for same-origin destinationer.

For det andet gendanner back-forward cachen (bfcache) en side fra hukommelsen, når brugeren trykker på tilbageknappen. Bfcache-hits er ekstremt hurtige og scorer godt på tværs af alle Core Web Vitals. De fremgår i dine data som same-origin navigationer. Hvis din same-origin LCP er markant bedre end din cross-origin LCP, bidrager bfcache og prefetch sandsynligvis til det gap.

Sådan læser du denne dimension i CoreDash

coredash metric table urls

I CoreDash kan du bruge Navigation Origin som et filter eller som en opdelingsdimension sammen med enhver metrik. Den mest nyttige sammenligning er LCP efter navigation origin. Et stort gap mellem same-origin og cross-origin LCP fortæller dig én af tre ting:

  • Dine cross-origin indgangssider har en langsom TTFB, der oppuster LCP.
  • Same-origin navigationer drager fordel af prefetch eller bfcache, og det gør dine cross-origin sider ikke.
  • Dine cachede underressourcer hjælper tilbagevendende besøgende, men ikke førstegangsbesøgende fra eksterne kilder.

Cross-origin data er typisk det vigtigere tal for SEO. Googles Chrome UX Report (CrUX) inkluderer alle navigationstyper, men organisk søgetrafik er næsten udelukkende cross-origin. Hvis din cross-origin LCP består, mens din same-origin LCP fejler, er det usædvanligt og værd at undersøge. Det modsatte er langt mere almindeligt.

Reducering af cross-origin straffen

Du kan ikke eliminere cold-start straffen fuldstændigt, men du kan reducere den:

  • Brug et CDN med en hurtig TTFB. Forbindelsesomkostningerne mindskes, når din server er geografisk tæt på brugeren og svarer hurtigt. Sigt efter en TTFB under 200 ms for HTML-dokumentet.
  • Preload LCP-billedet. Et <link rel="preload"> i <head> starter billedhentningen så tidligt som muligt og reducerer tiden mellem HTML-levering og LCP-element paint.
  • Inline kritisk CSS. Ingen renderblokerende stylesheet-anmodning betyder, at browseren kan male hurtigere, selv på en kold forbindelse.
  • Tilføj preconnect-hints for tredjepartsdomæner. Hvis dit LCP-billede eller en renderblokerende ressource hostes på et andet domæne, starter et rel="preconnect"-hint TCP- og TLS-arbejdet tidligt.

For same-origin navigationer er Speculation Rules API den mest virkningsfulde forbedring, der er tilgængelig i dag. Prerendering af den mest sandsynlige næste side reducerer LCP til næsten nul for disse overgange.

Navigation Origin i kontekst

Navigation Origin fungerer godt sammen med Navigation Type-dimensionen (som adskiller navigate, reload, back-forward og prerender) og Effective Connection Type-dimensionen. En cross-origin navigation på en langsom forbindelse er det sværeste scenarie, dit site står over for. Filtrering til disse to betingelser sammen viser dig din sande worst-case ydeevne og hvor de største forbedringer er tilgængelige.