Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

使用 Chrome DevTools 分析网络性能入门

注:如需了解提高加载速度的综合方法,请参阅优化网站速度。 本教程包含用于分析加载性能的推荐工作流程。

在本交互式分步教程中,您将学习如何使用 Chrome DevTools 的 Network 面板,了解页面加载缓慢的原因。

第 1 步:设置 DevTools

假设移动设备用户向您举报您网站上的特定页面加载缓慢, 那么您就需要提高页面加载速度。

  1. 点击 Open Slow Page。 此页面会在新标签中打开。

  2. 在页面处于焦点状态时,按 Command+Option+I (Mac) 或 Control+Shift+I(Windows、Linux)以在此页上打开 DevTools。

  3. 在 DevTools 中,点击 Network 标签。

    在要诊断的加载缓慢的页面上打开的 Chrome DevTools Network 面板。

    图 1. 在要诊断的加载缓慢的页面旁打开的 Chrome DevTools Network 面板。

  4. 启用 Capture Screenshots 捕获屏幕截图 {:.devtools-inline},此图标启用后变为蓝色。 DevTools 会在页面加载期间捕获屏幕截图。

第 2 步:模拟移动设备用户的体验

在笔记本电脑或桌面设备上测试网络性能可能无法模拟移动设备用户的体验。 您的互联网连接速度比移动设备用户快得多,并且您的浏览器在之前访问时曾缓存资源。

  1. 勾选 Disable Cache 复选框。 启用此复选框后,DevTools 不会传送任何缓存资源。 如此可以更准确地模拟新用户查看您页面时的体验。

  2. 在当前显示 No Throttling 的下拉菜单中,选择 Regular 2G。 DevTools 会限制网络连接速度,以模拟普通 2G 体验。 这才是移动设备用户在网络连接不佳的环境下获得的网站体验。

设置屏幕截图、停用缓存和限制后的 Chrome DevTools Network 面板。
图 2. 经设置可模拟移动设备用户体验的 Chrome DevTools Network 面板。 屏幕截图、停用缓存和限制按从左到右的顺序分别添加了蓝色边框。

这是最差的设置。 如果您可以在这样的设置环境下提高页面加载速度,您所有用户的页面加载速度都会提高!

第 3 步:分析请求

通过重新加载页面并分析传入的请求,确定导致页面加载缓慢的因素。

A 部分:查找阻塞渲染的脚本

当浏览器遇到 <script> 标记时,必须立即暂停渲染,并执行脚本。 查找页面加载不需要的脚本,并将其标记为异步或延迟其执行时间,以缩短页面加载时间。

  1. Command+R (Mac) 或 Control+R(Windows、Linux)以重新加载页面。 在正常的 Wi-Fi 连接环境下,页面需要 10 多秒才能完整加载。

    重新加载页面后的 Chrome DevTools Network 面板。
    图 3. 重新加载页面后的 Chrome DevTools Network 面板。

  2. 注意 Network 面板底部 Summary 窗格中的 DOMContentLoaded 值。 您看到的值至少应该是 4 秒。 当您看到此事件像这样延迟触发时,需注意查找延迟主文档加载和解析的脚本。

  3. 点击 main.js 以进一步调查该请求。 DevTools 会显示一组新标签,提供有关此请求的更多信息。

  4. 点击 Preview 标签以查看此请求的源代码。 您会看到此脚本挂起 4000 毫秒。 通过使用 async 属性标记此脚本,并将其移到文档的 <body> 底部,让页面无需等待此脚本即可进行加载。

    在 Preview 窗格中查看 main.js 的源代码。
    图 4. 在 Preview 窗格中查看 main.js 的源代码。

如需了解有关阻塞渲染的脚本的更多信息,请参阅解析器阻止 JavaScript 与异步 JavaScript

B 部分:查找较大的请求

加载页面时,您是否发现 DevTools 徽标需要较长的加载时间? 徽标加载不会阻塞加载,但会使页面显示迟缓。 用户喜欢快速显示的页面。

  1. 点击 Close 关闭,{:.devtools-inline} 以便再次查看 Requests 窗格

  2. 双击左上方的屏幕截图。

  3. 按右箭头键以浏览整组屏幕截图。 屏幕截图下面的时间表示截取屏幕截图的时间。 加载屏幕截图需要几秒钟。 这意味着文件可能很大。

  4. 点击屏幕截图外部的任意位置以使其最小化。

  5. 将鼠标指针悬停在 logo-1024px.png 请求的瀑布图上。 此请求的大部分时间都用在下载图像上。 这表明图像过大。

    logo-1024px.png 的瀑布图。
    图 5. logo-1024px.png 的瀑布图。

第 4 步:在更新页面上验证修正方法

您即将完成工作。 现在假定您已在页面上完成以下两项更改操作:

  • 您已将脚本移到 <body> 底部,并将其标记为 async,以防脚本阻塞页面加载。
  • 您已将徽标转换为 SVG 以缩小其大小。

接下来就是测试更新页面,以验证您的修正方法是否真的可以加快页面加载速度。

  1. 点击 Open Fast Page。 修复的页面将在新标签中打开。

  2. 采用与之前相同的方式设置 DevTools。 应启用屏幕截图和停用缓存这两项功能,并且应将网络节流值设置为 Regular 2G

  3. 重新加载页面。 此时,页面加载速度要快得多。

    应用修正方法后的页面加载记录。
    图 6. 应用修正方法后的页面加载记录。 此页面过去需要 10 秒左右才能完整显示, 而现在只需 1 秒左右。

后续步骤

做得好! 现在您是真正的 Chrome DevTools Network 面板专家了。 或许 还不是专家, 但您的确拥有扎实的知识和技能基础。

反馈

Was this page helpful?