Web-Dev-For-Beginners/translations/zh-TW/5-browser-extension/3-background-tasks-and-perf.../assignment.md

# 分析網站效能

## 作業概述

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

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

## 作業說明

**選擇一個網站** 進行分析—可從以下選項擇一：
- 您常使用的熱門網站（新聞、社群媒體、電商）
- 開放原始碼專案網站（GitHub pages、文件網站）
- 本地商家網站或個人作品集
- 您自己的專案或過去課程作業

**進行多工具分析**，至少使用三種不同方法：
- **瀏覽器開發者工具** — 使用 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個效能問題，僅基本分析 |
| **建議方案** | 提出具體可行建議，含實作細節、預期效果及現代最佳實務 | 提供良好建議，有部分實作指引與預期成果 | 所提建議基礎，缺乏詳細實作說明 |
| **專業呈現** | 井然有序報告，結構清晰、視覺證據、執行摘要及專業格式 | 組織良好，部分視覺證據與結構清楚 | 組織基本，視覺證據有限 |

## 學習目標

完成此作業，您將展現能夠：
- **運用**專業效能分析工具與方法論
- **識別**以資料為依據的效能瓶頸
- **分析**程式碼品質與使用者體驗的關聯
- **建議**具體且可行的優化策略
- **以專業格式**溝通技術性發現

此作業將強化課程中所學效能概念，並培養您在網站開發職涯中會用到的實務技能。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件係使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。文件的原始語言版本應視為權威資料來源。對於重要資訊，建議採用專業人工翻譯。我們對因使用此翻譯所產生的任何誤解或誤譯不負任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->