|
|
<!--
|
|
|
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) 進行翻譯。儘管我們致力於提供準確的翻譯，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。 |
