网页性能审计与优化提示

## 快速摘要（面向客户/利益相关者） 当前站点在移动端加载速度较慢，主要瓶颈在于未优化的图片、渲染阻塞的JavaScript以及缺失的缓存策略。通过实施快速优化（图片压缩、延迟加载、缓存头），预计可将LCP从4.2秒降至2.0秒以下，性能评分从45提升至85以上。完整优化后，所有核心Web指标将达到绿色阈值。 ## 优化路线图 | 优先级 | 问题 | 影响 | 工作量 | 修复方法 | |--------|------|------|--------|----------| | 1 | 首屏图片过大（hero.jpg 2.4MB） | 高 | 低 | 转换为WebP格式，压缩至200KB以下，添加 `fetchpriority="high"` | | 2 | 无响应式图片 | 高 | 低 | 添加 `srcset` 和 `sizes` 属性，使用 `picture` 元素 | | 3 | 渲染阻塞JavaScript（main.js 320KB） | 高 | 中 | 使用 `defer` 或 `async` 属性，代码分割 | | 4 | 未启用缓存头 | 中 | 低 | 为静态资源添加 `Cache-Control: max-age=31536000` | | 5 | 未使用CSS（约40%） | 中 | 中 | 提取关键CSS，移除未使用的样式 | | 6 | 字体加载阻塞 | 中 | 低 | 使用 `font-display: swap`，预加载关键字体 | | 7 | 未启用Brotli压缩 | 中 | 低 | 在服务器上启用Brotli（比gzip小15-20%） | | 8 | 第三方脚本（分析工具） | 低 | 低 | 延迟加载，使用 `async` 属性 | ## 预期评分提升 | 指标 | 当前 | 快速优化后 | 全面优化后 | |------|------|------------|------------| | 性能 | 45 | 75 | 95 | | LCP | 4.2s | 2.8s | 1.8s | | CLS | 0.15 | 0.08 | 0.05 | | 交互延迟 | 250ms | 150ms | 100ms | ## 实施代码片段 ### 1. 响应式图片（含优先级提示） ```html <!-- 首屏图片 --> <img src="hero.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 50vw" fetchpriority="high" alt="Hero image" > <!-- 非首屏图片（延迟加载） --> <img src="content.webp" loading="lazy" decoding="async" alt="Content image" > ``` ### 2. 延迟加载JavaScript ```html <!-- 将脚本移至body底部 --> <script src="/js/main.js" defer></script> <!-- 第三方脚本 --> <script async src="https://analytics.example.com/script.js"></script> ``` ### 3. 缓存头（Vercel/Netlify配置） ```json // vercel.json { "headers": [ { "source": "/static/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] }, { "source": "/images/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=86400" } ] } ] } ``` ### 4. 字体优化 ```css @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; /* 在字体加载时显示回退字体 */ font-weight: 400; unicode-range: U+0000-00FF; /* 仅加载拉丁字符 */ } ``` ### 5. 关键CSS提取 ```html <!-- 在head中内联关键CSS --> <style> /* 首屏所需的关键样式 */ .header { position: fixed; } .hero { min-height: 100vh; } </style> <!-- 异步加载完整CSS --> <link rel="preload" href="/css/full.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="/css/full.css"></noscript> ``` ### 6. 启用Brotli压缩（服务器配置） ```nginx # nginx配置 brotli on; brotli_comp_level 6; brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml; ``` ### 7. 图片压缩命令 ```bash # 将PNG转换为WebP cwebp -q 80 input.png -o output.webp # 批量压缩 find . -name "*.png" -exec cwebp -q 80 {} -o {}.webp \; ```