Web Performance Optimization 实用指南

帮助开发者优化网站和 Web 应用的性能，以改善用户体验、SEO 排名和转化率。本技能提供系统化的方法来测量、分析和改进加载速度、运行时性能以及 Core Web Vitals 指标。

第 3 步：对优化进行优先级排序

## 性能审计结果

### 当前指标（优化前）
- **LCP（最大内容绘制）：** 4.2s ❌（应小于 2.5s）
- **FID（首次输入延迟）：** 180ms ❌（应小于 100ms）
- **CLS（累积布局偏移）：** 0.25 ❌（应小于 0.1）
- **Lighthouse 评分：** 62/100

### 识别出的问题

1. **LCP 问题：** 主图（2.5MB）加载缓慢
2. **FID 问题：** 大型 JavaScript 包（850KB）阻塞主线程
3. **CLS 问题：** 无尺寸的图片导致布局偏移

### 优化方案

#### 修复 LCP（最大内容绘制）

**问题：** 主图为 2.5MB 且加载缓慢

**解决方案：**
\`\`\`html

<img src="/hero.jpg" alt="Hero">


<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img 
    src="/hero.jpg" 
    alt="Hero"
    width="1200" 
    height="600"
    loading="eager"
    fetchpriority="high"
  >
</picture>
\`\`\`

**其他优化：**
- 将图片压缩到 200KB 以下
- 使用 CDN 加速交付
- 预加载主图：`<link rel="preload" as="image" href="/hero.avif">`

#### 修复 FID（首次输入延迟）

**问题：** 850KB 的 JavaScript 包阻塞主线程

**解决方案：**

1. **代码分割：**
\`\`\`javascript
// 之前：所有内容在一个包中
import { HeavyComponent } from './HeavyComponent';
import { Analytics } from './analytics';
import { ChatWidget } from './chat';

// 之后：懒加载非关键代码
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const ChatWidget = lazy(() => import('./chat'));

// 在页面可交互后加载分析脚本
if (typeof window !== 'undefined') {
  window.addEventListener('load', () => {
    import('./analytics').then(({ Analytics }) => {
      Analytics.init();
    });
  });
}
\`\`\`

2. **移除未使用的依赖：**
\`\`\`bash
# 分析打包
npx webpack-bundle-analyzer

# 移除未使用的包
npm uninstall moment  # 改用 date-fns（更小）
npm install date-fns
\`\`\`

3. **延迟非关键脚本：**
\`\`\`html

<script src="/analytics.js"></script>


<script src="/analytics.js" defer></script>
\`\`\`

#### 修复 CLS（累积布局偏移）

**问题：** 无尺寸的图片导致布局偏移

**解决方案：**
\`\`\`html

<img src="/product.jpg" alt="Product">


<img 
  src="/product.jpg" 
  alt="Product"
  width="400" 
  height="300"
  style="aspect-ratio: 4/3;"
>
\`\`\`

**对于动态内容：**
\`\`\`css
/* 为稍后加载的内容预留空间 */
.skeleton-loader {
  min-height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
\`\`\`

### 优化后的结果

- **LCP：** 1.8s ✅（提升 57%）
- **FID：** 45ms ✅（提升 75%）
- **CLS：** 0.05 ✅（提升 80%）
- **Lighthouse 评分：** 94/100 ✅

示例 2：减小 JavaScript 打包体积

## 打包体积优化

### 当前状态
- **总打包：** 850KB（gzip 后：280KB）
- **主打包：** 650KB
- **第三方打包：** 200KB
- **加载时间（3G）：** 8.2s

### 分析

\`\`\`bash
# 分析打包构成
npx webpack-bundle-analyzer dist/stats.json
\`\`\`

**发现：**
1. Moment.js：67KB（可替换为 date-fns：12KB）
2. Lodash：72KB（使用整个库，实际只需要 5 个函数）
3. 未使用的代码：约 150KB 死代码
4. 没有代码分割：所有内容在一个包中

### 优化步骤

#### 1. 替换重量级依赖

\`\`\`bash
# 移除 moment.js（67KB）→ 使用 date-fns（12KB）
npm uninstall moment
npm install date-fns

# 之前
import moment from 'moment';
const formatted = moment(date).format('YYYY-MM-DD');

# 之后
import { format } from 'date-fns';
const formatted = format(date, 'yyyy-MM-dd');
\`\`\`

**节省：** 55KB

#### 2. 选择性使用 Lodash

\`\`\`javascript
// 之前：导入整个库（72KB）
import _ from 'lodash';
const unique = _.uniq(array);

// 之后：只导入所需部分（5KB）
import uniq from 'lodash/uniq';
const unique = uniq(array);

// 或使用原生方法
const unique = [...new Set(array)];
\`\`\`

**节省：** 67KB

#### 3. 实施代码分割

\`\`\`javascript
// Next.js 示例
import dynamic from 'next/dynamic';

// 懒加载重量级组件
const Chart = dynamic(() => import('./Chart'), {
  loading: () => <div>Loading chart...</div>,
  ssr: false
});

const AdminPanel = dynamic(() => import('./AdminPanel'), {
  loading: () => <div>Loading...</div>
});

// 基于路由的代码分割（Next.js 中自动完成）
// pages/admin.js - 仅在访问 /admin 时加载
// pages/dashboard.js - 仅在访问 /dashboard 时加载
\`\`\`

#### 4. 移除死代码

\`\`\`javascript
// 在 webpack.config.js 中启用 tree shaking
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false
  }
};

// 在 package.json 中
{
  "sideEffects": false
}
\`\`\`

#### 5. 优化第三方脚本

\`\`\`html

<script src="https://analytics.com/script.js"></script>


<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'https://analytics.com/script.js';
    script.async = true;
    document.body.appendChild(script);
  });
</script>
\`\`\`

### 结果

- **总打包：** 380KB ✅（减小 55%）
- **主打包：** 180KB ✅
- **第三方打包：** 80KB ✅
- **加载时间（3G）：** 3.1s ✅（提升 62%）

## 图片优化

### 当前问题
- 15 张图片共 12MB
- 没有现代格式（WebP、AVIF）
- 没有响应式图片
- 没有懒加载

### 优化策略

#### 1. 转换为现代格式

\`\`\`bash
# 安装图片优化工具
npm install sharp

# 转换脚本（optimize-images.js）
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

async function optimizeImage(inputPath, outputDir) {
  const filename = path.basename(inputPath, path.extname(inputPath));
  
  // 生成 WebP
  await sharp(inputPath)
    .webp({ quality: 80 })
    .toFile(path.join(outputDir, \`\${filename}.webp\`));
  
  // 生成 AVIF（最佳压缩率）
  await sharp(inputPath)
    .avif({ quality: 70 })
    .toFile(path.join(outputDir, \`\${filename}.avif\`));
  
  // 生成优化的 JPEG 后备
  await sharp(inputPath)
    .jpeg({ quality: 80, progressive: true })
    .toFile(path.join(outputDir, \`\${filename}.jpg\`));
}

// 处理所有图片
const images = fs.readdirSync('./images');
images.forEach(img => {
  optimizeImage(\`./images/\${img}\`, './images/optimized');
});
\`\`\`

#### 2. 实施响应式图片

\`\`\`html

<picture>
  
  <source 
    srcset="
      /images/hero-400.avif 400w,
      /images/hero-800.avif 800w,
      /images/hero-1200.avif 1200w
    "
    type="image/avif"
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  
  
  <source 
    srcset="
      /images/hero-400.webp 400w,
      /images/hero-800.webp 800w,
      /images/hero-1200.webp 1200w
    "
    type="image/webp"
    sizes="(max-width: 768px) 100vw, 50vw"
  >
  
  
  <img 
    src="/images/hero-800.jpg"
    srcset="
      /images/hero-400.jpg 400w,
      /images/hero-800.jpg 800w,
      /images/hero-1200.jpg 1200w
    "
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Hero image"
    width="1200"
    height="600"
    loading="lazy"
  >
</picture>
\`\`\`

#### 3. 懒加载

\`\`\`html

<img 
  src="/image.jpg" 
  alt="Description"
  loading="lazy"
  width="800"
  height="600"
>


<img 
  src="/hero.jpg" 
  alt="Hero"
  loading="eager"
  fetchpriority="high"
>
\`\`\`

#### 4. Next.js Image 组件

\`\`\`javascript
import Image from 'next/image';

// 自动优化
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // 用于首屏图片
  quality={80}
/>

// 懒加载
<Image
  src="/product.jpg"
  alt="Product"
  width={400}
  height={300}
  loading="lazy"
/>
\`\`\`

### 结果

| 指标 | 之前 | 之后 | 改进 |
|--------|--------|-------|-------------|
| 总图片大小 | 12MB | 1.8MB | 减小 85% |
| LCP | 4.5s | 1.6s | 快 64% |
| 页面加载（3G） | 18s | 4.2s | 快 77% |

问题：针对桌面端优化了，但在移动端很慢

症状： 桌面端 Lighthouse 评分高，移动端差

# 使用节流测试
lighthouse https://yoursite.com --throttling.cpuSlowdownMultiplier=4

症状： 可交互时间（TTI）长，FID 高

# 分析打包
npx webpack-bundle-analyzer dist/stats.json

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

// Next.js：静态生成
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60 // 每 60 秒重新生成
  };
}

专业提示： 首先聚焦 Core Web Vitals（LCP、FID、CLS）——它们对用户体验和 SEO 排名的影响最大！

来源说明：本文内容整理自开源项目 agentic-awesome-skills（中文翻译版），遵循 CC BY 4.0（知识共享署名 4.0 国际）许可协议，此处作为中文资料整理分享，版权归原作者所有。

Optimize website and web application performance including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance

前端

开发工具

运维

一份聚焦于Core Web Vitals优化与JavaScript打包减负的实用指南。通过Lighthouse审计、代码分割、图片格式转换等具体策略，系统化提升LCP、FID与CLS评分，附带优化前后数据对比及可直接执行的代码示例，帮助开发者快速改善网站加载速度与SEO排名。

4核4G3M云服务器 新用户低至38元/年！

lighthouse

CDN免费试用


2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

Web Performance Optimization 实用指南

Web Performance Optimization 实用指南

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