检测您的 Web 应用程序的速度

Question

一个快速的网络应用程序是一个成功的网络应用程序。 在您优化应用程序的实际性能和感知性能之前，您作为开发人员的工作不会完成。 确保您的用户拥有出色的体验不仅是正确的做法，而且还有非常实际和重要的业务原因需要优化。 亚马逊测量每 100 毫秒的网站延迟销售额下降 1%，谷歌测量每 0.5 秒延迟的流量下降 20%（ 引用 ）。 这些是对您的业务和 Web 应用程序具有实际影响的真实数字。

网络速度是如此重要，谷歌甚至全力以赴 让网络更快 。 如果您需要另一个理由来优化您的应用程序性能， 谷歌宣布将页面速度添加到他们的排名算法 中。

有许多已发布的优化 Web 应用程序性能的最佳实践，包括两本很棒的书（ 高性能网站 和 更快的网站 ）。 服务器上的技术（实现正确的缓存控制头）和客户端上的技术（提供图像宽度和高度属性）被组合成一个端到端的策略来优化性能。 有这么多提示和技巧，有时很难衡量它们如何映射到现实生活和您的真实 Web 应用程序。

幸运的是， Chrome DevTools （包含在每个 Chrome 实例中）提供了一个出色的工具，可以检查您的 Web 应用程序并提供定制的建议以提高性能并减少延迟。 本文将介绍与非常流行的 YSlow 工具在范围上相似的审核面板，以及如何使用它来加速您的网站、减少延迟并提高用户满意度。

请注意，审核面板工具目前仅在 Chrome 中可用，但我们预计其他 WebKit 浏览器最终会集成它。

入门

为了说明审计小组如何推荐 Web 应用程序性能改进，我们将把工具转向我们自己的 www.html5rocks.com 。 我们将使用审核面板来帮助我们的网站更快。

启动 DevTools 就像使用 Chrome 图标（Chrome 窗口的右上角）并选择工具 > 开发人员工具一样简单。

DevTools 可在 Chrome 菜单中访问。

有关如何开始使用 DevTools 的更多信息，请阅读 官方文档 。

审核面板位于主工具按钮面板中。 您会注意到，一旦被选中，审核面板尚未对您的 Web 应用程序进行分析。 运行所有启发式方法可能会很慢，尤其是对于 GMail 等大型 Web 应用程序，因此默认情况下禁用该工具。

审计小组

让我们通过单击“运行”按钮进行深入研究，该按钮会在启用性能启发式的情况下重新加载 Web 应用程序。 页面重新加载后，您将看到类似于以下屏幕截图的建议列表。

审计小组的绩效改进建议。

您会注意到审核小组按严重性对建议进行分类，最严重的建议用红点标记，中等严重性的建议用黄点标记。 这种颜色编码可以帮助您优先考虑建议，首先关注最重要（和最大的收获）。

根据建议，括号中的数字是审计工具检测到的实例数。 例如，有 12 个“利用浏览器缓存”实例。 这让您了解建议的应用频率。

速度策略

如前所述，有许多众所周知且经过大量测试的策略可用于优化 Web 应用程序性能。 我们不会在本文中深入介绍它们，但很容易找到更多信息和细节。 有助于了解更多有关 Web 应用程序优化细节的有用资源包括 让我们让 Web 变得更快教程 和 High Scalability 的延迟无处不在，它会让您付出代价 。

审计小组将其建议分为两类：网络利用率和网页性能。

根据审计小组的说法，为了提高网络利用率，我们应该：

• 利用浏览器缓存
• 利用代理缓存
• 最小化 cookie 大小
• 提供来自无 cookie 域的静态内容
• 指定图像尺寸

为了提高网页性能，我们应该：

• 优化样式和脚本的顺序
• 删除未使用的 CSS 规则

让我们看看我们可以专注于提高 htmlrocks.com 性能的策略之一。

利用浏览器缓存

例如，让我们首先深入研究利用浏览器缓存的建议。 这具体是什么意思？ 在 UI 中打开选项，我们会看到以下详细信息：

审计面板为您提供性能改进建议。

