Skip to content

PERFORMANCE_OPTIMIZATION_PLAN.md

Latest commit

 

History

History
106 lines (73 loc) · 4.48 KB

PERFORMANCE_OPTIMIZATION_PLAN.md

File metadata and controls

106 lines (73 loc) · 4.48 KB

博客网站优化计划（性能 / 加载速度 / 体验）

1) 当前状态速览（基线）

基于本地构建与代码结构，当前可见的主要性能特征：

  • 大体量静态资源存在明显峰值：文章资源中包含超大 GIF/PNG，单文件可达 24MB+ 与 19MB+，会拉高首屏与滚动过程中的网络负载。
  • 字体资源存在可压缩空间：当前仍有 .ttf 字体（尤其 CJK 字体）直接面向生产，体积较大。
  • 全站级脚本开销偏“常驻”：
    • 页面切换脚本（ClientRouter）与评论加载器（GiscusLoader）在布局层普遍注入。
    • Google Subscribe with Google（SWG）脚本在 BaseLayout 头部全局注入，影响所有页面。
  • 单页样式体积偏高（特定页面）：checkin 页面 CSS 在构建日志中体积较大，存在拆分与按需加载机会。

2) 优化目标（建议 4 周内）

Core Web Vitals 目标

  • LCP：移动端 < 2.5s（P75）
  • CLS：< 0.1
  • INP：< 200ms

构建产物目标

  • 首屏关键路由（首页、文章页）JS 总量压缩 20%+。
  • 文章图片总下载体积（中位）压缩 30%+。
  • 字体总传输体积压缩 40%+（优先处理 TTF -> WOFF2）。

3) 优先级与执行计划

P0（本周，收益最高）

  1. 图片资产治理（最高优先级）

    • 将超大 GIF（演示动画）转换为 mp4/webm + poster，正文中默认展示静态首帧，点击后再播放。
    • 对超大 PNG/JPG 进行批量重编码（WebP/AVIF），并在文章中提供 srcset/sizes。
    • 对历史文章插图执行“尺寸上限策略”：超出展示宽度 2 倍的图片统一降采样。

  2. 字体传输优化

    • 将 AlanSans-Regular.ttf 与 MapleMono-CN-Regular.ttf 转为 WOFF2。
    • CJK 字体改为子集化（按常用字集分包），并通过 unicode-range + font-display: swap 分层加载。
    • 保留当前已 preload 的关键拉丁字体，但避免预加载非关键字体。

  3. 全局脚本降载

    • SWG 脚本由“全站注入”改为“仅文章页注入”或“用户交互后加载”。
    • GiscusLoader 改为仅在存在评论容器时再初始化，不在无评论页循环探测。
    • 评估 ClientRouter：若淡入过渡收益不高，改为仅关键路由启用。

P1（第 2-3 周，结构优化）

  1. Checkin 页面专项瘦身

    • 将大段内联脚本拆分为独立模块，并启用按路由加载。
    • 拆分 checkin 样式，保留关键首屏样式，非关键部分延后。
    • 对交互逻辑加“空闲时初始化”（requestIdleCallback / 延迟挂载）策略。

  2. CSS 与渲染路径优化

    • 审查全局 CSS 中非首屏规则，降低首屏样式阻塞。
    • 引入 content-visibility: auto 到长内容区块，降低首次渲染成本。
    • 统一组件级样式作用域，减少页面间样式重复注入。

  3. 内容页策略优化

    • 对长文启用目录、注释、评论等“渐进增强”加载。
    • 对文章内嵌媒体（尤其 iframe）统一 lazy load + 点击激活。

P2（第 4 周，持续治理）

  1. 监控与预算体系

    • 增加 Lighthouse CI（首页 + 文章页 + checkin 页），PR 阶段自动比对。
    • 建立资源预算（单图、单页 JS、字体总量）并在构建时告警。
    • 引入 RUM（如 Netlify Analytics / 自建埋点）追踪真实用户 LCP/INP/CLS。

  2. 发布策略与缓存

    • 确认 Cache-Control：静态指纹资源长期缓存，HTML 短缓存。
    • 第三方脚本统一 defer/async 与加载优先级分级。

4) 里程碑（建议）

  • M1（第 1 周末）：完成超大图片与字体压缩改造，验证首页/文章页体积下降。
  • M2（第 3 周末）：完成脚本按需化、checkin 页面拆分，验证交互响应和首屏。
  • M3（第 4 周末）：接入性能预算与监控，形成可持续回归机制。

5) 验收方式

每项改造至少提供：

  1. 命令：pnpm build + pnpm preview + Lighthouse 测试命令
  2. 路由：/、任一典型文章页、/checkin
  3. 指标：
    • LCP / INP / CLS
    • 首屏资源请求数
    • JS/CSS/图片/字体体积对比（改造前后）

6) 可立即动手的前三件事（今天）

  1. 清理 10MB+ 图片与 GIF，优先替换为视频或 AVIF/WebP。
  2. 将两份 .ttf 字体转换为 .woff2，并在 fonts.css 切换引用。
  3. 把 BaseLayout 中的 SWG 脚本改为仅文章页注入（或延迟注入）。