返回

前端页面性能优化

页面速度测试和报告工具

网页性能会受到很多因素的影响，使用这些工具可以快速、多方位地了解网页在性能方面存在的问题。

  • Pagespeed Insights 可以快速分析页面并给出一些通用的建议来提升网站性能
  • Lighthouse 可以在网站的性能、SEO 和可访问性等多个方面提供详细的分析，它有三种使用方式：
    • Chorme 开发者工具 Lighthouse 面板
    • Chrome 扩展
    • npm 包运行
  • Firefox Dev Tools
  • Chrome Dev Tools
  • Web Vitals chrome 扩展对给定页面的核心 web 指标进行测量和报告。该工具为开发者进行代码更改时提供实时性能反馈
  • Webpagetest.org 检测页面在不同真实设备类型、区域和网络速度下的速度
  • 使用 web-vitals JavaScript 库收集真实用户监控数据（RUM），借助其提供的 API 为每个可实际测量的 Web 指标进行收集和报告工具。
  • Chrome 开发者工具代码覆盖率 Coverage 选项检查资源未使用率

不同的性能测试指标有什么意义

这些工具提供了很多用户感知时间的测量指标，包括

  • First Content Paint 首次内容绘制（FCP）指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间，迅捷的 FCP 有助于让用户确信某些事情正在进行。
  • Larget Contentful Paint 最大内容绘制（LCP）指标会根据页面首次开始加载的时间点来报告可视区域内可见最大图像或文本完成渲染的相对时间，迅捷的 LCP 有助于让用户确信页面是有效的。
  • Speed Index 速度（SI）指标表示页面内容填充的速度，这是页面可视化内容展示的平均时间，值越小用表示页面加载速度越快。
  • Time to Interactive 可交互（TTI）指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需要的时间，迅捷的 TTI 有助于确保页面的有效性。
  • Total Block Time 总阻塞时间（TBT）指标测量 FCP 与 TTI 之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应，低的 TBT 有助于确保页面的可用性。
  • Cumulative Layout Shift 累积布局偏移（CLS）测量整个页面生命周期内的所有意外布局偏移中最大一连串的布局偏移分数，较低的 CLS 有助于确保一个页面是令人愉悦的。

参考