前端性能优化实战：让页面加载速度飞起来

为什么要关注性能？

研究表明，页面加载时间每增加 1 秒，用户流失率就会增加 32%。在移动端，53% 的用户会在页面加载超过 3 秒后离开。性能优化不仅影响用户体验，还直接影响 SEO 排名和转化率。

核心 Web 指标

Google 定义了三个核心 Web 指标：

指标	含义	目标
LCP	最大内容绘制	< 2.5s
FID	首次输入延迟	< 100ms
CLS	累计布局偏移	< 0.1

优化策略

1. 图片优化

图片通常是页面中最大的资源。

<!-- 使用 WebP 格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="description">
</picture>

<!-- 懒加载 -->
<img src="image.jpg" loading="lazy" alt="description">

<!-- 指定尺寸防止 CLS -->
<img src="image.jpg" width="800" height="600" alt="description">

最佳实践：

使用 WebP/AVIF 格式替代 JPEG/PNG
使用 srcset 提供多分辨率图片
开启 CDN 图片压缩
使用 CSS content-visibility: auto 跳过屏外渲染

2. JavaScript 优化

// ❌ 阻塞渲染
<script src="large.js"></script>

// ✅ 异步加载
<script async src="analytics.js"></script>

// ✅ 延迟加载（DOM 解析完成后执行）
<script defer src="app.js"></script>

// ✅ 动态导入
button.addEventListener('click', async () => {
  const module = await import('./heavy-module.js');
  module.init();
});

代码分割：

// Vite/Rollup 的动态导入会自动代码分割
const Chart = await import('./Chart.vue');

3. CSS 优化

/* ❌ 渲染阻塞 */
@import url('styles.css');

/* ✅ 使用 media 查询减少阻塞 */
<link rel="stylesheet" href="print.css" media="print">

/* ✅ 关键 CSS 内联 */
<style>
  /* 首屏关键样式 */
  .header { ... }
  .hero { ... }
</style>

4. 字体优化

/* 使用 font-display 控制字体加载行为 */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;  /* 先用后备字体，加载后再替换 */
}

/* 使用 woff2 格式，体积更小 */
/* 只加载需要的字重 */

5. 缓存策略

<!-- 使用 Service Worker 缓存 -->
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
</script>

// sw.js - 缓存策略示例
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

性能监控

使用 Performance API

// 获取性能指标
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.startTime}ms`);
  }
});

observer.observe({ entryTypes: ['largest-contentful-paint'] });

使用 Web Vitals 库

npm install web-vitals

import { onLCP, onFID, onCLS } from 'web-vitals';

onLCP(console.log);
onFID(console.log);
onCLS(console.log);

构建优化

Vite 配置

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash-es'],
        },
      },
    },
    // 启用 CSS 代码分割
    cssCodeSplit: true,
    // 启用图片压缩
    assetsInlineLimit: 4096,
  },
};

检查清单

总结

性能优化是一个持续的过程，不是一次性任务。建议在开发过程中就关注性能，使用 Lighthouse 定期检查，逐步优化。记住：80% 的性能提升来自 20% 的关键优化，优先解决图片、JS 加载和缓存这三个大头。

TheBlockSky