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

5.1 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 進行翻譯。雖然我們致力於確保翻譯準確,但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資訊,建議聘請專業人工翻譯。我們不承擔因使用本翻譯而產生的任何誤解或誤釋之責任。