PageSpeed Insights入門、網頁速度影響及指標解釋
「要提升網站的Google排名，最應該先做什麼？」，答案雖然很多，但永遠只有一個項目最為重要，那就是 Page Speed（ 網頁速度 ）。
想像一下，您走進一家裝潢精美的商店，但門口卻卡住了，要費九牛二虎之力才能推開，或者進店後，想看的商品被層層包裹，要等店員慢吞吞地拆開。您會不會感到不耐煩，甚至直接轉身離開？
網站速度就是您網站的「大門」與「服務效率」。在現今這個凡事講求效率的數位時代，用戶的耐心極其有限。一個緩慢的網站不僅會趕走潛在客戶，更會被Google視為「用戶體驗不佳」的信號，從而影響您的搜索排名。
為何 網頁速度 （Page Speed） 如此重要？
1. 用戶體驗 (User Experience, UX)：
- 當頁面加載時間從1秒增加到3秒，訪客跳出率（Bounce Rate）會增加32%。
- 當加載時間增加到5秒，跳出率會飆升至90%。
2. SEO 排名 (Search Engine Optimization Ranking)：
Google的終極目標是為用戶提供最優質、最相關的搜索結果。而「優質」的定義中，用戶體驗是重中之重。早在2010年，Google就已將桌面版網站速度納入排名因素；到了2018年，更進一步將移動版網站速度也納入考量。
2021年，Google推出了「核心網頁體驗指標」（Core Web Vitals），將加載速度、互動性和視覺穩定性這三項與速度相關的指標，正式變為影響排名的關鍵因素。簡單來說，在內容質量相當的情況下，速度更快的網站將獲得更優先的排名機會。
3. 轉換率 (Conversion Rate)：
對於電商、內容網站或任何期望用戶採取特定行動（如註冊、下載、填寫表單）的網站而言，速度就是金錢。
更快的速度 → 更低的跳出率 → 更高的用戶參與度 → 更好的SEO排名 → 更多的自然流量 → 更高的轉換率。
這個鏈條關係非常清晰。Amazon曾做過研究，網站延遲僅100毫秒（0.1秒），就會導致銷售額下降1%。Walmart也發現，每改善1秒的加載速度，轉換率就會提升2%。無論您的網站目標為何，速度都是實現目標的加速器。
您的免費測速神器：PageSpeed Insights (PSI)
- 在瀏覽器中打開 PageSpeed Insights 網站。(https://pagespeed.web.dev)
- 在輸入框中貼上您想分析的網頁URL。(https://www.technogicc.com)
- 點擊「分析」按鈕。
Pagespeed insights 有行動裝置及電腦的分析
PSI報告頂部會顯示兩種數據，理解它們的區別很重要：
- 研究室資料 (Lab Data)：這是PSI在一個受控環境下模擬加載您的頁面所測得的數據。它使用固定的網絡和設備配置，結果穩定，非常適合在開發和調試過程中發現問題。我們後續解析的大部分指標都屬於此類。
- 實際使用者資料 (Field Data)：這是來自真實用戶在過去28天內瀏覽您網站時的匿名數據集合（源自Chrome用戶體驗報告）。它反映了在各種不同網絡、設備和地理位置下的真實性能。只有當您的網站流量足夠大時，才會顯示此數據。Google的「核心網頁體驗指標」排名信號，主要就是基於此數據。
解讀 PSI 報告：核心指標全解析
- 0-49 (紅色)：差，急需優化。
- 50-89 (橘色)：中等，有改進空間。
- 90-100 (綠色)：良好。
核心網頁體驗指標 (Core Web Vitals, CWV)
1. Largest Contentful Paint (LCP) – 最大內容繪製
- 這是什麼？：從用戶點擊連結開始，到頁面上最大的圖片、影片或文字區塊被完整顯示出來所需的時間。
- 簡單比喻：就像您翻開一本雜誌，LCP是您看到最醒目的主圖或標題所花的時間。它告訴用戶：「你來對地方了，主要內容就在這裡。」
- 影響：衡量加載性能。一個好的LCP能迅速給予用戶視覺回饋，讓他們感覺頁面正在快速加載。
良好：< 2.5秒
需要改善：2.5秒 – 4秒
差：> 4秒
2. Interaction to Next Paint (INP) – 互動至下一次繪製 (取代了FID)
- 這是什麼？：衡量用戶在頁面上的所有互動（點擊按鈕、打開選單、輸入文字等）後，頁面給予視覺反饋的及時性。它評估的是頁面的整體響應能力。
- 簡單比喻：就像您按下電燈開關，燈泡立即亮起的反應時間。如果按下後要等一會兒燈才亮，您會覺得這個開關「卡頓」或「壞了」。INP就是衡量網站上的按鈕、連結等元素是否「靈敏」。
- 影響：衡量互動性。低的INP意味著頁面流暢不卡頓，用戶操作能得到即時反饋。
良好：< 200毫秒
需要改善：200毫秒 – 500毫秒
差：> 500毫秒
3. Cumulative Layout Shift (CLS) – 累計版面配置轉移
- 這是什麼？：衡量在頁面加載過程中，可見元素的非預期性移動程度。
- 簡單比喻：這是最惱人的一種體驗！您正準備點擊一個「購買」按鈕，突然頁面頂部加載出一張大圖片，把整個頁面往下推，結果您的手指點到了一個「取消」按鈕或廣告。CLS就是量化這種「頁面跳動」的程度。
- 影響：衡量視覺穩定性。低的CLS意味著頁面佈局穩定，不會在用戶閱讀或互動時突然跳動，造成誤點。
良好：< 0.1
需要改善：0.1 – 0.25
差：> 0.25
如何採取行動？
PSI最利害的地方在於，它不僅告訴您「哪裡痛」，還會開出「藥方」。報告下方的「INSIGHTS」和「診斷」部分就是具體的優化建議。
INSIGHTS 這部分列出了一些立即可行的優化建議，並預估完成後能節省多少加載時間。對於初學者，應優先關注這裡。常見建議包括：
- 提供新一代格式的圖片：將JPEG/PNG圖片轉換為WebP或AVIF等更小、更高效的格式。（可參閱此文章）
- 縮減圖片大小：壓縮圖片，降低其文件大小。
- 移除未使用的 JavaScript/CSS：刪除頁面中加載了但並未實際用到的代碼。
- 啟用文字壓縮：在伺服器端啟用Gzip或Brotli壓縮，減少HTML、CSS、JS文件在傳輸時的大小。
診斷 (Diagnostics)：這部分提供更多關於應用程式性能的深入資訊，更偏向技術層面，可以交給您的網站開發人員來處理。
網頁速度 優化是一場永無止境的旅程
- 速度是王道：它同時影響用戶體驗、SEO排名和商業轉換，是網站成功的基石。
- 善用PSI：定期使用PageSpeed Insights檢測您的重要頁面，將其作為您的健康檢查工具。
- 關注核心：不要盲目追求100分。優先將「核心網頁體驗指標」（LCP, INP, CLS）優化到「良好」的綠色區間，這對SEO的幫助最大。
- 從「機會」著手：根據PSI提供的「機會」建議，一步步進行優化。從圖片優化等簡單項目開始，您就能看到顯著的成效。
