前端性能优化实战：首屏加载从 3s 优化到 800ms

前端性能优化实战：首屏加载从 3s 优化到 800ms

背景与目标

• 初始指标（移动 4G，冷启动）：TTFB≈300ms，FCP≈2.2s，LCP≈3.0s，JS 传输≈450KB，图片≈1.1MB
• 优化目标：首屏（LCP）≤800ms，FCP≤600ms，JS 首屏传输≤150KB，图片首屏≤200KB，INP≤200ms
• 方法论：度量→定位→分层优化（传输层/资源层/渲染层/数据层）→回归与监控

基线度量与瓶颈

• 工具：Lighthouse、WebPageTest、Chrome Performance、Core Web Vitals（LCP/INP/CLS）
• 瓶颈定位：
  • 首屏路由打包过大（框架+UI+图表一次性加载）
  • Hero 图像体积大且未按需加载
  • 字体/第三方脚本阻塞渲染
  • 服务器压缩未启用 & 缓存策略缺失

优化策略总览

• 传输层：HTTP/2/3、Brotli/Gzip 压缩、CDN 与缓存控制
• 资源层：代码分包与懒加载、图片与字体优化、资源提示（preload/prefetch）
• 渲染层：关键 CSS 内联、骨架屏与占位、SSR/SSG/Streaming（按项目选型）
• 数据层：首屏数据聚合与缓存、降级策略与超时

传输层优化（示例）

• Nginx 启用压缩与缓存：

http {
  gzip on; gzip_types text/css application/javascript application/json image/svg+xml;
  gzip_min_length 1024;
  brotli on; brotli_types text/css application/javascript application/json image/svg+xml;
}
server {
  location /assets/ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }
}

• CDN：主域静态资源上 CDN，开启 HTTP/2 与协议多路复用

资源层优化（代码分包与按需）

• Bundler 分包：

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue','react'],
          ui: ['element-plus','antd'],
          chart: ['echarts','chart.js']
        }
      }
    }
  }
}

• 路由懒加载：

const route = { path: '/', component: () => import('./pages/Home.vue') }

• 组件按需：

import { defineAsyncComponent } from 'vue'
const AsyncChart = defineAsyncComponent(() => import('./Chart.vue'))

• 第三方库替换：体积重的库换轻量等价物（e.g. dayjs 替代 moment）

图片与字体优化

• 图片：现代格式（WebP/AVIF）、响应式与占位：

<img src="hero.avif" width="1200" height="800" alt="hero" loading="lazy" />

• 关键首屏图像 preload：

<link rel="preload" as="image" href="/images/hero.avif" imagesrcset="/images/hero-640.avif 640w, /images/hero-1200.avif 1200w" imagesizes="(max-width: 640px) 640px, 1200px" />

• 字体：子集化与延迟加载：

@font-face { font-family: 'InterSubset'; src: url('/fonts/inter-subset.woff2') format('woff2'); font-display: swap; }

资源提示与阻塞减少

• 关键 CSS 内联 + 非关键延迟：

<style>/* critical above-the-fold CSS */</style>
<link rel="preload" as="style" href="/assets/main.css" onload="this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/assets/main.css" /></noscript>

• 关键脚本 defer/async：

<script src="/assets/app.js" defer></script>

• 预连接与预获取：

<link rel="preconnect" href="https://cdn.example.com" />
<link rel="prefetch" href="/assets/chart.js" as="script" />

渲染层优化

• 骨架与占位：避免白屏，提升感知速度
• SSR/SSG/Streaming：按框架接入（如 Next.js App Router、Nuxt）
• 页面结构简化：减少深层 DOM 与无效重排；启用 content-visibility: auto

.hero, .section { content-visibility: auto; contain-intrinsic-size: 800px }

数据层优化

• 首屏聚合接口：减少瀑布请求；设置超时与降级：

export async function fetchWithTimeout(p: Promise<any>, ms=1500){
  return Promise.race([p, new Promise((_,rej)=>setTimeout(()=>rej(new Error('timeout')), ms))])
}

• 缓存：ETag/Last-Modified 与客户端缓存（IndexedDB/Cache Storage）

实施清单（15 项）

• 压缩：Brotli/Gzip 开启；文本资源最优压缩
• 缓存：静态资源 immutable；HTML 不缓存
• CDN：主域静态资源上 CDN；开启 HTTP/2/3
• 分包：框架/UI/图表拆分；路由/组件懒加载
• Tree-Shaking：移除未用代码；替换重库
• 图片：AVIF/WebP、响应式、loading=lazy、首屏 preload
• 字体：子集化、font-display: swap
• 资源提示：preconnect/preload/prefetch
• CSS：关键内联，非关键延迟加载
• JS：defer/async，避免阻塞；事件委托与节流
• DOM：骨架屏与占位；content-visibility
• 数据：聚合与缓存；超时与降级
• 监控：Core Web Vitals、错误与慢接口看板
• 基准：Lab（Lighthouse）与 Field（RUM）双指标
• 预算：Bundle 与图片体积预算，CI 失败门槛

结果对比（移动 4G，冷启动）

• TTFB：300ms → 280ms（CDN/边缘路由）
• FCP：2.2s → 550ms（关键 CSS 内联 + 资源提示）
• LCP：3.0s → 780ms（首屏图像优化 + 骨架 + 懒加载）
• INP：260ms → 160ms（JS 体积下降与主线程空闲）
• 传输体积：JS 450KB → 140KB；图片 1.1MB → 180MB（首屏）

验证与监控

• Lab：Lighthouse ≥95；WebPageTest 多地域
• Field：RUM 上报 LCP/INP/CLS；阈值告警（LCP>1.0s、INP>200ms）
• 回归：每次发布对比核心路由并写入报告

常见坑与修复

• 过度 preload 导致拥塞：仅关键资源使用；其余用 prefetch
• CSS 内联过多：控制在 5–10KB；其余异步加载
• 图片懒加载首屏缺图：首屏图像使用 preload+响应式；非首屏 loading=lazy
• 分包后共享依赖重复：检查 rollup chunk 与依赖版本统一

总结

• 首屏优化是多层协同的工程实践：传输/资源/渲染/数据共同作用
• 按清单实施并以指标闭环验证，可在稳定交付中保持性能达标（LCP≤800ms）