清理并重新构建

lighthouse https://geekhuashan.com --preset=desktop --output=json

阻塞资源 1: /cdn-cgi/scripts/.../email-decode.min.js
- 大小: 1,211 bytes
- 阻塞时长: 147ms
- 影响: FCP 延迟

阻塞资源 2: /css/custom.min.f3ac65...924d00bb.css
- 大小: 3,961 bytes
- 阻塞时长: 147ms
- 影响: 首屏渲染

1. 页脚版权文字
   前景色: #6c757d (中灰)
   背景色: #f5f5f5(浅灰)
   对比度: 4.3:1 ❌ (需要 4.5:1)

2. 页脚第一个链接 (Geekhuashan)
   前景色: #777777
   背景色: #f5f5f5
   对比度: 4.1:1 ❌

3. 页脚第二段文字 (Powered by...)
   对比度: 4.3:1 ❌

4. 页脚第二个链接 (theme)
   对比度: 4.1:1 ❌

偏移 1: 发布热图组件
- 元素: section#publishing-heatmap
- 偏移分数: 0.0262 (占总分 98%)
- 位置: 783px → 1046px (高度 263px)
- 原因: JavaScript 动态生成 371 个网格单元

偏移 2: 导航菜单
- 元素: ul#menu
- 偏移分数: 0.0001 (可忽略)
- 原因: 字体加载后高度微调

<!-- 原始代码 - extend_head.html -->
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | relURL }}">
{{- end }}

<!-- 优化后 - extend_head.html -->
{{- /* 使用 media="print" 技巧异步加载非关键 CSS,避免渲染阻塞 */}}
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | relURL }}" media="print" onload="this.media='all'">
{{- end }}

{{- /* 为不支持 JS 的浏览器提供降级方案 */}}
<noscript>
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | relURL }}">
{{- end }}
</noscript>

/* custom.css - 原始代码 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap');

<!-- head.html -->
{{- /* DNS Prefetch 和 Preconnect 提前建立连接 */}}
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

{{- /* 异步加载 Google Fonts,避免渲染阻塞 */}}
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap"
      media="print"
      onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap">
</noscript>

/* custom.css - 优化后 */
/* 加载小清新主题样式 - 字体已移至 head.html 异步加载以优化性能 */

<!-- head.html -->
{{- /* 预加载 LCP 图片以优化加载性能 */}}
{{- if .IsHome }}
{{- with site.Params.profileMode }}
{{- if .imageUrl }}
<link rel="preload" as="image" href="{{ .imageUrl | absURL }}">
{{- end }}
{{- end }}
{{- end }}

<!-- index_profile.html -->
<img draggable="false"
     src="{{ $img.Permalink }}"
     alt="{{ .imageTitle | default " profile image" }}"
     height="{{ .imageHeight | default 225 }}"
     width="{{ .imageWidth | default 225 }}"
     loading="eager"
     fetchpriority="high" />

<!-- head.html -->
{{- /* Content Security Policy for XSS protection */ -}}
{{- if hugo.IsProduction | or (eq site.Params.env "production") }}
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                         https://www.googletagmanager.com
                         https://www.google-analytics.com
                         https://pagead2.googlesyndication.com
                         https://fundingchoicesmessages.google.com
                         https://static.cloudflareinsights.com
                         https://cdn.jsdelivr.net;
               style-src 'self' 'unsafe-inline'
                         https://fonts.googleapis.com;
               font-src 'self' https://fonts.gstatic.com;
               img-src 'self' data: https:;
               connect-src 'self'
                          https://www.google-analytics.com
                          https://region1.google-analytics.com;
               frame-src https://fundingchoicesmessages.google.com
                        https://www.google.com;">
{{- end }}

规则名称: 静态资源长缓存
匹配条件: 文件扩展名匹配 css, js, woff2, gif, png, jpg, webp
操作:
  - 边缘缓存 TTL: 7 days
  - 浏览器缓存 TTL: 4 hours

