性能优化 on kkkk24 的博客

博客加载太慢？我是这样排查和解决的

Fri, 06 Feb 2026 00:00:00 +0000

起因

前两天觉得博客打开有点慢，但也没太在意。今天闲着没事，拿 curl 测了一下，好家伙，首字节时间（TTFB）居然要 2.28 秒：

curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/

# 输出：TTFB: 2.280466s

这也太离谱了。明明挂着 Cloudflare CDN，怎么还这么慢？

排查过程

先看看响应头：

curl -sI https://blog.kkkk24juastin.asia/ | grep -i cache

# 输出：
# cf-cache-status: DYNAMIC
# cache-control: max-age=3600

看到 cf-cache-status: DYNAMIC 我就懂了。

这玩意的意思是 Cloudflare 压根没缓存这个页面，每次访问都要回源到我的服务器。而我的服务器在国外，网络延迟加上 TLS 握手，2 秒多其实不算意外。

问题出在哪

Cloudflare 有个"特性"：默认不缓存 HTML 页面。

它的逻辑是 HTML 通常是动态生成的，不适合缓存。但对于静态博客来说，HTML 就是静态文件啊，为啥不能缓存？

解决方案

需要手动加一条 Cache Rule，告诉 Cloudflare：这个域名下的 HTML 也给我缓存上。

操作步骤：

登录 Cloudflare Dashboard
选你的域名
进 Caching → Cache Rules
创建规则：

匹配条件: 主机名 = blog.kkkk24juastin.asia
缓存设置: 
  - 符合缓存条件: 是
  - 边缘 TTL: 1 个月
  - 浏览器 TTL: 1 天

保存，等几分钟生效。

效果验证

再跑一遍：

# 第一次，预热缓存
curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/
# TTFB: 1.1s（回源了）

# 第二次，缓存命中
curl -s -o /dev/null -w "TTFB: %{time_starttransfer}s\n" https://blog.kkkk24juastin.asia/
# TTFB: 0.045s

# 确认缓存状态
curl -sI https://blog.kkkk24juastin.asia/ | grep cf-cache-status
# cf-cache-status: HIT

从 2.28s 降到 45ms，提升了 98%。

舒服了。

还做了啥

既然都折腾了，顺手做了几个小优化：

1. 确认 Brotli 压缩开了

在 Cloudflare 的 Speed → Optimization 里，确保 Brotli 是开着的。比 Gzip 压缩率更高。

2. 加了资源预加载

在 extend_head.html 里加了 DNS 预解析：

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

3. 构建时自动清缓存

在 GitHub Actions 里加了一步，每次部署完自动清 Cloudflare 缓存：

- name: 清缓存
  run: |
    curl -X POST "https://api.cloudflare.com/client/v4/zones/$CF_ZONE_ID/purge_cache" \
      -H "Authorization: Bearer $CF_API_TOKEN" \
      --data '{"purge_everything":true}'

这样每次更新文章，CDN 会立刻拉取最新内容。

总结

对于静态博客来说，优化的重点不在代码层面（Hugo 已经够快了），而是让 CDN 真正发挥作用。

如果你的博客也挂着 Cloudflare 但还是慢，先检查一下 cf-cache-status 是不是 HIT。不是的话，多半是缓存规则没配好。

就这样，收工。

Hugo 博客加载速度优化实践

Wed, 04 Feb 2026 00:00:00 +0000

发现问题

博客搭建完成后，访问时总觉得有点卡。打开 Chrome DevTools 看了下 Network 面板，发现几个问题：

图片没有做懒加载，首屏就加载了所有图片
HTML/CSS/JS 文件可以进一步压缩
没有利用好浏览器缓存
外部资源（如字体）请求有延迟

既然发现了问题，那就一个个解决。

Hugo 构建优化

深度压缩配置

Hugo 自带 minify 功能，但默认配置比较保守。在 hugo.toml 中可以配置更激进的压缩选项：

