让 AI 诊断并优化网站加载速度与性能指标 #

解决网站加载慢、SEO 排名低的问题：通过系统性诊断 Core Web Vitals 指标（LCP、FID、CLS），提供从图片压缩、代码分割到缓存策略的全流程优化方案。

为什么需要这个技能 #

现代用户对网页加载速度极其敏感，加载时间过长会导致用户直接流失，并严重影响 Google 的 SEO 排名。 如果网站出现核心指标（LCP, FID, CLS）不达标，或者由于巨大的 JavaScript 包导致主线程阻塞，用户体验将大打折扣。 AI 辅助的性能优化能够自动识别瓶颈，如未优化的图片、渲染阻塞资源或死代码，并提供具体的代码级修复建议。

适用场景 #

• SEO 优化前：网站 SEO 排名不佳，需要快速提升 Core Web Vitals 得分。
• 移动端体验差：3G/4G 网络下加载缓慢，用户反馈卡顿或布局抖动。
• 首屏加载慢：关键内容（LCP）加载超过 2.5 秒，需要优化首屏渲染路径。
• 交互响应迟滞：用户点击后长时间无反馈（FID 高），或页面布局突然跳动（CLS 高）。
• 包体积过大：构建产物体积巨大，导致打包时间长且下载慢。

核心工作流 #

1. 测量现状：利用 Lighthouse 或 Chrome DevTools 收集基础指标，对比当前数据与标准差距。
2. 定位瓶颈：分析具体原因，包括大图未压缩、未使用现代格式（WebP/AVIF）、JS 包过大或渲染阻塞资源。
3. 制定计划：确定优先级，如先解决首屏图片加载（LCP），再处理主线程阻塞（FID）。
4. 实施优化：
   • 图片优化：转换格式并添加宽高属性，防止布局偏移。
   • 代码分割：对重型组件使用动态导入（Lazy Loading）。
   • 资源加载策略：将非关键脚本设置为 defer 或 async，并设置缓存头部。
5. 验证结果：重新运行测试，确保 Lighthouse 分数提升且无明显副作用。

典型优化示例 #

修复首屏加载慢（LCP） #

针对巨大的首屏图片或视频进行优化：

## Performance Audit Results - LCP Fix

### Current Metric
- **LCP:** 4.2s ❌

### Optimization Plan

#### Fix LCP (Largest Contentful Paint)

**Problem:** Hero image is 2.5MB and loads slowly

**Solutions:**
\`\`\`html
<!-- Before: Unoptimized image -->
<img src="/hero.jpg" alt="Hero">

<!-- After: Optimized with modern formats -->
<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>
\`\`\`

**Additional optimizations:**
- Compress image to < 200KB
- Use CDN for faster delivery
- Preload hero image: `<link rel="preload" as="image" href="/hero.avif">`

### Results After Optimization
- **LCP:** 1.8s ✅ (improved by 57%)

减少 JavaScript 包体积 #

分析并移除未使用的依赖，实现按需加载：

# Analyze bundle composition
npx webpack-bundle-analyzer dist/stats.json

Optimization Steps:

1. Replace Heavy Dependencies #

```bash

Remove moment.js (67KB) → Use date-fns (12KB) #

npm uninstall moment npm install date-fns ```

2. Implement Code Splitting #

```javascript // Next.js example import dynamic from ‘next/dynamic’;

// Lazy load heavy components const Chart = dynamic(() => import(‘./Chart’), { loading: () =>

Results #

• Total Bundle: 380KB ✅ (reduced by 55%)
• Load Time (3G): 3.1s ✅ (improved by 62%)

优化检查清单 #

在使用此技能优化时，请确保遵循以下清单：

图片 #

• [ ] 转换为现代格式（WebP, AVIF）
• [ ] 实现响应式图片（sizes 属性）
• [ ] 添加 width 和 height 属性防止布局抖动
• [ ] 首屏图片使用 loading="eager" 和 fetchpriority="high"

JavaScript #

• [ ] 构建体积 < 200KB (gzipped)
• [ ] 实施代码分割
• [ ] 移除未使用的依赖
• [ ] 使用 async 或 defer 加载非关键脚本

缓存 #

• [ ] 为静态资源设置缓存头部
• [ ] 使用 Service Worker
• [ ] 开启 CDN 缓存

核心指标目标 #

• [ ] LCP < 2.5s
• [ ] FID < 100ms
• [ ] CLS < 0.1

下载和安装 #

下载 web-performance-optimization 中文版 Skill ZIP

你可能还需要 #

暂无推荐