# 网页性能优化 ## 概述帮助开发者优化网站和Web应用程序性能，以提高用户体验、SEO排名和转化率。该技能提供了测量、分析和提高加载速度、运行时性能和核心 Web Vitals 指标的系统方法。 ## 何时使用此技能 * 当网站或应用程序加载缓慢时使用 * 在优化 Core Web Vitals（LCP、FID、CLS）时使用 * 减少 JavaScript 包大小时使用 * 在改善交互时间 (TTI) 时使用 * 在优化图像和资产时使用 * 实现缓存策略时使用 * 调试性能瓶颈时使用 * 在准备绩效审计时使用 ## 它是如何工作的 ### 第 1 步：衡量当前绩效我将帮助您建立基线指标： * 运行灯塔审核 * 衡量核心网络生命力（LCP、FID、CLS） * 检查捆绑包大小 * 分析网络瀑布 * 识别性能瓶颈 ### 第 2 步：识别问题分析性能问题： * 大型 JavaScript 包 * 未优化的图像 * 渲染阻塞资源 * 服务器响应速度慢 * 缺少缓存标头 * 布局变化 * 长任务阻塞主线程 ### 第 3 步：确定优化的优先级专注于高影响力的改进： * 关键渲染路径优化 * 代码分割和延迟加载 * 图片优化 * 缓存策略 * 第三方脚本优化 ### 步骤 4：实施优化应用性能改进： * 优化资源（图像、字体、CSS、JS） * 实现代码分割 * 添加缓存头 * 延迟加载非关键资源 * 优化关键渲染路径 ### 第 5 步：验证改进衡量变更的影响： * 重新运行 Lighthouse 审核 * 比较之前/之后的指标 * 监控真实用户指标（RUM） * 在不同设备和网络上进行测试 ## 示例 ### 示例 1：优化核心 Web Vitals ## 绩效审核结果 ### 当前指标（优化前） - **LCP（最大内容油漆）：** 4.2s ❌（应< 2.5s） - **FID（首次输入延迟）：** 180ms ❌（应< 100ms） - **CLS（累积布局偏移）：** 0.25 ❌（应 < 0.1） - **灯塔得分：** 62/100 ### 已发现的问题 1. **LCP 问题：** 英雄图片 (2.5MB) 加载缓慢 2. **FID 问题：** 大型 JavaScript 包 (850KB) 阻塞主线程 3. **CLS问题：** 没有尺寸的图像导致布局变化 ### 优化计划 #### 修复 LCP（最大内容油漆） **问题：** 英雄图片为 2.5MB，加载缓慢 **解决方案：** ``````html

<图片> <图片 src="/英雄.jpg" alt=“英雄” 宽度=“1200” 高度=“600” 加载=“渴望” 获取优先级=“高” > `````` **其他优化：** - 将图像压缩至 < 200KB - 使用 CDN 加快交付速度 - 预加载英雄图像：`` #### 修复 FID（首次输入延迟） **问题：** 850KB JavaScript 包阻塞主线程 **解决方案：** 1. **代码分割：** ``````javascript // 之前：一切都集中在一个包中从 './HeavyComponent' 导入 { HeavyComponent } ；从 './analytics' 导入 { Analytics }；从 './chat' 导入 { ChatWidget }； // 之后：延迟加载非关键代码 const HeavyComponent = lazy(() => import('./HeavyComponent')); const ChatWidget = lazy(() => import('./chat')); // 页面交互后加载分析 if (窗口类型!== '未定义') { window.addEventListener('加载', () => { import('./analytics').then(({ Analytics }) => { 分析.init(); }); }); } `````` 2. **删除未使用的依赖项：** ``````bash # 分析包 npx webpack-bundle-analyzer # 删除未使用的包 npm uninstall moment # 使用 date-fns 代替（较小） npm 安装日期-fns `````` 3. **推迟非关键脚本：** ``````html `````` #### 修复 CLS（累积布局偏移） **问题：** 没有尺寸的图像会导致布局变化 **解决方案：** ``````html

