聊个事儿。上周半夜三点，我盯着屏幕上5秒的FCP（首次内容绘制）直挠头，寻思着这破玩意儿怎么又慢了。说真的，现代Web开发，性能优化这事儿就跟家里大扫除似的，你以为收拾干净了，角落里总能摸出点灰。今天不扯那些“最佳实践”的教科书，就唠唠我踩过的坑和真有用的招。

先说说图片，这绝对是头号杀手。我之前有个项目，设计师搞了一堆高清大图，首页瀑布流美滋滋，结果你猜怎么着？3G网络下打开跟PPT似的。后来我学乖了，现在一律上 响应式图片+现代格式。别再用 <img src="xxx.jpg"> 了，试试这个：

<picture>
 <source srcset="hero-image.avif" type="image/avif">
 <source srcset="hero-image.webp" type="image/webp">
 <img src="hero-image.jpg" alt="示例" loading="lazy">
</picture>

懒加载那个属性别忘了，特别是长页面。这事儿挺神奇的，就加个 loading="lazy"，首屏渲染立马轻快不少。不过注意，别给首屏可见的图加，不然可能适得其反。

第二个深坑是JavaScript打包。之前用某个流行框架，默认配置打出来的包恨不得把整个node_modules都塞进去，主包体积直奔1MB去了。后来我上了代码分割，路由级别的动态导入，效果立竿见影。

// 别这么干
import HeavyComponent from './HeavyComponent';
// 试试这个

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

然后就是构建工具了。你打包完分析过产物吗？用 webpack-bundle-analyzer 瞅一眼，保准能发现惊喜（吓）。我上次就发现某个UI库我只用了两个按钮，结果把整个库都引进来了，气得我直接换了个轻量的。按需引入，说三遍。

字体优化也是个暗箭。自定义字体好看吧？但FOUT（无样式文本闪烁）和FOIT（不可见文本闪烁）体验贼差。我现在都这么干：用 font-display: swap; 让文字先出来，再用本地字体后备。最关键的是，子集化！如果你就用到几百个字符，干嘛加载整个几兆的字体文件？工具很多，自己搜一下。

缓存策略也得说道说道。你设置对了Cache-Control头吗？别什么都让浏览器重新验证。静态资源像JS、CSS、图片，可以设个长的max-age，再配合文件哈希指纹，更新也没问题。这事儿配置起来不麻烦，但收益持久。

# Nginx配置示例，意思一下
location ~* \.(css|js|avif|webp)$ {
 expires 1y;
 add_header Cache-Control "public, immutable";
}

最后唠叨一句，度量先行。别凭感觉优化，用Lighthouse、WebPageTest测测，看看真实用户的性能数据（RUM）。有时候你优化了半天加载，结果发现卡顿是因为某个事件监听器里写了段死循环。

好了，口水喷了不少。你们在性能优化上都踩过什么印象最深的坑？或者有没有什么觉得特别牛但冷门的小技巧？评论区唠唠。