<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
  "translation_date": "2025-10-22T22:56:21+00:00",
  "source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
  "language_code": "mo"
}
-->
# 分析網站效能

## 作業概述

效能分析是現代網頁開發者的重要技能。在這項作業中，您將對一個真實網站進行全面的效能審核，使用瀏覽器工具和第三方服務來識別瓶頸並提出優化策略。

您的任務是提供一份詳細的效能報告，展示您對網頁效能原則的理解以及有效使用專業分析工具的能力。

## 作業指導

**選擇一個網站**進行分析 - 請選擇以下選項之一：
- 您經常使用的熱門網站（新聞網站、社交媒體、電子商務）
- 開源項目網站（GitHub頁面、文件網站）
- 本地商業網站或作品集網站
- 您自己的項目或之前的課程作業

**進行多工具分析**，至少使用三種不同的方法：
- **瀏覽器開發者工具** - 使用 Chrome/Edge 的效能標籤進行詳細分析
- **線上審核工具** - 嘗試使用 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 包大小分析
- [圖片優化工具](https://squoosh.app/) - 資產優化機會
- [安全標頭分析](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個效能問題，僅提供基本分析 |
| **建議** | 提供具體、可行的建議，附有實施細節、預期影響和現代最佳實踐 | 提供良好的建議，附有部分實施指導和預期結果 | 提供基本建議，實施細節有限 |
| **專業呈現** | 報告結構清晰，包含視覺證據、摘要和專業格式 | 結構良好，包含部分視覺證據和清晰的結構 | 結構基本，視覺證據最少 |

## 學習成果

完成此作業後，您將展示以下能力：
- **應用**專業效能分析工具和方法
- **識別**效能瓶頸，基於數據進行分析
- **分析**程式碼品質與用戶體驗之間的關係
- **建議**具體且可行的優化策略
- **溝通**以專業格式傳達技術發現

此作業加強了課程中學到的效能概念，同時培養了您在網頁開發職業生涯中將持續使用的實用技能。

---

**免責聲明**：  
此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。