URL: geekhuashan.com/*
设置:
  - Browser Cache TTL: 4 hours
  - Edge Cache TTL: 2 hours

hugo --gc --minify --cleanDestinationDir

hugo server -D --disableFastRender

grep "media=print" public/index.html

grep "preload.*image" public/index.html
# 输出: <link rel=preload as=image href=https://geekhuashan.com/img/logo.gif>

grep "Content-Security-Policy" public/index.html
# 输出: <meta http-equiv=Content-Security-Policy content="...">

git add .
git commit -m "优化网站性能:异步加载CSS、优化LCP图片、添加CSP安全策略

- 使用 media=print 技巧异步加载22个CSS模块,预计节省1180ms
- Google Fonts 异步加载,避免渲染阻塞
- LCP 图片添加 preload 和 fetchpriority,改善150-200ms
- 实施 CSP 安全策略,防御 XSS 攻击
- 添加 Cloudflare 缓存优化指南

基于 Lighthouse 13.0.1 报告,预期 FCP 提升约1.2秒,LCP 提升约300ms"

git push origin main

# 等待 GitHub Pages 部署(约 1-2 分钟)

# 运行 Lighthouse 测试
lighthouse https://geekhuashan.com --output html --output-path ./lighthouse-after.html

# 对比优化前后差异

<!-- 方法 1: media="print" 技巧(推荐) -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- 方法 2: JavaScript 动态加载 -->
<script>
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);
</script>

<!-- 方法 3: Preload + 低优先级 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- 预连接:提前建立连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">

<!-- 预加载:优先下载关键资源 -->
<link rel="preload" as="image" href="hero.jpg">

<!-- DNS 预解析:提前解析域名 -->
<link rel="dns-prefetch" href="//analytics.google.com">

<!-- 预取:空闲时下载可能需要的资源 -->
<link rel="prefetch" href="next-page.html">

第 1 周: 仅记录违规 (Report-Only)
第 2 周: 强制执行基本策略
第 3 周: 移除 'unsafe-inline'(需重构内联脚本)
第 4 周: 移除 'unsafe-eval'(需替换依赖库)

# 将 logo.gif 转换为 WebP
hugo gen chromaimg -g logo.gif -o logo.webp

# HTML 中使用 <picture> 提供降级
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.gif" alt="logo">
</picture>

<style>
  /* 关键 CSS: layout, above-the-fold styles */
  body ** margin: 0; font-family: sans-serif; **
  .header ** height: 60px; **
</style>

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

// 延迟加载非关键脚本
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => **
    import('./analytics.js');
  **);
} else **
  setTimeout(() => import('./analytics.js'), 2000);
**

// sw.js - 缓存静态资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => **
      return cache.addAll([
        '/',
        '/css/main.css',
        '/js/app.js',
        '/img/logo.gif'
      ]);
    **)
  );
});

0ms    - 请求 HTML
150ms  - HTML 到达,开始解析
297ms  - 等待 CSS 下载 (阻塞)
444ms  - CSS 解析完成
444ms  - 🎨 首次内容绘制 (FCP)
600ms  - 图片开始加载
750ms  - 📸 最大内容绘制 (LCP)
800ms  - JavaScript 开始执行
1300ms - ✅ 可交互 (TTI)

0ms    - 请求 HTML
150ms  - HTML 到达,立即渲染 (关键 CSS 内联)
150ms  - 🎨 首次内容绘制 (FCP)
200ms  - 图片预加载完成
250ms  - 📸 最大内容绘制 (LCP)
300ms  - CSS 异步加载完成
500ms  - ✅ 可交互 (TTI)
2000ms - 第三方脚本开始加载

实验室 LCP: 0.4s
真实用户 LCP: 0.4s × 2.5 (网络) × 2 (设备) = 2.0s

FCP -150ms + LCP -150ms + CLS -0.02 = 更好的体验
更好的体验 = 更低的跳出率
更低的跳出率 = 更高的转化率
更高的转化率 = 更好的 ROI

<!-- ❌ 阻塞 -->
<link rel="stylesheet" href="styles.css">

<!-- ✅ 异步 -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- ✅ 预加载 -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

<!-- ✅ 内联关键 CSS -->
<style>/* 首屏必需样式 */</style>

# 使用工具计算合规颜色
https://webaim.org/resources/contrastchecker/

输入:
前景色: #6c757d
背景色: #f5f5f5
目标对比度: 4.5:1

输出:
建议前景色: #5a6268 (5.2:1) ✅

:root **
  --text-light: #6c757d; /* 旧值 */
  --text-light: #5a6268; /* 新值 - 一处修改,全局生效 */
**

// 方式 1: 固定延迟
setTimeout(() => loadScript('analytics.js'), 2000);

// 方式 2: 用户交互触发
document.addEventListener('scroll', () => loadScript('ads.js'), ** once: true **);

// 方式 3: 空闲时加载 (推荐)
if ('requestIdleCallback' in window) **
  requestIdleCallback(() => loadScript('analytics.js'));
** else **
  setTimeout(() => loadScript('analytics.js'), 2000);
**