275 lines
7.6 KiB
Markdown
275 lines
7.6 KiB
Markdown
# 第1步完成：CSS加载策略优化 - 测试验证指南
|
||
|
||
## ✅ 已完成的优化
|
||
|
||
### 1. 创建关键CSS文件
|
||
**文件：** `themes/Ying/assets/css/critical.css`
|
||
- 包含所有首屏必需的CSS（约12KB压缩后）
|
||
- CSS变量定义
|
||
- 基础布局（.main, .header, .header-menu）
|
||
- 深色模式基础样式
|
||
- 基础排版（h1-h6, a, p, ul等）
|
||
- 响应式关键断点
|
||
|
||
### 2. 修改CSS加载策略
|
||
**文件：** `themes/Ying/layouts/partials/head.html`
|
||
|
||
**优化前：**
|
||
```html
|
||
<link rel="stylesheet" href="bundle.css"> <!-- 阻塞渲染 -->
|
||
```
|
||
|
||
**优化后：**
|
||
```html
|
||
<!-- 1. 关键CSS内联（立即生效） -->
|
||
<style>{{ critical.css content }}</style>
|
||
|
||
<!-- 2. 非关键CSS异步加载（不阻塞） -->
|
||
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
||
<noscript><link rel="stylesheet" href="style.css"></noscript>
|
||
```
|
||
|
||
---
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 步骤1：构建Hugo站点
|
||
```bash
|
||
cd E:\GitHub\blog
|
||
hugo server -D
|
||
# 或者
|
||
hugo
|
||
```
|
||
|
||
### 步骤2：使用Chrome DevTools验证
|
||
|
||
#### 2.1 打开开发者工具
|
||
1. 在浏览器中打开你的网站
|
||
2. 按 `F12` 或 `Ctrl+Shift+I` 打开DevTools
|
||
3. 切换到 **Network** 面板
|
||
4. 刷新页面（`Ctrl+Shift+R` 强制刷新）
|
||
|
||
#### 2.2 检查CSS加载情况
|
||
|
||
**预期结果：**
|
||
- ✅ 看到一个较大的CSS文件（style.css，约450KB）被 **异步加载**
|
||
- ✅ 这个CSS的 `Priority` 列显示为 `Low` 或 `Idle`
|
||
- ✅ 页面仍然正确显示（关键CSS内联已生效）
|
||
|
||
**验证内联CSS：**
|
||
1. 切换到 **Elements** 面板
|
||
2. 展开 `<head>` 标签
|
||
3. 找到 `<style>` 标签
|
||
4. 应该看到大量的CSS代码（critical.css内容）
|
||
|
||
#### 2.3 检查渲染性能
|
||
|
||
**使用Lighthouse：**
|
||
1. 切换到 **Lighthouse** 面板
|
||
2. 选择 **Performance** 类别
|
||
3. 点击 **Analyze page load**
|
||
4. 等待分析完成
|
||
|
||
**预期指标提升：**
|
||
- **First Contentful Paint (FCP)**：提升20-30%
|
||
- **Speed Index**：提升15-25%
|
||
- **Total Blocking Time (TBT)**：显著减少
|
||
|
||
### 步骤3：视觉一致性检查
|
||
|
||
#### 3.1 首页检查清单
|
||
- [ ] Header布局正确
|
||
- [ ] 头像显示正常（80x80圆形）
|
||
- [ ] 社交链接图标正确
|
||
- [ ] 个人介绍文字显示
|
||
- [ ] 导航菜单样式正确
|
||
- [ ] 菜单项间距正常
|
||
- [ ] 活动状态样式正确
|
||
- [ ] 鼠标悬停效果正常
|
||
- [ ] 文章列表样式正确
|
||
- [ ] 文章标题颜色正确
|
||
- [ ] 日期显示正常
|
||
- [ ] 分页按钮样式正常
|
||
|
||
#### 3.2 深色模式检查
|
||
- [ ] 点击头像切换深色模式
|
||
- [ ] 所有文字颜色正确变化
|
||
- [ ] 正文文字：`#d1d5db`（浅灰色）
|
||
- [ ] 标题文字：`#e5e7eb`（白色）
|
||
- [ ] 链接文字：`#e5e7eb`
|
||
- [ ] 背景颜色正确
|
||
- [ ] body背景：`#020617`（深蓝黑色）
|
||
- [ ] .main容器：`rgba(15, 23, 42, 0.99)`（深蓝半透明）
|
||
- [ ] 阴影效果正确
|
||
- [ ] .main容器阴影更明显
|
||
- [ ] 导航边框颜色正确（`#1f2933`）
|
||
|
||
#### 3.3 响应式布局检查
|
||
|
||
**桌面端（>768px）：**
|
||
- [ ] .main容器宽度为618px
|
||
- [ ] 居中显示
|
||
- [ ] 毛玻璃效果正常（backdrop-filter: blur）
|
||
|
||
**移动端（<768px）：**
|
||
- [ ] 导航菜单正确换行
|
||
- [ ] 头像和社交链接布局正确
|
||
- [ ] 所有内容可正常滚动
|
||
|
||
### 步骤4：文章详情页检查
|
||
|
||
访问任意一篇文章，检查：
|
||
- [ ] 文章标题样式正确
|
||
- [ ] 元信息（作者、字数、阅读时间）显示正常
|
||
- [ ] 文章内容排版正确
|
||
- [ ] 代码块样式正常（如果有代码）
|
||
- [ ] 引用块样式正常（如果有blockquote）
|
||
- [ ] 图片显示正常
|
||
|
||
---
|
||
|
||
## 🔍 使用Performance面板深入分析
|
||
|
||
### 记录加载瀑布图
|
||
1. 打开DevTools → **Performance** 面板
|
||
2. 点击 **Record** 按钮（圆形）
|
||
3. 刷新页面
|
||
4. 等待页面完全加载后点击 **Stop**
|
||
|
||
### 分析CSS加载时序
|
||
|
||
**优化前的典型瀑布图：**
|
||
```
|
||
HTML下载 ████████░░░░░░░░░░
|
||
CSS下载 ██████████████░░░░ ← 阻塞渲染
|
||
渲染 ░░░░░░░░░░░░░██████ ← 必须等待CSS
|
||
```
|
||
|
||
**优化后的预期瀑布图：**
|
||
```
|
||
HTML下载 ██████░░░░░░░░░░░░
|
||
内联CSS ██████ ← 立即生效
|
||
CSS下载 ░░░████████████░░░ ← 异步，不阻塞
|
||
渲染 ████████████░░░░░░ ← 提前开始！
|
||
```
|
||
|
||
### 关键指标解读
|
||
|
||
| 指标 | 说明 | 预期变化 |
|
||
|------|------|----------|
|
||
| **FCP** | 首次内容绘制 | ↓ 20-30% |
|
||
| **LCP** | 最大内容绘制 | ↓ 15-25% |
|
||
| **TBT** | 总阻塞时间 | ↓ 30-50% |
|
||
| **Speed Index** | 速度指数 | ↓ 20-30% |
|
||
| **CLS** | 累积布局偏移 | 保持不变（0） |
|
||
|
||
---
|
||
|
||
## 🐛 故障排除
|
||
|
||
### 问题1：页面样式错乱
|
||
|
||
**症状：** 布局散乱、颜色不对、元素位置错误
|
||
|
||
**可能原因：**
|
||
1. critical.css缺少某些关键样式
|
||
2. CSS变量未正确加载
|
||
3. 字体文件路径错误
|
||
|
||
**解决方案：**
|
||
1. 打开浏览器Console查看错误
|
||
2. 检查critical.css是否正确加载（Elements面板）
|
||
3. 对比优化前后的CSS差异
|
||
|
||
**快速回滚：**
|
||
如果问题严重，可以临时回滚到原始方案：
|
||
```html
|
||
{{/* 恢复原始CSS加载方式 */}}
|
||
{{ $normalize := resources.Get "css/libs/normalize.css" }}
|
||
{{ $remixicon := resources.Get "css/libs/remixicon.css" }}
|
||
{{ $uikit := resources.Get "css/libs/uikit.min.css" }}
|
||
{{ $nprogress := resources.Get "css/libs/nprogress.min.css" }}
|
||
{{ $message := resources.Get "css/libs/message.min.css" }}
|
||
{{ $main := resources.Get "css/main.css" }}
|
||
|
||
{{ $style := slice $normalize $remixicon $uikit $nprogress $message $main | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }}
|
||
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
|
||
```
|
||
|
||
### 问题2：深色模式闪烁
|
||
|
||
**症状：** 切换深色模式时出现短暂的样式闪烁
|
||
|
||
**原因：** 关键CSS可能未包含完整的深色模式变量
|
||
|
||
**解决方案：**
|
||
检查critical.css中是否包含完整的：
|
||
```css
|
||
[data-theme="dark"] body { ... }
|
||
[data-theme="dark"] .main { ... }
|
||
[data-theme="dark"] .header { ... }
|
||
```
|
||
|
||
### 问题3：字体加载缓慢
|
||
|
||
**症状：** 文字先显示为系统字体，然后切换为自定义字体
|
||
|
||
**原因：** 字体文件在异步CSS中，加载较晚
|
||
|
||
**解决方案：**
|
||
将字体声明移到critical.css的最前面（已经这样做）
|
||
|
||
---
|
||
|
||
## 📊 性能测试报告模板
|
||
|
||
测试完成后，填写以下报告：
|
||
|
||
### 测试环境
|
||
- 浏览器：Chrome 版本 _______
|
||
- 网络条件：_______ (WiFi / 4G / 3G)
|
||
- Hugo版本：_______
|
||
|
||
### 性能指标对比
|
||
|
||
| 指标 | 优化前 | 优化后 | 提升百分比 |
|
||
|------|--------|--------|-----------|
|
||
| FCP | ____s | ____s | ____% |
|
||
| LCP | ____s | ____s | ____% |
|
||
| TBT | ____ms | ____ms | ____% |
|
||
| Speed Index | ____s | ____s | ____% |
|
||
| Lighthouse得分 | ____/100 | ____/100 | +____ |
|
||
|
||
### 视觉一致性
|
||
- [ ] 首页显示正常
|
||
- [ ] 文章详情页正常
|
||
- [ ] 深色模式正常
|
||
- [ ] 响应式布局正常
|
||
- [ ] 无Console错误
|
||
|
||
### 结论
|
||
- [ ] ✅ 优化成功，可继续第2步
|
||
- [ ] ⚠️ 部分问题，需要修复后再继续
|
||
- [ ] ❌ 严重问题，需要回滚
|
||
|
||
**备注：**
|
||
_______________________________________
|
||
|
||
---
|
||
|
||
## ✅ 第1步完成确认
|
||
|
||
测试通过后，即可继续第2步：**JS按需加载优化**
|
||
|
||
### 下一步优化内容
|
||
1. **Artalk评论系统** - 仅在文章详情页加载
|
||
2. **Echarts图表** - 仅在有图表的页面加载
|
||
3. **弹幕系统** - 按需加载
|
||
4. **UIkit** - 保持始终加载（基础框架）
|
||
|
||
---
|
||
|
||
**文档版本：** v1.0
|
||
**创建日期：** 2026-06-03
|
||
**优化工具：** Claude AI
|