<图片 src="/产品.jpg" alt="产品" 宽度=“400” 高度=“300” 样式=“纵横比：4/3；” > `````` **对于动态内容：** ``````css /* 为稍后加载的内容保留空间 */ .骨架装载机{ 最小高度：200px；背景：线性渐变（90deg，#f0f0f0 25%，#e0e0e0 50%，#f0f0f0 75%）；背景大小：200% 100%；动画：加载1.5s无限； } @关键帧加载{ 0% { 背景位置：200% 0; } 100% { 背景位置：-200% 0; } } `````` ### 优化后的结果 - **LCP：** 1.8s ✅ （提高 57%） - **FID：** 45ms ✅（提高了 75%） - **CLS：** 0.05 ✅（提高 80%） - **灯塔得分：** 94/100 ✅ ### 示例 2：减少 JavaScript 包大小 ## 捆绑包大小优化 ### 当前状态 - **总包：** 850KB（gzip 压缩：280KB） - **主包：** 650KB - **供应商捆绑包：** 200KB - **加载时间（3G）：** 8.2 秒 ### 分析 ``````bash # 分析bundle的组成 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 卸载时刻 npm 安装日期-fns # 之前从“时刻”导入时刻； const formatted = moment(date).format('YYYY-MM-DD'); # 之后从“date-fns”导入{格式}； const formatted = format(日期, 'yyyy-MM-dd'); `````` **节省：** 55KB #### 2. 有选择地使用 Lodash ``````javascript // 之前：导入整个库 (72KB) 从'lodash'导入_； const unique = _.uniq(array); // 之后：仅导入您需要的内容 (5KB) 从 'lodash/uniq' 导入 uniq； const unique = uniq(数组); // 或者使用本地方法 const unique = [...new Set(array)]; `````` **节省：** 67KB #### 3. 实现代码分割 ``````javascript // Next.js 示例从“下一个/动态”导入动态； // 延迟加载重组件 const Chart = 动态(() => import('./Chart'), { 加载：() =>

加载图表...

, ssr: 假 }); const AdminPanel = 动态(() => import('./AdminPanel'), { 加载中：() =>

加载中...

}); // 基于路由的代码分割（在 Next.js 中自动） // pages/admin.js - 仅在访问 /admin 时加载 // pages/dashboard.js - 仅在访问 /dashboard 时加载 `````` #### 4. 删除死代码 ``````javascript // 在 webpack.config.js 中启用树摇动模块. 导出 = { 模式：“生产”，优化：{ 使用出口：真实，副作用：假 } }; // 在 package.json 中 { “副作用”：假 } `````` #### 5.优化第三方脚本 ``````html <脚本> window.addEventListener('加载', () => { const script = document.createElement('script'); script.src = 'https://analytics.com/script.js'; script.async = true; document.body.appendChild(脚本); }); `````` ### 结果 - **总包：** 380KB ✅（减少 55%） - **主包：** 180KB ✅ - **供应商捆绑包：** 80KB ✅ - **加载时间（3G）：** 3.1s ✅（提高了 62%） ### 示例3：图像优化策略 ## 图像优化 ### 当前问题 - 15 张图片，总计 12MB - 没有现代格式（WebP、AVIF） - 没有响应图像 - 没有延迟加载 ### 优化策略 #### 1. 转换为现代格式 ``````bash # 安装图像优化工具 npm 安装锐利 # 转换脚本 (optimize-images.js) const 锐利 = require('锐利'); const fs = require('fs'); const 路径 = require('路径'); 异步函数optimizeImage（inputPath，outputDir）{ const 文件名 = path.basename(inputPath, path.extname(inputPath)); // 生成WebP 等待尖锐（输入路径） .webp({ 质量: 80 }) .toFile(path.join(outputDir, \`\${文件名}.webp\`)); // 生成 AVIF（最佳压缩）等待尖锐（输入路径） .avif({ 质量: 70 }) .toFile(path.join(outputDir, \`\${文件名}.avif\`)); // 生成优化的 JPEG 后备等待尖锐（输入路径） .jpeg({ 质量: 80, 渐进: true }) .toFile(path.join(outputDir, \`\${文件名}.jpg\`)); } // 处理所有图像 const images = fs.readdirSync('./images'); 图片.forEach(img => { OptimizeImage(\`./images/\${img}\`, './images/optimized'); }); `````` #### 2. 实施响应式图像 ``````html <图片> <来源源集=“ /images/hero-400.avif 400w， /images/hero-800.avif 800w， /images/hero-1200.avif 1200w ” 类型=“图像/avif” 尺寸=“（最大宽度：768px）100vw，50vw” > <来源源集=“ /images/hero-400.webp 400w， /images/hero-800.webp 800w, /images/hero-1200.webp 1200w ” 类型=“图像/webp” 尺寸=“（最大宽度：768px）100vw，50vw” > <图片 src="/images/hero-800.jpg" 源集=“ /images/hero-400.jpg 400w， /images/hero-800.jpg 800w， /images/hero-1200.jpg 1200w ” 尺寸=“（最大宽度：768px）100vw，50vw” alt="英雄形象" 宽度=“1200” 高度=“600” 加载=“懒惰” > `````` #### 3.延迟加载 ``````html <图片 src="/image.jpg" alt=“描述” 加载=“懒惰” 宽度=“800” 高度=“600” > <图片 src="/英雄.jpg" alt=“英雄” 加载=“渴望” 获取优先级=“高” > `````` #### 4. Next.js 图像组件 ``````javascript 从“下一个/图像”导入图像； // 自动优化 <图片 src="/英雄.jpg" alt=“英雄” 宽度={1200} 高度={600} 优先级 // 对于首屏图像质量={80} /> // 延迟加载 <图片 src="/产品.jpg" alt="产品" 宽度={400} 高度={300} 加载=“懒惰” /> `````` ### 结果 |公制|之前 |之后|改进| |--------|--------|--------|-------------| |图像总尺寸| 12MB | 1.8MB |减少 85% | |液晶聚合物| 4.5秒| 1.6秒|速度提高 64% | |页面加载（3G）| 18 岁 | 4.2秒|速度提高 77% | ## 最佳实践 ### ✅ 这样做 * **首先测量** \- 在优化之前始终建立基线指标 * **使用 Lighthouse** \- 定期运行审核以跟踪进度 * **优化图像** \- 使用现代格式（WebP、AVIF）和响应式图像 * **代码分割** \- 将大包分成更小的块 * **延迟加载** \- 推迟非关键资源 * **积极缓存** \- 为静态资源设置正确的缓存标头 * **最小化主线程工作** \- 将 JavaScript 执行时间保持在 50 毫秒以下 * **预加载关键资源** \- 对关键资源使用 `` * **使用 CDN** \- 从 CDN 提供静态资产以加快交付速度 * **监控真实用户** \- 跟踪真实用户的核心网络生命 ### ❌不要这样做 * **不要盲目优化** \- 先衡量，再优化 * **不要忽略移动设备** \- 在真实的移动设备和慢速网络上进行测试 * **不要阻止渲染** \- 避免渲染阻塞 CSS 和 JavaScript * **不要预先加载所有内容** \- 延迟加载非关键资源 * **不要忘记尺寸** \- 始终指定图像宽度/高度 * **不要使用同步脚本** \- 使用异步或延迟属性 * **不要忽略第三方脚本** \- 它们通常会导致性能问题 * **不要跳过压缩** \- 始终压缩和缩小资源 ## 常见陷阱 ### 问题：针对桌面进行了优化，但在移动设备上速度缓慢 **症状：** Lighthouse 在桌面上得分良好，在移动设备上得分较差 **解决方案：** * 在真实移动设备上测试 * 使用 Chrome DevTools 移动节流 * 针对3G/4G网络优化 * 减少JavaScript执行时间 # 进行节流测试灯塔 https://yoursite.com --throttle.cpuSlowdownMultiplier=4 ### 问题：大型 JavaScript 包 **症状：** 交互时间 (TTI) 较长，FID 高 **解决方案：** * 使用 webpack-bundle-analyzer 分析包 * 删除未使用的依赖项 * 实现代码分割 * 延迟加载非关键代码 # 分析包 npx webpack-bundle-analyzer dist/stats.json ### 问题：图像导致布局变化 **症状：** CLS 分数高，内容跳跃 **解决方案：** * 始终指定宽度和高度 * 使用纵横比 CSS 属性 * 为骨架装载机预留空间图像{ 纵横比：16 / 9；宽度：100%；高度：自动； } ### 问题：服务器响应时间慢 **症状：** 高 TTFB（第一个字节的时间） **解决方案：** * 实现服务器端缓存 * 静态资源使用CDN * 优化数据库查询 * 考虑静态站点生成（SSG） // Next.js：静态生成导出异步函数 getStaticProps() { const data = 等待 fetchData(); 返回{ 道具：{数据}， revalidate: 60 // 每 60 秒重新生成一次 }; } ## 绩效检查表 ### 图片 * 转换为现代格式（WebP、AVIF） * 实施响应式图像 * 添加延迟加载 * 指定尺寸（宽度/高度） * 压缩图像（每个 < 200KB） * 使用CDN进行分发 ### JavaScript * 捆绑包大小 < 200KB（gzip 压缩） * 实现代码分割 * 延迟加载非关键代码 * 删除未使用的依赖项 * 缩小和压缩 * 对脚本使用 async/defer ### CSS * 内联关键 CSS * 推迟非关键 CSS * 删除未使用的 CSS * 缩小 CSS 文件 * 使用 CSS 包含 ### 缓存 * 设置静态资源的缓存头 * 实施服务工作者 * 使用CDN缓存 * 缓存API响应 * 版本静态资源 ### 核心网络生命力 * LCP<2.5s * FID < 100 毫秒 * CLS < 0.1 * TTFB < 600ms * TTI < 3.8 秒 ## 性能工具 ### 测量工具 * **灯塔** \- 综合绩效审计 * **WebPageTest** \- 详细的瀑布分析 * **Chrome DevTools** \- 性能分析 * **PageSpeed Insights** \- 真实用户指标 * **Web Vitals 扩展** \- 监控核心 Web Vitals ### 分析工具 * **webpack-bundle-analyzer** \- 可视化包组成 * **source-map-explorer** \- 分析包大小 * **捆绑恐惧症** \- 安装前检查包大小 * **ImageOptim** \- 图像压缩工具 ### 监控工具 * **Google Analytics** \- 跟踪核心网络生命 * **Sentry** \- 性能监控 * **New Relic** \- 应用程序性能监控 * **Datadog** \- 真实用户监控 ## 相关技能 * `@react-best-practices` \- React 性能模式 * `@frontend-dev-guidelines` \- 前端开发标准 * `@systematic-debugging` \- 调试性能问题 * `@senior-architect` \- 性能架构 ## 其他资源 * [Web.dev 性能]() * [核心网络生命力]() * [Lighthouse 文档]() * [MDN 性能指南]() * [Next.js 性能]() * [图像优化指南]() ** ** **专业提示：** 首先关注核心网络生命（LCP、FID、CLS） - 它们对用户体验和 SEO 排名影响最大！

网页性能优化

包含技能