博客文章数过了 30 篇之后，首屏加载明显变慢。

用 Lighthouse 跑了一下，Performance 分数只有 62 分。首次内容绘制 3.2 秒。

这不行。一个静态博客加载三秒，说不过去。

问题定位

打开 DevTools 的 Network 面板，发现几个问题：

• 首页一次性加载了所有文章的元数据
• 字体文件没有做子集化，中文字体包 2MB+
• 封面图没有压缩，单张 800KB

优化过程

图片压缩

最简单也最有效的一步。

用 sharp 写了个脚本，把所有封面图统一压缩为 WebP 格式，宽度限制 800px：

import sharp from 'sharp'
import { globSync } from 'glob'

const files = globSync('docs/public/covers/*.png')
for (const file of files) {
  await sharp(file)
    .resize(800)
    .webp({ quality: 80 })
    .toFile(file.replace('.png', '.webp'))
}

单张图片从 800KB 降到 60KB。总封面大小从 25MB 降到 2MB。

字体子集化

中文字体文件太大是老问题了。用 cn-font-split 做了字体分包，按使用频率拆分成多个小文件，按需加载。

文章列表懒加载

首页改为只渲染前 10 篇文章，滚动到底部再加载更多。VitePress 的数据加载机制配合 IntersectionObserver 就能实现。

优化后

再跑一次 Lighthouse：

• Performance：62 → 94
• 首次内容绘制：3.2s → 0.8s
• 总传输大小：4.8MB → 1.2MB

花了一个周末。值了。