网页性能测试工具PageSpeedInsights

PageSpeed Insights 是非常棒的工具，它能够测试网页在移动设备和桌面设备上的性能，以及用户体验(UX)！

用户体验方面非常有趣，这是以前没有的功能。它能指出页面中的哪些地方需要改进，比如在移动设备上某个触控区面积太小或与其它触控区距离太近，应该增加触控面积或相邻元素的间隔。点击“问题解决方法”会看到具体是哪些资源或元素引起的问题。进一步点击旁边的“查看屏幕截图”可以看到该问题的具体位置。

性能方面，我们它会告诉你页面上具体哪些图片可以进一步优化、哪些 CSS、 Javascript 可以压缩。在性能规则末尾还可以直接“下载已针对此网页优化的图片、Javascript 和 CSS 资源”——一个打包好的压缩文件。当然，你不想每次页面做点调整都来这里重新下载优化后的资源，而应该把优化放在自动化构建过程中。

前面只是介绍了 PageSpeed Insights 的几个检测规则，下面是目前支持的完整规则，都是非常值得学习的最佳实践。

用户体验规则：

• 使用清晰可辨的字体大小


• 将内容尺寸调整为适合 viewport 大小


• 适当调整点按目标尺寸


• 避免使用应用安装插页式广告


• 避免使用插件


• 配置 viewport

性能规则：

• 优化 CSS 递送


• 优化图片


• 浏览器缓存建议


• 缩减 CSS 的大小


• 缩减 HTML 的大小


• 缩减 Javascript 内容的大小


• 启用压缩


• 按优先级排列可见内容


• 服务器响应时间优化


• 避免着陆页重定向

日常使用和自动测试

PageSpeed Insights 提供了这么多好处，帮你发现你之前可能一直没有注意的问题，所以你应该时不时地用 PageSpeed Insights 检查一下自己的网站。

“我的页面经常改动，要是能自动化检测就好了”。可以的，PageSpeed Insights 支持 REST API ，你可以通过程序自动执行并获得检测结果。使用方法和其它 Google API 类似，详见 这里 。

注：PageSpeed Insights 现在只支持在线或 API 使用，不再支持 Chrome、 Firefox 插件了。

改进性能

网页性能问题的改进主要涉及三个方面：构建工具的使用、页面结构和服务器端。下面这个视频有进一步说明：

最后，再介绍一下 服务器端的 PageSpeed 模块 。它是开源的用于在 Web 服务器上自动优化网站的模块，支持 Apache 和 Nginx 。

作者：韩国恺。本系列文章以 Addy & Matt 的系列视频  Totally Tooling Tips 的内容为基础重新整理而成，主要介绍一些(前端)开发者喜欢的工具和技巧。

Post Views: 2

除非特别声明，此文章内容采用 知识共享署名 3.0 许可，代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。