优化 Core Web Vitals 的完美 Chrome Network 面板设置

优化 Core Web Vitals 的完美 Chrome Network 面板设置

Chrome DevTools Network 面板是 Web 开发人员优化 Core Web Vitals 时必不可少的工具。遗憾的是，默认设置并非速度优化的最佳选择。通过配置正确的设置，您可以准确模拟真实条件，并获得更好的网站性能洞察。本指南将引导您完成分析和改善 Core Web Vitals 分数的理想 Chrome DevTools Network 面板设置。

配置 Network 面板

要访问 Network 面板，请打开 Chrome DevTools（F12 或 Ctrl+Shift+I）并点击"Network"选项卡。

节流

优化 Core Web Vitals 最重要的设置之一是网络节流。这允许您模拟用户可能遇到的各种网络条件。

点击 Network 面板中的"No throttling"下拉菜单。选择"Fast 4g"、"Slow 4g"或"3G"来模拟移动网络条件。最佳选项取决于您的受众。如果您的受众通常使用高端移动设备且网络条件良好，请启用"Fast 4G"。如果典型网络条件较差，请选择"Slow 4G"，否则为安全起见选择"3G"

禁用缓存

为确保您以首次访问者的体验来测试网站：勾选 Network 面板中的"Disable cache"复选框。

启用大请求行

大请求行提供了每个请求的更全面视图。它将为您提供的最重要的新信息包括：

• size 列现在将显示请求的未压缩和压缩大小。
• name 列将提供路径信息。
• priority 列将显示初始和最终 fetch priority。

启用截图

启用截图后，Chrome 将在页面加载期间捕获截图。每张截图代表页面上的一次视觉变化，可用于了解页面加载的不同阶段并识别 Cumulative Layout Shift。

• 在 Network 选项卡获得焦点时，按 Ctrl+F5（Mac 上为 Cmd+R）刷新页面。
  
• Chrome 将在页面加载过程中捕获截图。
• 这些截图的缩略图将显示在 Network 面板复选框行下方。

截图概览有一些您可能还不知道的实用小功能：

• 将鼠标悬停在截图上可查看其捕获时间。这将由概览图表上的黄色垂直线指示。
• 点击截图缩略图可过滤掉该截图之后发生的请求。
• 双击缩略图可放大并查看截图详情。

启用最佳网络列

要查找 Core Web Vitals 问题，以下面板将为您提供有用的信息。只需右键点击任意列名并选择您偏好的列

然后启用以下对 Core Web Vitals 有重要意义的列：

启用以下自定义响应头：

启用以下自定义响应头：

最终结果：

现在是时候重新加载页面，查看 Chrome Network 选项卡中新的和改进后的网络响应了。它看起来大致如下，并显示了您开始调试 Core Web Vitals 所需的所有信息！