You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
5.3 KiB
5.3 KiB
分析網站效能
作業概述
效能分析是現代網頁開發者的重要技能。在這項作業中,您將對一個真實網站進行全面的效能審核,使用瀏覽器工具和第三方服務來識別瓶頸並提出優化策略。
您的任務是提供一份詳細的效能報告,展示您對網頁效能原則的理解以及有效使用專業分析工具的能力。
作業指導
選擇一個網站進行分析 - 請選擇以下選項之一:
- 您經常使用的熱門網站(新聞網站、社交媒體、電子商務)
- 開源項目網站(GitHub頁面、文件網站)
- 本地商業網站或作品集網站
- 您自己的項目或之前的課程作業
進行多工具分析,至少使用三種不同的方法:
- 瀏覽器開發者工具 - 使用 Chrome/Edge 的效能標籤進行詳細分析
- 線上審核工具 - 嘗試使用 Lighthouse、GTmetrix 或 WebPageTest
- 網路分析 - 檢查資源加載、文件大小和請求模式
在詳細報告中記錄您的發現,報告應包括:
效能指標分析
- 加載時間測量,來自多個工具和不同角度
- 核心網頁指標分數(LCP、FID、CLS)及其影響
- 資源分解,顯示哪些資產對加載時間影響最大
- 網路瀑布分析,識別阻塞資源
問題識別
- 具體的效能瓶頸,附有支持數據
- 根本原因分析,解釋每個問題的成因
- 用戶影響評估,描述問題如何影響真實用戶
- 問題優先級排序,根據嚴重性和修復難度進行排名
優化建議
- 具體且可行的改進措施及預期影響
- 每項建議變更的實施策略
- 可應用的現代最佳實踐(延遲加載、壓縮等)
- 持續效能監控的工具和技術
研究要求
不要僅依賴瀏覽器工具 - 擴展您的分析範圍,使用:
第三方審核服務:
- Google Lighthouse - 全面審核
- GTmetrix - 效能和優化洞察
- WebPageTest - 真實世界測試條件
- Pingdom - 全球效能監控
專門分析工具:
- Bundle Analyzer - JavaScript 包大小分析
- 圖片優化工具 - 資產優化機會
- 安全標頭分析 - 安全效能影響
交付格式
撰寫一份專業報告(2-3頁),包括:
- 摘要 - 關鍵發現和建議概述
- 方法論 - 使用的工具和測試方法
- 當前效能評估 - 基準指標和測量結果
- 識別的問題 - 詳細的問題分析及支持數據
- 建議 - 按優先級排序的改進策略
- 實施路線圖 - 步驟式優化計劃
包含視覺證據:
- 效能工具和指標的截圖
- 顯示效能數據的圖表或圖形
- 可能的前後比較
- 網路瀑布圖和資源分解
評分標準
| 評分標準 | 卓越 (90-100%) | 合格 (70-89%) | 需改進 (50-69%) |
|---|---|---|---|
| 分析深度 | 使用4種以上工具進行全面分析,提供詳細指標、根本原因分析和用戶影響評估 | 使用3種工具進行良好分析,提供清晰指標和基本問題識別 | 使用2種工具進行基本分析,深度有限,問題識別最少 |
| 工具多樣性 | 使用瀏覽器工具 + 3種以上第三方服務,提供比較分析和每種工具的洞察 | 使用瀏覽器工具 + 2種第三方服務,提供部分比較分析 | 使用瀏覽器工具 + 1種第三方服務,比較有限 |
| 問題識別 | 識別5個以上具體效能問題,提供詳細的根本原因分析和量化影響 | 識別3-4個效能問題,提供良好分析和部分影響測量 | 識別1-2個效能問題,僅提供基本分析 |
| 建議 | 提供具體、可行的建議,附有實施細節、預期影響和現代最佳實踐 | 提供良好的建議,附有部分實施指導和預期結果 | 提供基本建議,實施細節有限 |
| 專業呈現 | 報告結構清晰,包含視覺證據、摘要和專業格式 | 結構良好,包含部分視覺證據和清晰的結構 | 結構基本,視覺證據最少 |
學習成果
完成此作業後,您將展示以下能力:
- 應用專業效能分析工具和方法
- 識別效能瓶頸,基於數據進行分析
- 分析程式碼品質與用戶體驗之間的關係
- 建議具體且可行的優化策略
- 溝通以專業格式傳達技術發現
此作業加強了課程中學到的效能概念,同時培養了您在網頁開發職業生涯中將持續使用的實用技能。
免責聲明:
此文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們致力於提供準確的翻譯,請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息,建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。