# 分析网站性能

## 任务概述

性能分析是现代网页开发者的一项关键技能。在本任务中，你将使用浏览器内置工具和第三方服务，对一个真实网站进行全面的性能审计，识别性能瓶颈并提出优化策略。

你的任务是提交一份详细的性能报告，展示你对网页性能原理的理解以及有效使用专业分析工具的能力。

## 任务说明

**选择一个网站**进行分析——可从以下选项中选择：
- 你经常使用的热门网站（新闻站点、社交媒体、电商）
- 开源项目网站（GitHub Pages、文档站点）
- 本地商家网站或个人作品集
- 你自己的项目或以往课程作业

**多工具分析**，至少使用三种不同的方法：
- **浏览器开发者工具**——使用 Chrome/Edge 的 Performance 选项卡进行详细性能分析
- **在线审计工具**——尝试 Lighthouse、GTmetrix 或 WebPageTest
- **网络分析**——检查资源加载、文件大小和请求模式

**在报告中详细记录发现内容**，应包含：

### 性能指标分析
- 多工具、多角度的**加载时间测量**
- **核心网页指标**得分（LCP、FID、CLS）及其影响
- **资源细分**，显示哪些资源对加载时间贡献最大
- **网络瀑布图分析**，识别阻塞资源

### 问题识别
- **具体性能瓶颈**，并附带数据支持
- **根本原因分析**，解释问题产生原因
- **用户影响评估**，描述问题如何影响真实用户体验
- **优先级排序**，基于严重程度和修复难度排列问题优先级

### 优化建议
- **具体可行的改进措施**及预期效果
- **每项改进的实施方案**
- 可采用的**现代最佳实践**（懒加载、压缩等）
- **持续性能监控**的工具和技术

## 研究要求

**不要仅依靠浏览器工具**，扩展分析使用：

**第三方审计服务：**
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) — 综合审计
- [GTmetrix](https://gtmetrix.com/) — 性能和优化洞察
- [WebPageTest](https://www.webpagetest.org/) — 真实环境测试
- [Pingdom](https://tools.pingdom.com/) — 全球性能监控

**专业分析工具：**
- [Bundle Analyzer](https://bundlephobia.com/) — JavaScript 包大小分析
- [Image optimization tools](https://squoosh.app/) — 资源优化机会
- [Security headers analysis](https://securityheaders.com/) — 安全性能影响

## 成果格式

制作一份专业报告（2-3 页），包含：

1. **执行摘要** — 关键发现和建议概述
2. **方法论** — 使用的工具和测试方法
3. **当前性能评估** — 基线指标和测量结果
4. **识别的问题** — 详细的问题分析和数据支持
5. **建议方案** — 优先级改进策略
6. **实施路线图** — 逐步的优化计划

**包含视觉证据：**
- 性能工具及指标的截图
- 显示性能数据的图表
- 可能的前后对比
- 网络瀑布图和资源细分图

## 评分标准

| 标准 | 优秀 (90-100%) | 及格 (70-89%) | 有待改进 (50-69%) |
| -------- | ------------------- | ----------------- | -------------------------- |
| **分析深度** | 使用4+工具的全面分析，包含详细指标、根因分析和用户影响评估 | 使用3个工具，有清晰指标和基本问题识别 | 使用2个工具，分析浅显，问题识别有限 |
| **工具多样性** | 使用浏览器工具+3个以上第三方服务，包含比较分析和洞察 | 使用浏览器工具+2个第三方服务，有一定比较分析 | 使用浏览器工具+1个第三方服务，比较有限 |
| **问题识别** | 识别5个以上具体性能问题，包含详细根因分析和量化影响 | 识别3-4个性能问题，具备良好分析及部分影响测量 | 识别1-2个性能问题，分析基础 |
| **建议方案** | 提供具体、可行建议，附实施细节、预期效果及现代最佳实践 | 提供良好建议，含部分实施指导和预期成果 | 提供基础建议，实施细节有限 |
| **专业呈现** | 报告结构清晰，层次分明，附视觉证据和执行摘要，格式专业 | 报告组织良好，有部分视觉证据和清晰结构 | 组织基础，视觉证据有限 |

## 学习成果

完成本任务后，你将能：
- **应用**专业性能分析工具和方法
- **识别**基于数据分析的性能瓶颈
- **分析**代码质量与用户体验之间的关系
- **推荐**具体且可实施的优化方案
- **以专业格式**传达技术发现

该任务加深了你对课程中性能概念的理解，同时培养了你在网页开发职业生涯中将持续用到的实用技能。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：  
本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们致力于保证准确性，但请注意自动翻译可能存在错误或不准确之处。原始文件的原语言版本应被视为权威来源。对于关键信息，建议采用专业人工翻译。对于因使用本翻译导致的任何误解或误读，我们不承担任何责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->