Core/Dash 维度： 导航来源

查看你的访客是来自同一域名还是外部来源，以及这种划分如何影响你的 Core Web Vitals。

免费试用

Trusted by market leaders · Client results

my work featured on web.devvpndpg mediasaturncompareerasmusmckpnfotocasamonarchwhowhatwearhappyhorizonnestleebaynina carealeteiaworkivamarktplaatsharvardsnvperionadevintaloopearplugs

导航来源测量什么

导航来源维度将你的 field data 分为两组：

  • 同源 (1) — 上一页面在同一域名下。
  • 跨源 (2) — 用户来自不同域名、搜索引擎、社交平台，或者直接输入 URL。

这种区分很重要，因为浏览器的初始条件在两种情况下完全不同。同源导航可以复用现有连接，利用 HTTP 缓存获取子资源，并受益于你网站设置的任何预取。跨源导航则是从零开始。

为什么跨源导航更慢

当用户点击外部网站的链接时，浏览器在请求你的 HTML 之前必须完成以下工作：

  1. DNS 查找 — 将你的域名解析为 IP 地址。
  2. TCP 握手 — 打开与你的服务器的连接。
  3. TLS 协商 — 完成 HTTPS 握手。

在移动网络下，这些步骤通常会增加 200 到 500 毫秒的开销，然后才会请求页面的第一个字节。这部分开销会直接反映在 Time to First Byte (TTFB) 中。如果你的 LCP 元素依赖于 HTML 到达后才加载的资源，这也会导致更差的 Largest Contentful Paint (LCP)。

缓存的子资源也无法使用。从 Google 点击进入的访客没有你的字体、首屏图片或关键 CSS 的缓存副本。而刚从你主页跳转过来的访客通常拥有所有这些缓存。

同源导航与 back-forward cache

同源导航带来了两个跨源导航无法可靠使用的性能优势。

首先，Speculation Rules API 允许你在用户点击之前预取或预渲染内部页面。浏览器可以在后台标签页中将下一个页面完全渲染好，让导航瞬间完成。这仅适用于同源目标页面。

其次，当用户按下后退按钮时，back-forward cache (bfcache) 会从内存中恢复页面。bfcache 命中极快，且在所有 Core Web Vitals 中的得分都很高。在你的数据中，它们会显示为同源导航。如果你的同源 LCP 明显优于跨源 LCP，bfcache 和预取很有可能是造成这种差距的原因。

如何在 CoreDash 中解读这个维度

coredash metric table urls

在 CoreDash 中，你可以将导航来源作为过滤器，或作为任何指标的细分维度。最有用的对比是按导航来源查看 LCP。同源 LCP 和跨源 LCP 之间的巨大差距说明了以下三种情况之一：

  • 你的跨源入口页面的 TTFB 很慢，拉高了 LCP。
  • 同源导航受益于预取或 bfcache，而跨源页面则没有。
  • 你的缓存子资源帮助了回访访客，但对首次来自外部来源的访客没有帮助。

对于 SEO 而言，跨源数据通常是更重要的指标。Google 的 Chrome UX Report (CrUX) 包含所有导航类型，但自然搜索流量几乎全是跨源的。如果你的跨源 LCP 合格而同源 LCP 不合格，这很不寻常，值得调查。相反的情况则常见得多。

减少跨源惩罚

你无法完全消除冷启动惩罚，但你可以减少它：

  • 使用具有快速 TTFB 的 CDN。 当你的服务器在地理位置上靠近用户并且响应迅速时，连接开销就会缩小。争取将 HTML 文档的 TTFB 控制在 200 毫秒以下。
  • 预加载 LCP 图片。 在 <head> 中添加 <link rel="preload"> 可以尽早开始获取图片，从而缩短 HTML 交付到 LCP 元素绘制之间的时间。
  • 内联关键 CSS。 没有 render blocking 的样式表请求，意味着即使在冷连接上，浏览器也能更早开始绘制。
  • 为第三方源添加 preconnect 提示。 如果你的 LCP 图片或 render blocking 资源托管在不同的域名上，rel="preconnect" 提示可以提前开始 TCP 和 TLS 工作。

对于同源导航，Speculation Rules API 是目前影响力最大的改进。预渲染最可能的下一个页面，可以将这些转换的 LCP 降至接近零。

结合上下文分析导航来源

导航来源维度与 Navigation Type 维度（区分 navigate、reload、back-forward 和 prerender）以及 Effective Connection Type 维度结合使用效果很好。慢速连接下的跨源导航是你的网站面临的最困难的场景。同时过滤这两个条件，将向你展示真正的最差情况下的性能，以及哪里可以实现最大的改进。