# 分析網站效能

## 作業概述

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

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

## 作業指示

**選擇一個網站** 進行分析 — 可從以下選項中挑選：
- 您經常使用的熱門網站（新聞網站、社群媒體、電商平台）
- 開源專案網站（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 包大小分析
- [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 -->