前端性能优化实战：首屏加载从 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 启用压缩与缓存：

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 分包：

ts 复制代码

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

路由懒加载：

ts 复制代码

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

组件按需：

ts 复制代码

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

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

图片与字体优化

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

html 复制代码

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

关键首屏图像 preload：

html 复制代码

<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" />

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

css 复制代码

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

资源提示与阻塞减少

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

html 复制代码

<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：

html 复制代码

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

预连接与预获取：

html 复制代码

<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

css 复制代码

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

数据层优化

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

ts 复制代码

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）