前言：本文记录了一次完整的 Lighthouse 性能优化过程。从 62 分到 99 分，我踩遍了图片加载、本地预览环境、LCP
调优、字体阻塞的所有坑。
背景
最近用 Astro 5 重构了个人博客 AltStack。本以为静态站点性能无敌，结果第一次跑分只有 62 分，LCP 高达 8.2s。
这就好比买了一辆法拉利，结果开出了拖拉机的速度。
核心优化点复盘
1. 警惕 6MB 的“隐形杀手”
很多时候，慢的不是代码，是资源。我发现首页引用了两张未经压缩的 4K 大图。 对策：使用 Python 脚本 + Pillow 库进行本地压缩，并转换为 WebP 格式。体积从 6MB -> 300KB。
2. LCP 的优先级魔法
浏览器默认是懒加载图片的 (loading="lazy")。但这对于首屏大图（LCP 元素）是致命的。
代码修正：
<Image
src={heroImage}
loading="eager" // 立即加载
fetchpriority="high" // 提高优先级
/>
1 仅此一行代码，LCP 从 2.5s 降至 0.8s。
2
3 ### 3. 字体是性能杀手
4 我的 FCP 一度卡在 4.3s，罪魁祸首是 2.1MB 的中文字体文件。
5 为了追求极致速度，我最终选择移除自定义字体，改用系统字体栈：
6 `font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;`
7 虽然牺牲了一点个性，但换来了秒开的体验。
8
9 ### 4. 评论区懒加载
第三方脚本（如 Twikoo）是渲染阻塞的常客。
我使用 IntersectionObserver 实现了“看见才加载”：只有当用户滚动到评论区时，才请求 JS。这让
TBT（总阻塞时间）直接归零。
总结
性能优化不是玄学，是工程。 如果你对 Astro、Cloudflare 边缘缓存策略或具体的火焰图分析感兴趣，欢迎阅读我的完整复盘文章。
👉 阅读完整版（体验更佳）： xbstack.com/stack/dev/l…