网站性能统计

页面性能统计方式

1. 合成监控
   1. PageSpeed Insights
   2. lighthouse
   3. Web Page Test
2. 真实用户监控
   1. Google Analytics

Web Vitals

Web Vitals 是 Google 的一项举措，旨在为 web 质量提供统一的指导，这些指标对于在网络上提供出色的用户体验至关重要

• LCP(Largest Contentful Paint)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。
• FID(First Input Delay)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为 100 毫秒或更短。
• CLS(Cumulative Layout Shift)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1 或更少。

从这三个指标的含义中我们可以发现这三个指标分别从页面的加载速度，页面的交互性和页面的视觉稳定性这三个角度来衡量页面的性能

Navigation Timing Level 2

User Timing API

• 资源加载网络计时数据：window.performance.getEntriesByType("resource")
• 渲染操作的耗时信息：window.performance.getEntriesByType("paint")
  • first-paint：从导航开始到浏览器将第一个像素渲染到屏幕的时间（白屏耗时）。
  • first-contentful-paint： 浏览器渲染来自 DOM 的第一位内容的时间（FCP）。

TODO:DevTools Performance 使用

参考

• Web 性能
• 前端页面性能优化总结