把博客塞进 2 核 2G：性能压榨实录

朋友都说我这博客快得不像话。没什么魔法，就是舍得砍。

起点：一个 5 秒才开屏的站

最早我用的是某动态博客系统：Java 后端 + 前端 SPA + 全文检索，功能确实全，但首屏要等 40 多个请求、两兆多的 JS 下载执行完。2 核 2G 的小机器，CPU 直接拉满。

痛定思痛，我列了个清单，把「访客真正需要的东西」圈出来——其实只有三样：看文章、找文章、留句话。其他全是给站长自己的仪式感。

第一刀：动态改静态

动态系统的每一毫秒，都在为「此刻没有发生的事情」买单。评论？一年没几条。在线发文？我又不是随时随地写稿。

于是换成 Hugo：写 Markdown，本地一条命令，全站秒级生成纯静态 HTML。

# 写完一篇文章之后，我的全部发布流程
hugo --minify                # 生成 + 压缩，1 秒出全站
rsync -az public/ root@my-server:/var/www/clblog/

服务器上只剩 nginx，CPU 占用常年 0.x%。

第二刀：把首屏压进三个请求

打开开发者工具的 Network 面板，对着列表逐个审问：

1. HTML：一个，CSS 内联？不——全站共享的样式单独一个文件，强缓存后回访零流量
2. CSS：一个，gzip 后 9KB
3. 字体：中文字体动辄 5MB，直接用系统字体，零下载；英文展示字体只要拉丁子集，18KB
4. 图片：插画全用 SVG，7KB 矢量不发糊

# nginx 的三行关键配置
gzip on;
gzip_types text/css application/javascript image/svg+xml;
location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; }

第三刀：动画也要抠

滚动卡顿的站，再快也显得慢。全部动画只用两个属性：

/* 只碰 transform 和 opacity，合成器动画，不触发重排 */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }

顺手把 ease-in-out 全换成自定义曲线 cubic-bezier(.22,1,.36,1)，手感立刻「贵」了一点。

结果

功能真的少了吗？评论接了 giscus，搜索是客户端索引，标签归档分类一样不缺。砍掉的是服务器的工作，不是访客的体验。

小服务器不是缺陷，是预算约束下的设计题。约束越紧，答案越干净。