当前位置:Gxlcms > html代码 > PageSpeedInsights_html/css_WEB-ITnose

PageSpeedInsights_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:25人阅读

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 许可。更多细节请查看我们的 服务条款 。

人气教程排行