目录
大家都喜欢快速加载的网站。如果您的网站没有达到您想要的速度，那么是时候改进了。在改进之前，您需要测量当前的加载时间。在本文中，我将向您展示如何在几分钟内使用 Chrome Dev Tools 轻松发现 WordPress 网站中的瓶颈和错误。
如何打开 dev-tools
首先，在 Chrome 中导航到您要测试的页面。按 Command+Option+I （Mac） 或 Control+Shift+I （Windows 和 Linux）。您将看到 dev tools 面板打开。点击 ‘network’ 选项卡，这就是魔法发生的地方。
模拟您的用户
在测试网站时，复制用户使用的连接和设备非常重要。开发工具有一些不错的选择。您可以通过单击“在线”来选择您的连接，现在您可以切换到 2G 移动连接。通过单击设备图标，您可以在最常见的设备之间切换，桌面是默认选项。额外提示：单击摄像机图标可查看幻灯片。这将可视化您的内容对用户可见的速度。请记住：用户能够尽快阅读和扫描网站比与页面交互更重要。
缓存还是不缓存
切换 ‘Disable cache’ 框很有用。这将为我们提供页面的加载时间，而无需任何浏览器缓存，从而让我们更好地了解需要改进的地方。并非所有页面都可以进行缓存。
始终可以在 Dev tools （开发工具） 窗格中右键单击以清除浏览器 Cookie 和浏览器缓存。
关注哪个指标？
在我们进行第一次测试之前，请务必解释 Dev Tools 将向您展示的最重要的指标：load。“加载”的时间表示页面何时准备就绪并在屏幕上可用，包括页面需要加载的所有其他资产，例如图像、CSS 和脚本。
瀑布图
您现在位于要测试的页面上，并且 Network 选项卡在 Dev Tool 中打开。执行重新加载（说明显示在 dev tools 窗格中）。Chrome 将为您生成瀑布图。您将看到结果滚滚而来，不同的资产被计时并在瀑布图中可视化。现在我们确切地知道浏览器是如何加载此页面的。
找出罪魁祸首
首先，让我们看看我们有多少时间进行 ‘load’ 操作。记下这个数字，让我们看看我们是否可以改进它。通过检查和修复以下项目，我们应该能够将当前加载时间缩短一些时间。
渲染阻止脚本
在浏览器能够判断页面上需要显示什么之前，它需要解析页面加载的所有脚本。因此，如果你把一个 javascript 文件放在页面的标题中，浏览器必须先读取这个文件中的所有代码，然后才能决定在页面上呈现什么。这些脚本会延迟用户在其屏幕上看到您网站内容的时间。要降低跳出率，尽早在屏幕上显示内容非常重要。
您可以通过查看指示“DOMContentLoaded”的蓝线来查找渲染阻塞脚本。在此行之前加载的脚本可能是渲染阻塞。您可以通过单击该脚本并检查 Preview 选项卡来调查它们。尝试使这些脚本异步，将它们移动到结束 body 标签附近（WPRocket 可以为你做这件事）或完全删除它们。Google 写了一篇关于 Render Blocking vs Asynchronous JavaScript 的优秀文章。
可疑状态代码
从服务器下载的所有资产都带有状态代码。这些状态代码说明了很多问题。状态代码 200 表示“正常”。您希望所有资产的状态代码为 200。
您可以通过根据 Status （状态） 列对网络选项卡中的资产进行排序来查找可疑状态代码。跳过 200 个，专注于其他的。
您要修复的状态代码大多是：
- 4xx – 客户端错误，主要是 404 （找不到文件）
- 3xx – 重定向，主要是 301（永久）和 302（临时）重定向
- 5xx （服务器错误）
请查看 httpstatuses 以获取完整列表。
大型请求
大请求是坏事也就不足为奇了。它们速度慢并且会占用大量带宽（尤其是对于手机订阅带宽受限的用户）。对 ‘Size’ 列进行排序以查找最大的资产。
大多数情况下，这些大型资产将是图像或视频文件。确保图像尺寸适合您在网站中使用它们的方式尺寸，并使用一定的压缩量保存它们，使其仍然易于查看。
请求速度慢
大型请求通常很慢，但缓慢的请求并不意味着它总是很大。因此，最好也对 ‘Time’ 列进行排序。慢速请求通常是用于跟踪或特定功能的外部脚本。您可以在 Initiator 列中查看请求下载此资产的资产。此外，如果您不确定资产是什么，请使用 Preview 选项卡检查资产的内容。外部脚本很难优化。如果他们使您的网站速度减慢太多，请考虑其他供应商。
如何更深入地检查资产
我们已经提到了您可以使用 Preview 选项卡执行的一些操作。值得您花时间探索其他选项卡：标头、响应、cookie 和时间。
头
检查有关缓存的语句的 Headers 非常有用。有多种方法可以优化缓存策略。Google 已经制定了一个不错的流程图。缓存策略可以由许多不同的实体设置，包括服务器和网站本身。
我们在 Savvii 使用 Varnish 缓存来加速您的网站。如果您想验证 Varnish 是否在页面上正常工作，这些标题信息可以挽救生命。通过在标题中添加额外信息，您可以轻松查看页面是否由 Varnish 提供。
响应
Preview （预览） 选项卡将尽可能向您显示资产（如 HTML 或图像）的可视化表示形式。的 Response 选项卡将显示资产的代码（不适用于图像）。
Cookie
这对于检查 PHPSESSID Cookie 特别有用。如果存在此类 Cookie，则使用会话。该会话可能是完全必要的，例如，如果用户的购物篮中有商品。如果您没有看到使用会话的理由，请确保未启动任何会话。会话使缓存变得更加困难。
定时
由于我们正在谈论 load time optimization，因此 timing 选项卡很重要。在此选项卡中，您可以看到下载资产所需的不同阶段的时间。要分析的最重要的是：
排队
资产可以排队，因为 HTTP 1.0/1.1 一次只能处理同一域的 6 个连接。如果您有大量小型资产，这可能会降低您的网站速度。要么寻求减少资产数量（例如使用 sprite），要么使用域分片（例如使用 CDN），要么最好：使用使用 HTTP/2 协议的主机，例如 Savvii。HTTP/2 可以同时流式传输任意数量的资产。
等待 （TTFB）
TTFB 是 Time To First Byte 的缩写。此时，您应该检查您请求的页面的 HTML 文档。此计时测量服务器从发送请求时起将第一个字节返回浏览器所花费的时间。这包括 WordPress 的引导、执行 PHP 功能、运行数据库查询、解析 HTML 并将其发送回给用户。您应该测量 TTFB 两次，首先在禁用缓存和启用缓存的情况下检查 TTFB（请参阅“模拟您的用户”段落）。一家好的托管公司会利用服务器端缓存来加速您的 WordPress 网站。
发表回复