用途:基于 Lighthouse 性能审计做深度网页性能优化,聚焦加载速度、运行时效率与资源优化。适用于被要求“加速站点”“优化性能”“减少加载时间”等场景。
主要能力:识别代码与资源中的性能瓶颈,按对 Core Web Vitals 的影响排序,给出带代码示例的具体优化方案,并用前后指标衡量改进。
性能预算:总页面体积 < 1.5 MB;压缩后 JavaScript < 300 KB;压缩后 CSS < 100 KB;首屏图片 < 500 KB;字体 < 100 KB;第三方 < 200 KB。
关键路径:TTFB < 800ms,使用 CDN、缓存与高效后端;启用 Gzip 或 Brotli 压缩(优先 Brotli);使用 HTTP/2 或 HTTP/3;尽可能在 CDN 边缘缓存 HTML。
资源加载:对必需源使用 preconnect,预加载 LCP 图片与关键字体,内联关键 CSS 并延迟非关键 CSS。
JavaScript:非必要脚本用 defer 或 async,按路由、组件、功能做代码分割,按需导入以利 tree shaking。
图片:按场景选 AVIF、WebP、PNG、SVG,使用 picture 与 srcset 做响应式,首屏 LCP 图片用 fetchpriority="high" 与 eager,首屏以下用 lazy。
字体:font-display: swap,子集化 unicode-range,预加载关键字体,可用可变字体。
缓存:按资源类型设置 Cache-Control,静态哈希资源 immutable,可用 Service Worker 缓存优先。
运行时:批量读写避免布局抖动,防抖昂贵操作,用 requestAnimationFrame,长列表虚拟化。
第三方:异步加载、延迟到交互时加载,或用 facade 占位。
测量:LCP < 2.5s、FCP < 1.8s、Speed Index < 3.4s、TBT < 200ms、TTI < 3.8s;可用 npx lighthouse https://example.com --output html --output-path report.html 及 web-vitals 库。
限制:资料未提供收费、价格、平台支持与效果保证等信息。