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/zh-TW/5-browser-extension/3-background-tasks-and-perf.../assignment.md

5.0 KiB

分析網站效能

作業概述

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

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

作業說明

選擇一個網站 進行分析—可從以下選項擇一:

  • 您常使用的熱門網站(新聞、社群媒體、電商)
  • 開放原始碼專案網站GitHub pages、文件網站
  • 本地商家網站或個人作品集
  • 您自己的專案或過去課程作業

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

  • 瀏覽器開發者工具 — 使用 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 進行翻譯。雖然我們致力於提供準確的翻譯,但請注意,自動翻譯可能包含錯誤或不準確之處。文件的原始語言版本應視為權威資料來源。對於重要資訊,建議採用專業人工翻譯。我們對因使用此翻譯所產生的任何誤解或誤譯不負任何責任。