Hexo 博客性能优化指南

周言志2025-05-102025-10-25

Hexo 博客性能优化指南（精简版）

随着内容增长，静态博客仍可能面临首页加载慢、首屏阻塞和流量浪费等问题。以下按策略列出可落地的优化点与示例，便于在 Hexo 主题中快速应用。

一、图片优化（优先级最高）

压缩与格式

先使用工具压缩（TinyPNG、ImageOptim）。生产环境尽量输出 WebP/AVIF，备份保留原图。

响应式与 srcset

用 picture + srcset 提供多分辨率图，减少移动端带宽：

<picture>
  <source media="(max-width:600px)" srcset="image-480.webp">
  <source media="(max-width:1200px)" srcset="image-800.webp">
  <img fetchpriority="high" src="image-1200.webp" alt="封面">
</picture>

懒加载

首页与列表使用懒加载库（lazysizes / lozad），文章内首图除外。

CDN 与缓存

将图片上 CDN（七牛/又拍/OSS），设置长缓存与合适的 Cache-Control。

二、CSS / JS 优化

移除不必要依赖

把 jQuery + fancybox 替换为轻量 PhotoSwipe 或原生实现，减少包体积。

按需加载第三方功能

仅在需要的文章页加载 mermaid、katex 等：

1
2
3

<% if (theme.mermaid.enable && page.mermaid) { %>
  <script src="<%= vendorCdn(theme.vendor.js.mermaid)[0] %>" defer></script>
<% } %>

异步与延迟加载

全站脚本使用 defer；低优先级（评论、统计）用动态加载：

<script src="/js/main.js" defer></script>
<script>
  // 延迟加载评论示例
  window.addEventListener('load', () => {
    const s = document.createElement('script');
    s.src = '/js/comments.js';
    document.body.appendChild(s);
  });
</script>

Critical CSS 与预加载

提取首屏关键样式，其他样式使用 rel=”preload” + onload 方式加载：

1 2	<link rel="preload" href="/css/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="/css/app.css"></noscript>

三、字体与图标

使用 iconfont 自定义子集或 SVG 图标，避免全量 FontAwesome。

预连接与预加载第三方字体：

1 2	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" href="https://fonts.gstatic.com/s/xxx.woff2" as="font" type="font/woff2" crossorigin>