审核web应用程序的前端性能

Question

目前，我正在尝试优化公司web应用程序的UI。应用程序只会被工作人员访问，所以服务器和客户端之间的连接速度总是比在互联网上快得多。

我一直在使用性能审核工具，如Y慢！谷歌Chrome的分析工具试图突出值得调查的领域。然而，这些工具是在考虑到互联网的情况下编写的。例如，Google对应用程序的审计建议如下：

网络利用

• 合并外部CSS (红色警告)
• 合并外部JavaScript (红色警告)
• 启用gzip压缩(红色警告)
• 利用浏览器缓存(红色警告)
• 利用代理缓存(琥珀警告)
• 最小化饼干大小(琥珀警告)
• 跨主机名并行下载(琥珀警告)
• 提供无炊具域的静态内容(琥珀警告)

网页性能

• 删除未使用的CSS规则(琥珀警告)
• 使用普通CSS属性名而不是供应商前缀(琥珀警告)

考虑到连接速度和使用模式，这些建议中的任何一点都是完全多余的吗？用户将在一天内频繁地使用该应用程序，因此，只要对未来的页面视图做了最少的工作，最初的点击量是否很大(当他们第一次访问页面并构建其缓存时)并不重要。

例如，合并我们所有的CSS和JavaScript文件是否值得？它可能会加快初始页面的浏览速度，但是在整个工作日中，它对后续的页面浏览有多大的不同呢？

我已经尝试寻找这个，但我一直想出的是标准的互联网面对性能的建议。任何关于在这种情况下我的性能调整工作的重点或其他审计工具建议的建议，都将不胜感激。

Answer 1

一个大小并不适合所有这些东西；立即跳出具有重大影响的项目是“利用浏览器缓存”。这显然减少了带宽的使用，但同时也告诉浏览器它不需要重新解析您缓存的任何内容。即使你有足够的带宽，你下载的每个文件都需要来自浏览器的资源--一个线程来管理下载、解析文件、管理内存等等。这样做会让应用程序感觉更快。

GZIP压缩可能是多余的，如果您确实有无限的带宽，甚至可能有害-它消耗服务器和客户端的资源来压缩数据。不多，而且我从来没能测量过--但理论上这可能会有所改变。

代理缓存也可能有所帮助-取决于您公司的网络基础设施。

减少cookie大小可能会有所帮助--不仅是因为带宽问题，而且管理cookie会消耗客户端上的资源；这也解释了为什么提供来自cookie少域的静态资产会有所帮助。

然而，如果您要优化UI的性能，您确实需要了解慢下来的原因。Y!Slow和Chrome专注于常见的问题，其中许多问题与带宽和浏览器的行为有关。他们不知道JS的某个特定部分是慢的，也不知道服务器是否在处理特定的动态页面请求。

像Firebug这样的工具对此有帮助--看看网络发生了什么，以及是否有任何资产比您预期的要花更长的时间。使用JavaScript分析器查看您花费的时间最多的地方。

Answer 2

大多数这些工具都提供了一次检查的步骤或建议。然而，它解决了很少的问题，它没有告诉你的用户如何体验你的网站。实时用户监控是衡量实时用户性能的正确解决方案。您可以使用导航定时API来测量页面加载时间和资源时间。

如果您想要查找服务，可以尝试https://www.atatus.com/，它提供了真正的用户监视、Ajax监视、事务监视和JavaScript错误跟踪。

Answer 3

以下是您可以用来测试网站速度的附加服务列表：http://sixrevisions.com/tools/free-website-speed-testing/