网站性能优化实战

为什么性能很重要？

网站性能不是可选项，而是关乎生存的基本要求。性能直接影响着用户体验、业务指标和 SEO 排名。

网站性能的影响：

用户体验：页面加载速度每提升 1 秒，跳出率可降低 7%，用户留存率明显提升
SEO 排名：Google 已将 Core Web Vitals 作为排名因素，性能差的网站难以获得流量
转化率：加载速度每提升 1 秒，转化率可提升 7%，对电商尤其重要
移动端体验：3G 网络下，72% 的用户会在 3 秒内离开加载缓慢的网站
用户信任：快速响应的网站更让用户信任
开发成本：性能问题往往导致技术债不断积累

性能优化的关键指标

Core Web Vitals - Google 的关键指标

Google 定义的三个关键指标衡量真实用户体验：

1. LCP（Largest Contentful Paint）- 最大内容绘制

衡量从用户开始加载页面到最大内容元素出现的时间。

目标：< 2.5 秒（优秀）
测量：从页面开始到用户看到主要内容的时间
常见问题：
- 大型 JavaScript 文件阻止渲染
- 服务器响应慢
- 自定义字体加载慢
- 未优化的大型图片

// 监测 LCP
new PerformanceObserver((list) => {
  const entries = list.getEntries()
  const lastEntry = entries[entries.length - 1]
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime)
}).observe({ type: 'largest-contentful-paint', buffered: true })

2. FID（First Input Delay）- 首次输入延迟

衡量用户首次交互（点击、按键等）到浏览器响应的时间。

目标：< 100 毫秒（优秀）
测量：用户操作到浏览器处理的延迟时间
常见问题：
- 主线程被阻塞
- 长任务执行时间过长
- 第三方脚本占用主线程

// 监测 FID
new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log('FID:', entry.processingDuration)
  })
}).observe({ type: 'first-input', buffered: true })

3. CLS（Cumulative Layout Shift）- 累积布局偏移

衡量页面加载期间意外布局变化的程度。

目标：< 0.1（优秀）
测量：意外移动的元素占页面面积的比例
常见问题：
- 图片和视频没有预留尺寸
- 广告和嵌入内容加载延迟
- Web 字体导致文本重排
- 动态注入的内容

// 监测 CLS
let clsValue = 0
new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (!entry.hadRecentInput) {
      const firstSessionEntry = clsValue
      clsValue += entry.value
      console.log('CLS:', clsValue)
    }
  })
}).observe({ type: 'layout-shift', buffered: true })

优化策略详解

1. 图片优化

图片通常占网页总大小的 50% 以上，优化图片能显著提升性能。

使用现代图片格式：

<!-- WebP 格式比 JPEG 小 25-35%，比 PNG 小 45-80% -->
<picture>
  <!-- 现代浏览器使用 WebP -->
  <source srcset="image.webp" type="image/webp">
  <!-- 备选方案 -->
  <source srcset="image.jpg" type="image/jpeg">
  <!-- 兼容性最差的浏览器 -->
  <img src="image.jpg" alt="描述" width="1200" height="600" loading="lazy">
</picture>

响应式图片：

<!-- 不同设备加载不同尺寸的图片 -->
<img 
  srcset="
    image-small.jpg 480w,
    image-medium.jpg 768w,
    image-large.jpg 1200w
  "
  src="image-large.jpg"
  alt="描述"
>

延迟加载：

<!-- 原生懒加载，现代浏览器都支持 -->
<img src="image.jpg" alt="描述" loading="lazy">

<!-- JavaScript 方案（更好的兼容性） -->
<img data-src="image.jpg" alt="描述" class="lazy">
<script>
const images = document.querySelectorAll('.lazy')
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})
images.forEach(img => imageObserver.observe(img))
</script>

图片压缩工具：

ImageOptim（Mac）
FileOptimizer（Windows）
TinyPNG/TinyJPG（在线）
ImageMagick（命令行）

2. 代码分割与懒加载

减少初始加载的 JavaScript 量能显著加快首屏渲染。

// Vue/React - 路由级别代码分割
const routes = [
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard.vue')
  }
]

// 组件级别代码分割
const HeavyComponent = lazy(() => import('./HeavyComponent.jsx'))

// 异步加载第三方库
const loadCharts = () => import('chart.js')

3. 资源压缩

# Gzip 压缩（几乎所有服务器都支持）
# 通常减小 60-70% 的文件大小
gzip -k -v file.js

# Brotli 压缩（更好的压缩率，现代浏览器支持）
# 比 Gzip 额外减小 15-20%
brotli -k -v file.js

# CSS/JS 压缩
npm install -D terser cssnano

# Tree-shaking 移除无用代码
export const unusedFunction = () => {}  // 会被移除

配置示例（Next.js）：

// next.config.js
module.exports = {
  compress: true, // 启用 Gzip 压缩
  swcMinify: true, // 使用 SWC 压缩
}

4. 缓存策略

充分利用浏览器缓存能大幅减少重复请求。

# Nginx 配置示例
location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2)$ {
  # 永远不变的资源（如带 hash 的文件）
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location ~* \.(html|xml)$ {
  # HTML 文件需要更频繁检查
  expires 1d;
  add_header Cache-Control "public, must-revalidate";
}

location / {
  # 默认缓存策略
  expires 10m;
  add_header Cache-Control "public, max-age=600";
}

HTTP 缓存头部：

# 这个资源永远不会过期
Cache-Control: public, immutable, max-age=31536000

# 资源可以被缓存 10 分钟
Cache-Control: public, max-age=600

# 每次都检查，如果没变就用缓存
Cache-Control: public, must-revalidate, max-age=0

5. 其他关键优化

SSR/SSG：预先生成 HTML，加快首屏
CDN 加速：使用地理分布的服务器
数据库查询优化：添加索引，避免 N+1 查询
API 响应优化：返回必要的字段，支持分页
监控和告警：及时发现性能问题

性能测试工具

# Google Lighthouse
# 最权威的性能测试工具，Google 官方出品
# Chrome DevTools → Lighthouse

# PageSpeed Insights
# 在线测试工具：https://pagespeed.web.dev

# WebPageTest
# 高级测试工具：https://webpagetest.org

# Bundle Analyzer
npm install -D webpack-bundle-analyzer

总结

性能优化是持续的过程，需要在开发的各个阶段都保持关注。建议：

定期测试：每次发布前运行 Lighthouse
监控生产：使用 Web Vitals 监控真实用户体验
建立基准：记录改进前后的对比
团队共识：让性能成为团队的文化
持续学习：性能优化技术在不断演进

一个快速的网站是用户体验、SEO 和业务增长的基础。投入性能优化的时间绝对物有所值。

网站性能优化实战：让你的网站飞起来

网站性能优化实战

为什么性能很重要？

性能优化的关键指标

Core Web Vitals - Google 的关键指标

优化策略详解

1. 图片优化

2. 代码分割与懒加载

3. 资源压缩

4. 缓存策略

5. 其他关键优化

性能测试工具

总结

相关标签

相关文章推荐

电商网站秒级加载优化实战 - 从 8 秒到 1.5 秒的完整优化历程

代码分割完全指南 - 按需加载与性能优化

图片优化完全指南 - WebP、AVIF、懒加载、响应式图片