優化網站速度，是提升搜尋排名的其中一項因素，也是提升使用者體驗很重要的因素。
Google 提供的 PageSpeed Insights ，是一個很好的指標工具，幫助網頁速度優化。
Google 認為 Core Web Vitals 對於網頁的使用者體驗非常重要，本文將介紹如何使用 PageSpeed Insights、如何讀取 Web Vitals 的相關數據，及評估網站狀況與優化方式，與 pagespeed insights 改善方法。
Table of Contents
什麼是 Google PageSpeed Insights
PageSpeed Insights 是 Chrome 團隊提出的網頁使用者體驗指標，幫助站長評估和優化網站。
PageSpeed Insights 能提供網站速度報表，包含手機和 PC 上顯示的速度、研究資料、網頁診斷和最佳化建議，及各式各樣的優化方法。
點擊 PageSpeed Insights 測試自己的網站。
- 輸入網址，點擊分析。
等一會就會出現評估後的分數。
要在 PageSpeed Insights 拿到滿分很不容易。
這個效能分數是依據 Web Vitals 與權重計算得來，計算的規則和權重在不同的 Lighthouse 版本都有所不同，計算的結果也有所不同，手機和 PC 上的分數也有差別。
計算方式參考: Lighthouse performance scoring
什麼是 Core Web Vitals
Web Vitals 是由 Google 提出，一種可以提升使用者體驗的教學指南，用於評估網站的品質並建議改善方式。
網站的擁有者可以依據幾個重要的指標，幫助優化網站，這最重要的指標就是 Core Web Vitals。
Core Web Vitals 是 Web Vitals 最核心部分，可以應用在所有的網頁上，每一項 Core Web Vitals 都表示使用者體驗的不同面向，是一種可測量且反應現實的使用體驗結果。
這些指標一直都在進展改變，目前著重在三個地方：
- 載入速度 (Loading)
- 互動操作 (Interactivity)
- 顯示穩定 (Visual Stability)
這三個地方可以用下列三個可測量的指標來評估
LCP (Largest Contentful Paint)
測量網頁主要內容經過下載顯示在網頁上的速度。
FID (First Input Delay)
評估網頁完成載入後，可以開始操作的時間。
CLS (Cumulative Layout Shift)
評估網頁的顯示穩定度。
Core Web Vitals 將會是 Google 評估網頁使用體驗的重要指標，也會開始成為 SEO 排名的重要依據之一。
如何優化 LCP FID CLS
Largest Contentful Paint 改善
在很短的時間，快速的將網頁內容顯示出來，是使用者體驗重要的一環。
優化 LCP 就是更快速的顯示網頁內容。
要讓網頁速度加快，第一件事情就是先用 Web Vitals 測量網頁的速度，先知道目前的數據，才知道優化後的效果。
LCP 是測量網頁將主要內容顯示出來，需要多久的時間。
優化方式:
優化 Server
Server 的回應時間快一點，就可以優化 LCP。
加快 Server 回應速度的方式，優化主機的網路頻寬速度、記憶體容量、硬碟速度，都可以加快 Server 回應速度。
- 主機優化
維持 CPU 使用率，使用率如果一直維持在 80% 以上，表示 Server Loading 很重了，可以升級 CPU 或減少同時執行過多程式。
- 使用靜態網頁取代 CMS 系統
CMS 系統需要執行程式讀取資料庫，組成最後的網頁，使用靜態網頁建立網站可以加快回應速度。
- 使用 CDN 服務
- 使用 Cache 機制
優化 JavaScript 與 CSS 載入時間
網頁內容通常有包含外部 JavaScirtp 和 CSS，載入這些檔案時會暫時阻擋網頁內容的載入顯示。
優化方式
- 縮小 JavaScript 和 CSS 檔案
- 只載入畫面需要的樣式和程式碼。
優化其他資源載入時間
網頁中各式各樣的多媒體，通常檔案都比較大，載入時間也比較長。
優化方式:
1. 縮小圖檔大小
2. 壓縮文字檔案
3. 使用自適應圖片載入 (responsive images)
4. 預載資源
5. 使用 Service Worker
使用 Server Side Rendering (後端渲染) 開發網頁
許多網站使用 React 或 Vue 這一類前端開發 Framewrok，這一類工具通常需要在網頁、JavaScript、CSS 載入瀏覽器後再經過 Framework 執行後才能顯示最後的完整網頁。
優化方式:
1. 壓縮最小化 JavaScript
2. 使用 server-side rendering (後端渲染)
3. 使用 Gatsby, Vuepress 這類可以將網頁預先轉換成靜態網頁的工具。
First Contentful Paint 改善
讓網頁載入後，可以快速回應使用者操作。
有時候網頁已完成顯示了，卻對鍵盤和滑鼠的輸入沒反應，表示 FID 需要改善。
優化方式:
- 將執行時間較長的程式，切割成較小的任務來執行。
- 縮小 JavaScript 檔案也有幫助。
- 使用 Web Worker，Web Worker 執行的程式是在背景執行，不會阻斷主執行緒。
- 將 JavaScript 程式切割成一小塊一小塊的程式，只在需要執行的時候動態載入需要的部分。
支援程式切割與動態載入的模組化工具：
或者減少安裝多餘的外掛，或減少使用太多特殊效果的網頁元件，這些都會增加 javascript 檔案的載入和執行時間。
Cumulative Layout Shift 改善
優化 CLS 就是避免網頁佈局突然改變。
有些網頁會動態載入新內容、圖片、廣告、訊息視窗等等，這樣會讓在閱讀網頁的讀者突然迷失內容位置，原本在閱讀的地方，突然變成其它內容。
或是正在網頁操作，原本滑鼠要點擊的地方，突然位置改變。
突然改變的網頁佈局會很明顯降低使用者體驗。
造成 CLS 數據不好的常見原因有:
- 圖片突然載入顯示
- 廣告內容突然顯示
- 動態插入內容
- 載入網頁字型
優化方式:
圖片指定顯示的長寬大小
圖片直接指定長寬大小，未載入前就先留好顯示位置。
預先保留廣告區塊空間
和預留圖片空間一樣，先預留廣告空間，避免突然載入廣告。
不要動態載入內容，除非預留空間顯示
測試 css 屬性 font-display
使用 Web Fonts 會造成兩種網頁佈局偏移的狀況。
第一種狀況是在 Web Fonts 下載後，預設字型突然的和 Web Fonts 交換顯示，造成網頁佈局偏移， 這就是 FOUT (Flash of Unstyled Text)。
第二種狀況是Web Fonts 還沒下載完成前，文字是隱藏著，下載後突然的顯示，這就是 FOIT (Flash of Invisible Text)。
設定 css 字型屬性 font-diaplay: optional 或 swap 可以改善，但還需實際測試，看哪一種效果比較好。
優先使用 css transform 的動畫效果
因為很多 css properties 會觸發網頁重新佈局 (relayout)，避免變動這一類屬性，觸發網頁重新佈局。
參考 CSS Triggers 了解會觸發佈局的屬性。
其他 Web Vitals 指標
其他 Web Vitals 指標可以輔助找出 Core Web Vitals 的問題。
TTFB (Time to Fist Byte)
瀏覽器從 Server 取得第一個位元組資料的時間，時間愈短表示速度愈快。
FCP (Fisrt Contentful Paint)
瀏覽器已載入並顯示最初的內容 (第一張圖或第一個文字、背景等等) 的時間，因為最初的內容可能不是網頁的主要內容， 使用 LCP 更適合評估網頁的使用體驗。
TTI (Time to Interactivity)
TTI 的計算稍微複雜一點，從 FCP 開始，在一個時間內(至少 5 秒)，沒有長時間的程式任務 (大於 50ms 的程式任務) 在執行。
TTI 就是最後一個長時間任務的結束時間。
TBT (Total Blocking TIme)
FCP 和 TTI 之間的時間，表示主要執行緒阻塞的時間，這一段時間訪客無法進行網頁操作。
什麼是 Field Data 和 Lab Data
- Field Data
是真實的使用數據，優化使用體驗的依據。 - Lab Data
實驗數據，是在特定的環境測量而得，不能描述真實的狀況，主要用來除錯，找出問題。
Core Web Vitals 是真實狀況得來的數據，其他 Web Vitals 是 Lab 數據。
效率迷思
速度快就表示使用者體驗非常好
訪客在瀏覽網頁時，會經歷不同時期，從搜尋引擎結果開始，到網頁開始載入，到網頁完成顯示，直到可以開始操作網頁，這些步驟都是體驗的一部分。
使用者體驗是一個對於產品的完整體驗，不是單純一個速度指標可以描述。
實驗環境就能測量出使用者實際體驗
實際的訪客可能使用不同的裝置，手機、平板、PC 等等，他們的網路速度也各不相同，所處的地區也不一樣，所以也不可能由某個特定環境決定所有人的體驗結果。
我開啟自己網站的速度還不錯，表示其他訪客應該也不錯
開發者或網站的主人，通常有更好的網路設備、速度、和裝置，一般來說開啟網頁的效率也會好很多，但實際上訪客並不會有相對一樣好的配備，使用 Filed Data 來觀察實際效率會是較正確的方式。
重點還是使用者體驗，Brian Dean 做了一個實驗，測試網頁的速度是不是影響搜尋排名的主要因素。
實驗結果發現速度並不是 SEO 主要的因素，但速度的確會影響使用者體驗，訪客不喜歡待在速度慢的網站。
用 PageSpeed Insights 測試 CNN 網站的分數
整合 Pagespeed Insights & Chrome
整合 Google PageSpeed Insights 和 Chrome 瀏覽器可以讓你更方便地監控和優化網站性能。以下是一些方法：
使用 Chrome DevTools
- 打開 Chrome 瀏覽器，並進入你想要測試的網站。
- 右鍵單擊頁面，選擇 “檢查” 以打開 Chrome DevTools。
- 在 DevTools 面板中，轉到 “Lighthouse” 標籤。
- 選擇你想要運行的審查類型（例如，”性能”、”可訪問性” 等），然後點擊 “生成報告”。
使用 Chrome 擴充功能
- 在 Chrome 網上應用商店中搜索 “PageSpeed Insights” 或類似的擴充功能。
- 安裝擴充功能後，你可以直接從瀏覽器工具欄快速訪問 PageSpeed Insights。
使用 API
- 你也可以使用 PageSpeed Insights API 來整合到你的開發工作流程。
- 這允許你自動化性能測試並將結果整合到其他工具或報告中。
透過這些方法，你可以更容易地將 PageSpeed Insights 整合到 Chrome 瀏覽器中，從而更有效地監控和改善網站性能。
其它優化工具
Web Vitals
Web Vitals – Chrome 線上應用程式商店
Google Chrome 的延伸外掛，直接測量網頁的 LCP、CLS、FID 數據。不用到 PageSpeed Insights 網頁測試，很方便的工具。
Google Search Console 也有提供網站使用體驗核心指標報告，但網站瀏覽量不夠多，就不會產生報告。
現在很多瀏覽器，和開發工具都已開始支援測量 Core Web Vitals。
WEBPAGETEST
- 輸入網址
- 選擇測試的地點
- 選擇測試的瀏覽器
點擊【START TEST】等待結果。
WEBPAGETEST 特別的地方在於多提供一個安全性分數，檢查 HTTP security headers，與檢查網站是否有脆弱易受攻擊的 Javascript Library。
GtMetrix
輸入網址，等待測試結果。
實際優化結果
這些工具的測量地點、方式、數據結果都不太相同，有些數據會讓你沮喪，有些會讓你開心，最後的重點還是內容與讀者。
這裡的優化方式很簡單：
- 使用 LiteSpeed Web Server 架設網站。
- 安裝 LiteSpeed Cache 外掛。
- 依據 Core Web Vitals 規則慢慢調整。
測試數據會上上下下 ，有時候速度突然調整到非常快，但網頁卻顯示不正確。
如果搭配 QUIC.cloud CDN，並啟用所有可以加快速度的選項，啟用 Guest Mode、Guest Optimization、JS Combine、CSS Combine 這些比較容易出錯的選項，測試還真的可以達到 100 分，但實際開啟網站看看，就會發現網頁爆炸了。
還是穩定之中慢慢改善就好。
常見問題
1. PageSpeed Insights 是否也適用於移動裝置？
是的，PageSpeed Insights 提供桌面和移動裝置的速度報告，讓您能全面了解網站性能。
2. 我是否需要專業的網頁開發知識來使用 PageSpeed Insights？
不一定。PageSpeed Insights 的介面相對用戶友好，並提供易於理解的建議。然而，執行某些優化可能需要專業知識。
3. Web Vitals 和 SEO 有什麼關係？
Google 已經確認，Web Vitals 是其搜尋排名算法的一部分。因此，優化這些指標可能有助於提高您的 SEO 排名。
4. PageSpeed Insights 提供的優化建議是否一定能提高網站速度？
優化建議通常是基於一般最佳實踐，但每個網站都是獨特的。網站依建議改善後，建議再次測試以確保它們達到預期效果。
5. 如果我的網站使用第三方插件和廣告，這會影響我的 Web Vitals 分數嗎？
是的，第三方代碼可能會影響您的網站性能和 Web Vitals 分數。建議定期檢查和優化這些元素。
6. 如何改善我的 PageSpeed Insights 分數？
分數可以通過多種方式來改善，包括圖像優化、使用 CDN、減少服務器響應時間等。PageSpeed Insights 會提供具體的優化建議。
7. Web Vitals 指標會不會隨著時間而變化？
會的，Google 會根據使用者體驗的變化和新的研究數據來更新這些指標。因此，建議定期檢查您的網站性能。
