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.
Web-Dev-For-Beginners/translations/mo/5-browser-extension/3-background-tasks-and-perf.../assignment.md

5.3 KiB

分析網站效能

作業概述

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

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

作業指導

選擇一個網站進行分析 - 請選擇以下選項之一:

  • 您經常使用的熱門網站(新聞網站、社交媒體、電子商務)
  • 開源項目網站GitHub頁面、文件網站
  • 本地商業網站或作品集網站
  • 您自己的項目或之前的課程作業

進行多工具分析,至少使用三種不同的方法:

  • 瀏覽器開發者工具 - 使用 Chrome/Edge 的效能標籤進行詳細分析
  • 線上審核工具 - 嘗試使用 Lighthouse、GTmetrix 或 WebPageTest
  • 網路分析 - 檢查資源加載、文件大小和請求模式

在詳細報告中記錄您的發現,報告應包括:

效能指標分析

  • 加載時間測量,來自多個工具和不同角度
  • 核心網頁指標分數LCP、FID、CLS及其影響
  • 資源分解,顯示哪些資產對加載時間影響最大
  • 網路瀑布分析,識別阻塞資源

問題識別

  • 具體的效能瓶頸,附有支持數據
  • 根本原因分析,解釋每個問題的成因
  • 用戶影響評估,描述問題如何影響真實用戶
  • 問題優先級排序,根據嚴重性和修復難度進行排名

優化建議

  • 具體且可行的改進措施及預期影響
  • 每項建議變更的實施策略
  • 可應用的現代最佳實踐(延遲加載、壓縮等)
  • 持續效能監控的工具和技術

研究要求

不要僅依賴瀏覽器工具 - 擴展您的分析範圍,使用:

第三方審核服務:

專門分析工具:

交付格式

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