页面性能直接决定用户体验、SEO 排名与转化率。本讲从核心指标（LCP/CLS/INP）到优化手段（资源、图片、渲染、网络），给出可执行的前端性能优化清单，让网站"快"成为竞争力。
研究显示页面加载每慢 1 秒，转化率显著下滑。客户没有耐心等你的网站转圈。
搜索引擎把速度作为重要排名因素，慢站即便内容好也难进首页。
一会儿说图片、一会儿说服务器，没有系统方法，优化只能靠猜、靠试。
代码分割按需加载、Tree Shaking 去冗余、preload/prefetch 关键资源、CDN 与 HTTP/2+。
WebP/AVIF 格式、响应式尺寸、懒加载与占位、sprite 与图标字体。
减少重排重绘、避免长任务、动画走 GPU 合成、骨架屏与虚拟列表。
压缩与 Brotli、缓存策略、DNS 预解析、合并请求、边缘计算就近响应。
SSR/预渲染降低首屏、流式渲染、关键 CSS 内联，减少阻塞渲染。
真实用户监控（RUM）、性能预算与持续集成拦截，性能回归可发现。
投入产出最清晰的优化动作，从高收益低难度开始做。
| 优化动作 | 主要收益指标 | 难度 | 投入产出 |
|---|---|---|---|
| 图片压缩 + 懒加载 | LCP / TBT | 低 | 极高 |
| 开启压缩 + 强缓存 | TTFB / 加载体积 | 低 | 极高 |
| 代码分割 + 按需加载 | 首屏 JS / LCP | 中 | 高 |
| CDN 加速静态资源 | 资源下载 / LCP | 低 | 高 |
| 预渲染 / SSR | LCP / SEO | 中高 | 视站点而定 |
| 性能预算 + CI 门禁 | 长期防回归 | 中 | 长期收益最高 |
首屏外图片懒加载，不同屏幕加载不同分辨率，禁止 2MB 大图裸上。
开启 Gzip/Brotli，静态资源配置强缓存 + 指纹版本号。
路由级代码分割，第三方库走 CDN 或按需引入。
预留图片尺寸避免布局偏移，让 CLS 趋近于 0。
性能分设硬性预算（如移动端 ≥ 90），每次上线前跑分。
页面快 1 秒，下单转化与客单都显著提升，性能就是真金白银。
核心指标达标是进入搜索结果前排的硬条件，直接影响自然流量。
给潜在客户的第一印象，快与稳本身就是品牌专业度的体现。
弱网环境下移动端更考验性能，优化直接提升触达与留存。
