Skip to content

概述

现在我想对一个官网系统进行前端的性能优化,提高页面的显示速度

性能指标

  1. 加载时间(Page Load Time)

    • 加载时间是指用户打开网站页面所需的总时间,通常以秒为单位。这包括从用户请求页面到页面完全加载并可交互的时间。
    • 通常,加载时间越短越好,因为用户更喜欢快速加载的页面。
  2. 首次内容渲染(First Contentful Paint - FCP)

    • FCP 衡量了用户在页面加载过程中首次看到内容的时间。这通常是页面的一部分文本、图像或其他元素。
    • FCP 的快速发生有助于传达给用户页面正在加载,并且可以改善用户体验。
  3. 最大内容渲染(Largest Contentful Paint - LCP)

    • LCP 是用户在页面加载过程中看到的最大、最重要的元素的渲染时间。这通常是页面上的主要文本或图像。
    • 优化 LCP 有助于确保用户能够快速看到页面上的关键内容。
  4. 累积布局偏移(Cumulative Layout Shift - CLS)

    • CLS 衡量了页面加载过程中布局变化的数量。这指的是当用户看到页面内容时,元素是否突然移动或改变位置。
    • 高 CLS 值可能会导致用户困惑,因此需要减小页面上的布局变化。
  5. 首次输入延迟(First Input Delay - FID)

    • FID 衡量了用户首次与页面互动(例如,点击按钮或链接)后,实际响应互动的时间。
    • 快速响应用户互动对于提高用户体验至关重要。
  6. 可交互时间(Time to Interactive - TTI)

    • TTI 衡量了用户打开页面后,页面变得完全可交互所需的时间。这包括JavaScript的加载和执行时间。
    • 快速的 TTI 有助于确保用户可以立即与页面进行互动,而不必等待太长时间。
  7. 页面大小(Page Size)

    • 页面大小是指完全加载页面时的数据量,通常以字节为单位。
    • 减小页面大小有助于加快加载速度,特别是对于移动设备用户来说。
  8. HTTP请求数量(Number of HTTP Requests)

    • 这是页面加载所需的HTTP请求的总数,包括HTML、CSS、JavaScript、图像和其他资源。
    • 减少HTTP请求可以提高加载速度,因为每个请求都需要时间来完成。

测试工具

chrome devtool lighthouse

优化方式

总结