概述
现在我想对一个官网系统进行前端的性能优化，提高页面的显示速度
性能指标
加载时间（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