标签：性能
这里收集了带「性能」标签的 10 篇文章，按发布时间从新到旧排列。
用 CDP 限速与 Lighthouse 实测出来的结论：关键 CSS 与首屏、图片格式与体积、缓存分层、埋点脚本对 LCP 的影响。既有有效改动，也有「做了没用」的记录。
-
27 篇文章的站内搜索：81 KB 索引与一次 304
静态站没有后端，站内搜索只能在构建期做索引、在浏览器里做匹配。这篇记录现在这套方案的实现与实测（索引 81 KB、首搜 422 ms），顺手修掉「每次搜索都重新下载索引」的问题，并说清它在多少篇文章之后会撑不住。
10月24日 23:40
-
构建产物 16 MB，访客每次只下 28 KB
统计 dist 目录发现 16 MB、313 个文件，其中 1.6 MB 的 Mermaid 图表引擎从来没被下载过。这篇把「部署体积」与「访客成本」分清：什么进了关键路径、什么按需加载、什么可以被缓存一年。
10月24日 23:20
-
和 Cookie 横幅抢 LCP：我试到哪一步就停了
上一篇发现真正的 LCP 元素是 Cookie 横幅后，我试了三种办法：提前加载、压缩体积 75%、preload 脚本。性能分从 37 提到 50、FCP 从 3.5s 到 1.5s，但 LCP 卡在 7.4s 不动。这篇记下为什么压小体积没用，以及我为什么停在这里。
10月24日 22:00
-
我的性能测试骗了我：把第三方全拦掉再测
一个多月来我的脚本一直显示 LCP 1.9 秒，直到跑了一次 Lighthouse——同一个页面 LCP 12.4 秒。差异不在工具，而在我脚本的启动参数里那行 host-resolver-rules：它把所有第三方域名都解析成了 NOTFOUND。附三个数据源的对比与修复过程。
10月24日 21:40
-
随机图当封面：一张 250KB，我没让它进列表
静态博客的卡片没图会很难看，随机图 API 看起来很省事。但实测那张图 250KB、Cache-Control 还是 max-age=0——如果首页 10 条卡片都挂上，一次访问就是 2.5MB。这篇算清这笔账，并给出三种封面方案的取舍。
10月24日 21:00
-
三层缓存各自为政：我的静态资源被一行 Cache-Control 拖慢
浏览器缓存、Cloudflare 边缘缓存、源站响应头三层叠在一起时，谁说了算？抓自己站的真实响应头发现：连内容哈希命名的 CSS/JS 都是 max-age=0，每次访问都要重新验证。附发现过程、Cloudflare 规则写法和免费套餐的坑。
10月24日 20:40
-
图片格式的收益边界：PNG → WebP → AVIF 实测
拿自己站上 12 张真实配图做实验：WebP 换 AVIF 在「同画质」下平均省 35%，但常见的「AVIF 省一半」是拿不同质量档比出来的。附 PSNR 对齐方法、编码耗时与什么时候才值得上 AVIF。
10月24日 20:20
-
Astro 静态站的三个隐形约定：CSS 是全局的
Astro 的默认行为大多很合理，但有三条不写在报错里的约定：script 默认被打包成模块、CSS import 默认对全站生效、dist 目录从不清理。每一条我都在这两周踩过，附判断命令与修法。
10月24日 19:40
-
文章配图流水线：截图、压成 WebP、随构建分发
写技术文章一半时间花在图上。这套流水线只有四条规则：截图必须真实、按出现顺序编号、统一压成 WebP、和文章目录同名进仓库。附实测压缩数据（2073KB → 357KB）与五个踩过的坑。
10月24日 19:00
-
首屏从 392KB 砍到 59KB，FCP 从 7.4 秒到 2.1 秒
用 CDP 模拟中端手机实测博客首页：GA4 与 Clarity 挤在关键路径、头像和 favicon 直接加载 107KB 原图、312KB 关键 CSS 拖慢首屏。四处改动后传输 392KB→59KB，FCP 7.4s→2.1s，长任务 13→2 个。
10月24日 17:45