[minify]
  disableXML = true
  minifyOutput = true

  [minify.tdewolff]
    [minify.tdewolff.css]
      keepCSS2 = false
      precision = 0
    
    [minify.tdewolff.html]
      keepDocumentTags = true
      keepEndTags = true
      keepQuotes = false
      keepWhitespace = false
    
    [minify.tdewolff.js]
      keepVarNames = false
      precision = 0
    
    [minify.tdewolff.json]
      keepNumbers = false
      precision = 0
    
    [minify.tdewolff.svg]
      keepComments = false
      precision = 0

这个配置使用了 tdewolff/minify 库的参数，可以对各类资源做深度压缩：

CSS: 移除不必要的空格、简化数值精度
HTML: 移除空白、可选引号
JS: 压缩变量名
SVG: 移除注释、简化数值

构建缓存

重复构建时，很多资源是不变的，可以利用缓存加速：

[build]
  writeStats = true

[caches]
  [caches.assets]
    dir = ":resourceDir/_gen"
    maxAge = "720h"  # 30 天
  
  [caches.getcsv]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.getjson]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.getresource]
    dir = ":cacheDir/:project"
    maxAge = "4h"
  
  [caches.images]
    dir = ":resourceDir/_gen"
    maxAge = "720h"

writeStats = true 会生成一个包含所有使用过的类名的文件，可以配合 PurgeCSS 做 tree-shaking（虽然 PaperMod 主题本身已经很精简了）。

图片处理优化

Hugo 的图片处理功能很强大，合理配置可以减小图片体积：

[imaging]
  quality = 80
  resampleFilter = "Lanczos"
  hint = "photo"
  anchor = "Smart"
  bgColor = "#ffffff"
  
  [imaging.exif]
    disableDate = false
    disableLatLong = true  # 保护隐私

quality = 80：图片质量设为 80%，肉眼几乎看不出差别，但体积能减小不少
resampleFilter = "Lanczos"：高质量重采样算法，适合缩放照片
anchor = "Smart"：智能裁剪，自动识别图片主体
disableLatLong = true：移除 EXIF 中的位置信息，保护隐私

前端优化

DNS 预解析和预连接

浏览器解析域名需要时间，可以用 dns-prefetch 提前解析外部域名：


<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

preconnect 比 dns-prefetch 更进一步，会提前建立完整的 TCP 连接。

图片懒加载

现代浏览器都支持原生的 loading="lazy" 属性，不需要额外的 JS 库：

document.addEventListener('DOMContentLoaded', function() {
  function addLoadedClass(img) {
    if (img.complete) {
      img.classList.add('loaded');
    } else {
      img.addEventListener('load', function() {
        img.classList.add('loaded');
      });
    }
  }
  
  document.querySelectorAll('.post-content img').forEach(function(img) {
    if (!img.hasAttribute('loading')) {
      img.setAttribute('loading', 'lazy');
      img.setAttribute('decoding', 'async');
    }
    addLoadedClass(img);
  });
});

这段代码做了两件事：

给所有文章图片添加 loading="lazy" 和 decoding="async" 属性
图片加载完成后添加 loaded 类，配合 CSS 做渐显效果

图片渐显效果

配合上面的 JS，在 CSS 中实现平滑的渐显效果：

/* assets/css/extended/custom.css */

.post-content img,
.entry-cover img {
  background-color: var(--code-bg);
  transition: opacity 0.3s ease-in-out;
}

.post-content img[loading="lazy"],
.entry-cover img[loading="lazy"] {
  opacity: 0;
}

.post-content img.loaded,
.entry-cover img.loaded {
  opacity: 1;
}

这样图片在加载时会显示一个灰色占位背景，加载完成后平滑显示。

减少布局偏移

图片加载时如果没有预留空间，会导致页面布局跳动（CLS 指标），用户体验很差：

.post-content img {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  max-width: 100%;
}

如果图片设置了 width 和 height 属性，浏览器可以提前计算出图片的宽高比，预留好空间。

尊重用户偏好

有些用户可能对动画敏感，可以检测并禁用过渡效果：

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

优化效果

做完这些优化后，再看 Lighthouse 跑分：

指标	优化前	优化后
首次内容绘制 (FCP)	~1.5s	~0.8s
最大内容绘制 (LCP)	~2.5s	~1.5s
累积布局偏移 (CLS)	0.15	< 0.05

当然，实际效果还取决于服务器性能和用户网络。