概述
现在我想对一个官网系统进行前端的性能优化,提高页面的显示速度
性能指标
加载时间(Page Load Time):
- 加载时间是指用户打开网站页面所需的总时间,通常以秒为单位。这包括从用户请求页面到页面完全加载并可交互的时间。
- 通常,加载时间越短越好,因为用户更喜欢快速加载的页面。
首次内容渲染(First Contentful Paint - FCP):
- FCP 衡量了用户在页面加载过程中首次看到内容的时间。这通常是页面的一部分文本、图像或其他元素。
- FCP 的快速发生有助于传达给用户页面正在加载,并且可以改善用户体验。
最大内容渲染(Largest Contentful Paint - LCP):
- LCP 是用户在页面加载过程中看到的最大、最重要的元素的渲染时间。这通常是页面上的主要文本或图像。
- 优化 LCP 有助于确保用户能够快速看到页面上的关键内容。
累积布局偏移(Cumulative Layout Shift - CLS):
- CLS 衡量了页面加载过程中布局变化的数量。这指的是当用户看到页面内容时,元素是否突然移动或改变位置。
- 高 CLS 值可能会导致用户困惑,因此需要减小页面上的布局变化。
首次输入延迟(First Input Delay - FID):
- FID 衡量了用户首次与页面互动(例如,点击按钮或链接)后,实际响应互动的时间。
- 快速响应用户互动对于提高用户体验至关重要。
可交互时间(Time to Interactive - TTI):
- TTI 衡量了用户打开页面后,页面变得完全可交互所需的时间。这包括JavaScript的加载和执行时间。
- 快速的 TTI 有助于确保用户可以立即与页面进行互动,而不必等待太长时间。
页面大小(Page Size):
- 页面大小是指完全加载页面时的数据量,通常以字节为单位。
- 减小页面大小有助于加快加载速度,特别是对于移动设备用户来说。
HTTP请求数量(Number of HTTP Requests):
- 这是页面加载所需的HTTP请求的总数,包括HTML、CSS、JavaScript、图像和其他资源。
- 减少HTTP请求可以提高加载速度,因为每个请求都需要时间来完成。
测试工具
chrome devtool lighthouse