前端性能优化的几条朴素原则

性能优化常被讲得很玄，但 80% 的收益其实来自几条朴素原则。

1. 能不发的 JS 就别发

每一 KB 的 JavaScript 都要下载、解析、执行。优先考虑：

• 静态内容用 SSG 直接渲染成 HTML；
• 交互组件按需「激活」（孤岛架构）；
• 第三方脚本延迟或懒加载。

2. 图片要规矩

图片往往是页面里最重的资源：

1. 用现代格式（WebP / AVIF）；
2. 加 loading="lazy"；
3. 指定宽高，避免布局抖动（CLS）。

<img src="cover.webp" alt="封面" loading="lazy" width="1280" height="720" />

3. 关注核心指标

指标	含义	目标
LCP	最大内容绘制	< 2.5s
CLS	累积布局偏移	< 0.1
INP	交互响应	< 200ms

4. 缓存与 CDN

静态资源加上长缓存 + 内容指纹（hash 文件名），再丢到 CDN，回访几乎瞬开。

性能是一种功能，而不是事后补救的优化项。

把这几条做扎实，比任何「黑魔法」都有效。