⚡

Web性能优化Skill perf-web-optimization

这个技能专注于优化网站性能，通过改进Core Web Vitals指标（如LCP、CLS、INP）、减少JavaScript包大小、优化图片和缓存策略，提升页面加载速度和用户体验。适用于前端开发、SEO优化和网站维护，关键词包括：web性能优化、前端开发、SEO、Lighthouse、bundle优化、Core Web Vitals、LCP、CLS、INP、缓存策略。

前端开发 0 次安装 0 次浏览 更新于 3/15/2026

name: perf-web-optimization description: “优化web性能：Core Web Vitals（LCP、CLS、INP）、bundle大小、图片、缓存。当网站慢时使用，优化Lighthouse分数，减少bundle大小，修复布局偏移，或改进交互时间。触发词：web性能、Core Web Vitals、LCP、CLS、INP、FID、bundle大小、页面速度、慢网站。”

Web性能优化

系统方法：测量 → 识别 → 优先处理 → 实施 → 验证。

目标指标

指标 良好 需要改进 差
LCP < 2.5秒 2.5-4秒 > 4秒
INP < 200毫秒 200-500毫秒 > 500毫秒
CLS < 0.1 0.1-0.25 > 0.25
TTFB < 800毫秒 800毫秒-1.8秒 > 1.8秒

快速见效

1. 图片（通常对LCP影响最大）

<!-- Hero/LCP图片：急切加载 + 高优先级 -->
<img src="/hero.webp" alt="Hero" width="1200" height="600"
     loading="eager" fetchpriority="high" decoding="async">

<!-- 首屏以下：延迟加载 -->
<img src="/product.webp" alt="Product" width="400" height="300"
     loading="lazy" decoding="async">

始终设置 width 和 height 以防止CLS。

2. 字体（常见的LCP/CLS元凶）

<!-- 预连接到字体源 -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 非阻塞字体加载 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
      media="print" onload="this.media='all'">

3. 第三方脚本（常见的INP杀手）

<!-- 延迟到用户交互 -->
<script>
  function loadThirdParty() {
    // 加载分析、聊天小部件等
  }
  ['scroll','click','touchstart'].forEach(e =>
    addEventListener(e, loadThirdParty, {once:true, passive:true})
  );
  setTimeout(loadThirdParty, 5000);
</script>

4. 关键CSS

在 <head> 中内联关键CSS，延迟其余部分：

<style>/* 关键样式 */</style>
<link rel="preload" href="/styles.css" as="style" onload="this.rel='stylesheet'">

Bundle分析

# Webpack
npx webpack-bundle-analyzer dist/stats.json

# Vite
npx vite-bundle-visualizer

# 安装前检查包大小
npx bundlephobia <package-name>

常见的重包替换：

  • moment (67KB) → date-fns (12KB) 或 dayjs (2KB)
  • lodash (72KB) → 选择性导入或原生方法

代码拆分模式

// React lazy
const Chart = lazy(() => import('./Chart'));

// Next.js dynamic
const Admin = dynamic(() => import('./Admin'), { ssr: false });

// Vite/Rollup手动块
build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['react', 'react-dom'] }
    }
  }
}

缓存头

# 静态资源（文件名中带有不可变哈希）
Cache-Control: public, max-age=31536000, immutable

# HTML（重新验证）
Cache-Control: no-cache

# API响应
Cache-Control: private, max-age=0, must-revalidate

测量

# 快速审计
npx lighthouse https://site.com --preset=perf --form-factor=mobile

对于运行审计、阅读报告和设置预算，请参阅 perf-lighthouse。

检查清单

图片

  • [ ] 现代格式（WebP/AVIF）
  • [ ] 响应式 srcset
  • [ ] width/height 属性
  • [ ] 首屏以下使用 loading="lazy"
  • [ ] LCP图片上使用 fetchpriority="high"

JavaScript

  • [ ] Bundle < 200KB gzipped
  • [ ] 按路由代码拆分
  • [ ] 第三方脚本延迟加载
  • [ ] 没有未使用的依赖项

CSS

  • [ ] 关键CSS内联
  • [ ] 非关键CSS延迟加载
  • [ ] 没有未使用的CSS

字体

  • [ ] font-display: swap
  • [ ] 预连接到字体源
  • [ ] 如果可能，使用子集

详细示例

对于深度优化模式，请参阅：