网站性能优化

  1. 减少 http 请求，合理设置 HTTP 缓存。
  2. 使用浏览器缓存。
  3. 启用压缩（Gzip / Brotli）。
  4. CSS Sprites（雪碧图）。
  5. LazyLoad Images（图片懒加载）。
  6. CSS 放在页面最上部，JavaScript 放在页面最下面。
  7. 异步请求 Callback（就是将一些行为样式提取出来，慢慢地加载信息的内容）。首页使用内联样式。
  8. 减少 cookie 传输。可以考虑静态资源使用独立域名访问，避免请求静态资源时发送 cookie，减少 cookie 传输次数。
  9. 路由懒加载等。

补充

补充：性能优化的两条主线是"让请求更少、更小"与"让渲染更快、更稳"。

网络层

  • 合并请求、雪碧图、HTTP/2 多路复用
  • CDN 加速静态资源
  • 资源压缩：Brotli > Gzip
  • 长缓存 + 文件名 hash

渲染层

  • 关键 CSS 内联，非关键 CSS 异步
  • defer / async 控制脚本加载
  • 图片：loading="lazy" + srcset + WebP
  • 字体：font-display: swap + 预加载

运行时

  • 路由懒加载、按需引入
  • 列表虚拟滚动
  • Web Worker 处理重计算
  • 减少重排重绘

指标

  • LCP（最大内容绘制）< 2.5s
  • FID（首次输入延迟）< 100ms
  • CLS（累计布局偏移）< 0.1

来源整理自：我的有道云笔记