性能优化

本页讲解博客的性能优化手段：图片懒加载、资源压缩、CDN 加速、图片格式优化，以及 LCP（首屏最大内容）优化原则。多数优化开箱即用，重点是理解分层策略，新增资源时不要破坏它。

1. 懒加载（lazyload）

用途：页面可见范围外的图片与评论插件不提前加载，减少首屏请求与流量。配置在主题配置（正式改 userConfig/_config.tmp.yml）：

lazyload:
  enable: true          # true | false
  loading_img: /medias_webp/loading2.svg       # 加载占位图（亮色）
  loading_img_dark: /medias_webp/loading2-dark.svg  # 占位图（暗色）
  onlypost: false       # true 时懒加载仅在文章页生效
  offset_factor: 2      # 触发加载的偏移倍数（基数是视窗高度）

• 元素加 no-lazy 类可跳过懒加载（如首屏 Banner）
• onlypost: false 时全站生效；自定义页面想单独开启，可在 front-matter 写 lazyload: true
• offset_factor 按部署环境请求速度调节：越大越早加载（越接近底部才懒加载）

2. 资源压缩（hexo-minify）

用途：构建时压缩 JS/CSS/HTML，减小体积。根配置 _config.yml：

minify:
  preview: false            ## 本地预览时是否压缩（false = 生产压缩）
  exclude: ['*.min.*']      # 已压缩文件跳过
  js:   { enable: true }    # JS 压缩
  css:  { enable: true }    # CSS 压缩
  html:
    enable: true
    options:
      minifyJS: true        # HTML 内联 JS 压缩
      minifyCSS: true       # HTML 内联 CSS 压缩
      removeComments: true  # 去注释
      collapseWhitespace: true # 去多余空白
      removeAttributeQuotes: true
  image:
    enable: false           # 图片压缩默认关闭（图片走独立优化，见第 4 节）

注意：

• preview: false 意味着本地 hexo server 不压缩，想验证压缩效果需 npm run build（见「部署」篇）
• CI 构建时 all_minifier 开关在 userConfig/_config.tmp.yml 控制，debug 模式（-d）自动关闭压缩

3. CDN 加速

用途：静态资源走 jsDelivr 全球节点，用户就近取资源。机制是占位符注入：模板写 {cdnPathVersion}，CI 构建时替换为真实 CDN 地址（详见「全局配置」篇 CDN 一节）。

# 主题配置
jsDelivr:
  url: {cdnPathVersion}      # 带版本号的 CDN 路径（构建时替换）
  latesturl: {cdnPathLatest} # latest 路径（封面图等不变资源）
cdn:
  url: "{cdnUrl}"            # JS/CSS CDN URL
  mediaUrl: "{mediaUrl}"     # 图片/媒体 CDN URL
  resUrl: "{resUrl}"         # 资源 CDN URL

• 版本号是关键：-r 发布会递增 tools/.VERSION 并注入 {urlVersion}（如 ?v=12.19），CDN 与浏览器缓存才能拿到新文件；仅改内容 -c 不递增，CDN 命中旧版本但内容不变没问题
• 发布后 tools/purge-cdn.sh -a 刷新 CDN 缓存（cicd.sh release 模式自动调用）
• 图片走独立 CDN 域（{mediaUrl}），与 JS/CSS 分离便于分别控制缓存策略

4. 图片优化（webp）

用途：图片是本博客体积大头。站内图片统一为 webp 格式，体积远小于 jpg/png，并配合 CDN 分发。webp 文件在主题源码 themes/matery/source/medias_webp/（构建时复制到 public/medias_webp/，URL 用 /medias_webp/...）：

# 示例：featureimages 图库均为 webp
/medias_webp/featureimages/0.webp
/medias_webp/avatar.webp
/medias_webp/loading2.svg       # SVG 占位图（矢量，体积极小）

• 新增配图建议转 webp 再入仓库：图片仓库是子模块 userConfig/cloudimg/（tools/processRepo.sh 同步），构建时 imgurl.sh 处理 URL
• 图片加载遵循第 1 节懒加载 + 第 3 节 CDN 分发，两层叠加生效
• hexo-minify 的 image.enable 默认关闭——站内 webp 已是最终形态，不需要二次压缩

5. LCP 优化原则（JS 分层）

用途：LCP（Largest Contentful Paint）是首屏核心指标。2026-08-11 完成一轮 JS 加载策略分层重构，原则是首屏必需同步、其余 defer、重型按需：

自己加 JS 时的三条纪律：

1. 默认 defer：<script src="..." defer></script>，不要同步阻塞
2. 别动 L0 三个文件：jquery/utils/colorSchema 是全局命名空间基石，同步加载是设计决策
3. 重型库按需加载：mermaid/mathjax/echarts 这类只在特定页面出现的库，不该出现在全站脚本里——条件触发时再注入

验证：

# 构建产物检查：scripts.ejs 生成的 script 标签应带 defer
grep -rl defer public/js/  # 或直接看 public/index.html 的 script 标签

详见 docs/superpowers/specs/2026-08-11-lcp-optimization-design.md（本仓库开发文档，含 4.4 实测数据）。

附：性能优化速查表