• 理解「效能」對使用者體驗、商業成果與搜尋排名的實際影響。

  • 建立一張「從輸入網址到頁面可互動」的完整心智地圖，並知道每個階段對應本講義的哪一章。

  • 分辨與，理解 p75 與 28 天滾動視窗的意義。

  • 認識本課程會用到的工具：Chrome DevTools、Lighthouse、PageSpeed Insights、CrUX、 套件。

效能不是「跑分」，而是使用者的感受

當我們說一個網頁「慢」，其實通常包含好幾種不同的感受：

  • 點下連結後，畫面一片空白，不知道「有沒有在動」。

  • 畫面出現了一些東西，但最重要的內容（主圖、標題、商品資訊）還沒出來。

  • 內容看得到，但點按鈕、打字卻沒有反應，或者反應很慢。

  • 正要點某個按鈕，版面突然跳動，結果點到廣告。

Google 的 Web Vitals 計畫把這些感受整理成四個問題，並替每個問題設計了可量化的指標：

L3.6cm L6.2cm L4.6cm 使用者的問題 & 對應的體驗面向 & 對應指標
它有在動嗎？ & 導覽是否成功開始、伺服器是否有回應 & TTFB、FP、FCP
它有用嗎？ & 主要內容是否已經呈現 & LCP（過去是 FMP）
它能用嗎？ & 使用者可否與頁面互動且得到即時回饋 & INP（過去是 FID）、TBT
它令人愉悅嗎？ & 互動流暢、版面穩定、沒有卡頓 & CLS、動畫流暢度

這張表是整本講義的骨架。會逐一定義這些指標，會深入探討如何診斷與優化。

  1. 使用者體驗與商業成果：載入時間與跳出率、轉換率高度相關。業界大量案例顯示，LCP 每改善數百毫秒，就能觀察到轉換率提升；而 INP 不佳（互動卡頓）會直接造成使用者放棄操作。

  2. 搜尋排名（Page Experience）：Google 將 Core Web Vitals（LCP、INP、CLS）納入排名訊號，並在 Search Console 中以「良好 / 待改善 / 不佳」呈現。

  3. 工程品質：效能是「系統性」的問題，牽涉網路、瀏覽器、伺服器與程式架構。學會量測與診斷，等於學會用瀏覽器的角度理解自己的程式。

一張地圖：從輸入網址到頁面可互動

圖 0.1 是本課程的整體地圖。橫軸是時間，每個階段都可能成為瓶頸，也都有對應的量測方式與優化手段。

max width=

課程地圖：頁面載入的各階段與對應章節

實驗室數據 vs. 真實使用者數據

學效能的第一個觀念轉變，是理解「我在自己電腦上測的數字」和「使用者實際體驗到的數字」是兩回事。

  • 實驗室數據（Lab data）：在受控環境（固定裝置、固定網速、無快取）下由工具（Lighthouse、WebPageTest、DevTools）產生。可重現、適合除錯，但無法反映真實使用者的裝置與網路分布。

  • 真實使用者數據（Field data / RUM，Real User Monitoring）：由真實使用者的瀏覽器回報。Google 的 是最廣為使用的公開資料集，也是 Search Console 與 PageSpeed Insights 顯示 Core Web Vitals 狀態的來源。

為什麼是 p75？

Core Web Vitals 的評分採用第 75 百分位數（p75）：把某個頁面在 28 天內所有真實造訪的 LCP 值排序，取第 75% 位置的值。這代表「至少 75% 的使用者體驗到的 LCP 不超過這個值」。這個設計刻意偏向「較差的那一端」：頁面在你的高階筆電加光纖上很快沒有意義，它必須在四分之三的使用者手上（包含中階手機加不穩定的行動網路）也夠快。

  • Lighthouse 拿到 100 分，不代表 Search Console 會通過 Core Web Vitals。Lighthouse 是實驗室數據；Core Web Vitals 評分看的是 CrUX 的真實使用者 p75。

  • 反過來，某些互動指標（FID、INP）只能在真實使用者環境量測，因為實驗室沒有真人互動。Lighthouse 用 TBT（Total Blocking Time）當作互動性的代理指標。

  • 三個 Core Web Vitals 必須全部達到「良好」，該 URL 群組才算通過。

本課程使用的工具

L3.4cm L2.2cm L8.6cm 工具 & 資料類型 & 用途
Chrome DevTools Performance 面板 & 實驗室 & 錄製 trace、看主執行緒火焰圖、LCP/INP/CLS 子部分、Insights（）
Chrome DevTools Network 面板 & 實驗室 & 檢查每個請求的 DNS/連線/TTFB/下載時間、快取狀態、協定
Lighthouse & 實驗室 & 自動化稽核、分數與建議；PSI 與 DevTools 內建
PageSpeed Insights（PSI） & 兩者 & 同時顯示 CrUX 真實數據與 Lighthouse 實驗室數據
CrUX Dashboard / API & 真實使用者 & 查詢任何有足夠流量之網站的 p75 指標與歷史趨勢
套件 & 真實使用者 & 在自己的網站收集 LCP/INP/CLS 並回傳到分析系統（）
Performance API & 兩者 & 瀏覽器原生 API，是所有上述工具的資料來源（）
WebPageTest & 實驗室 & 多地區、多裝置的瀑布圖與影片比較

建議的上課順序

本講義依主題分章，可依需求跳讀。若以「先理解指標與工具，再深入各項優化」為原則，建議順序如下：

  1. 第一堂（本次重點）：效能指標總覽 \(\rightarrow\) Web Vitals 深入 \(\rightarrow\) DevTools Performance 面板實戰。目標是能自己錄一段 trace、找出 LCP 元素、看懂 INP 與 CLS 的成因。

  2. 第二堂：fetch 之前瀏覽器在做什麼（RTT、DNS/TCP/TLS、HTTP/3）\(\rightarrow\) Performance API（Navigation / Resource Timing、PerformanceObserver）。

  3. 第三堂：快取策略 \(\rightarrow\) Service Worker \(\rightarrow\) CDN。這三章合起來回答「如何讓資源更快到達瀏覽器」。

  4. 第四堂：伺服器端渲染與渲染策略，把前面所有指標串起來，討論架構層級的取捨。

每章結尾都有「課堂實作」與「思考題」，附錄 [ch:appendix] 另有詞彙表、綜合練習與參考資料。

  • 效能指標是使用者感受的量化：「有在動嗎、有用嗎、能用嗎、愉悅嗎」。

  • Core Web Vitals 目前是 LCP、INP、CLS 三項，以真實使用者 28 天 p75 評分。

  • 實驗室數據用來除錯與重現，真實使用者數據用來評估與排序優先順序，兩者缺一不可。

  • 整條載入流程的每個階段都對應到本講義的某一章，請把圖 0.1 當成導航。