• 以下资源缺少缓存过期时间。 未指定过期的资源可能不会被浏览器缓存。
• 以下可缓存资源具有较短的新鲜生命周期。
• 以下资源是明确不可缓存的。 如果可能，请考虑使它们可缓存。

缓存资源是提高网络利用率的绝佳方式，它可以降低开发人员的带宽费用并加快用户的响应时间。 不幸的是，该工具并没有准确地告诉您您需要做什么，因此我们需要深入研究这些建议，并利用我们对 Web 应用程序性能优化的知识来应用这些建议。

缓存

如果不深入研究 HTTP 缓存，我们当然可以涵盖一些基础知识。 。 HTTP 协议包括缓存指令 ，允许服务器和客户端减少需要通过网络传输的数据量 例如，服务器可以告诉客户端在本地保存资源一定时间，从而无需再次请求资源。 客户端还可以询问服务器的资源是否比本地存储的资源更新。 理想情况下，如果资源是静态的，服务器应该告诉客户端将资源存储在本地，并避免将来向服务器请求资源。 正如您可以想象的那样，关于 HTTP 缓存的细节数量惊人，但总的主题是“通过在客户端本地存储资源来减少通过网络发送的数据量”。

修复不可缓存的资源

让我们深入了解一项建议，并了解如何将审核建议与 DevTools 中的其他工具联系起来。 具体来说，让我们看看如何修复“以下资源显式不可缓存”。

因为缓存是通过 HTTP 协议完成的，所以我们需要查看 http://www.html5rocks.com/ 资源的 HTTP 请求和响应。 只需单击资源即可查看原始请求和响应标头和详细信息。

浏览建议。

然后，您将被带到网络、资源或来源面板（取决于单击的资源类型）以及更多信息。 在这种情况下，我们将被带到网络面板。

查看标头信息。

我们正在尝试确认服务器已告诉客户端“不要缓存 html5rocks.com 的主页”。 为此，我们单击资源以查看响应标头，因为这些是服务器发送的标头和指令。

示例： Cache-Control 标题。

果然，服务器向客户端发送了“Cache-Control: no-cache”标头。 正如您想象的那样，这告诉客户端始终请求资源并且不要在本地缓存它。 具体来说， “无缓存”的 HTTP 规范 如下：

“如果 no-cache 指令未指定字段名称，则缓存不得使用响应来满足后续请求，而无需与原始服务器成功重新验证。这允许原始服务器即使通过已被缓存的缓存也可以阻止缓存配置为向客户端请求返回陈旧的响应。”

这正是审计面板建议启用缓存的原因，否则服务器和客户端会发送潜在的冗余信息。

既然我们已经确认了审计建议的根本原因，我们该如何解决呢？ 在这种情况下，解决方案涉及服务器端配置或代码。 根据您的设置，您可以通过 Web 服务器的配置或通过 Web 应用程序框架中的配置启用缓存。 具体来说，您应该包含一个 Expires 标头和一个 Cache-Control: private 以及一个您想要缓存的任何资源的 max-age 参数。

建议就是这样

请记住，审核小组建议基于通用启发式进行改进。 它将多年学习的最佳实践应用于您的特定 Web 应用程序。 大多数时候，这些建议都是正确的，应该牢记在心。

但是，在少数情况下，建议可能是正确的，但实际上可能不会带来任何改进。 例如，如果您的页面只有一个大图像，审核面板会建议将宽度和高度属性添加到 <img> 标记（以便渲染引擎知道图像尺寸而无需下载和检查图像）。 虽然这通常是很好的建议，但如果图像是页面上唯一的元素，它不会有太大帮助。

请记住在理解这些建议后应用它们。 并且不要忘记在更改之前和之后测量性能，以确保确实有改进。

概括

Audits Panel 是一款出色且易于使用的工具，可快速向您展示如何优化 Web 应用程序的性能。 速度是一个关键的网络应用程序属性，因为许多公司已经发现性能与收入或活动之间存在直接相关性。 优化您的应用程序的性能不仅是为您的用户做的正确的事情，而且是为您的企业的底线做的正确的事情。