指标

真实指标

  • First Contentful Paint(FCP)
  • Largest Contentful Paint(LCP)
  • First Input Delay(FID)

  • Comulative Layout Shift(CLS)

    实验室指标

  • Total Blocking Time(TBT)

  • Time to Interactive(TTI)

评估工具

  • Chrome DevTools
  • LightHouse
  • PageSpeed Insights
  • WebPage Test

优化方案

压缩

  • 代码压缩
  • 文本压缩(gzip、Brotli、Zopfli等)
  • Tree-shaking

  • Code-spiliting

    图片优化

  • 小图优化(css sprite、iconfont、dataURI、svg)

  • 图片格式选择
  • 压缩(如tinypng)

  • 响应式

    加载策略

  • 懒加载

  • DNS预解析、预加载、预渲染
  • 离线化(ServiceWorker、AppCache、离线包等)
  • HTTP缓存
  • 数据缓存(localStorage、sessionStorage)
  • 资源加载(顺序、位置、异步等)
  • 请求合并
  • HTTP2
  • CDN

  • 服务端渲染

    执行渲染

  • CSS代码优化(选择器、启用GPU、避免表达式)

  • 使用requestAnimationFrame实现视觉变化
  • 降低复杂度或使用Web Worker
  • 避免大型、复杂的布局和布局抖动
  • 简化绘制复杂度、减少绘制区域
  • 输入处理程序防抖

    感官体验化

    骨架屏、Snapshot、Loading