PageSpeed Insights
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 许可。更多细节请查看我们的 服务条款 。
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
