用Google Page Speed Insights優化檢測你的網站速度！

前言

品牌在建立自己的官網前，除了視覺化的 網頁設計 、網頁排版之外，也要將「 網站速度 」這點考量進去，因為 網站速度 跟 使用者體驗 有高度關聯。
設想一下，當品牌好不容易藉由 數位行銷 將客人帶進官網，結果發現只要在品牌官網執行一個動作就要 Loading 很久，想必對這個網站不會留下什麼好印象，最終的結果就是造成客戶的流失，因此，提升網站速度就成為經營網站必須做的功課之一，而以下就用 Google Page Speed Insights 這個工具教學如何優化網站速度，增加網頁運轉效能，進而提供客戶良好的使用體驗。（延伸閱讀：運用網格設計增加使用者體驗）

Google Page Speed Insights 是什麼？

 Google Page Speed Insights 是一款常用於檢測網站速度的工具，是由Google開發團隊所製作，只要將網址放入測試軟體中，系統就會針對該網址分別在「電腦」以及「行動裝置」提供 網站速度 相關資訊，包含「 網站體驗核心指標 」以及「 效能診斷 」。
網站擁有者可以透過這兩項檢測網站速度指標，利用實際數據去檢測自身的網站到底快或慢，具體知道網站速度改如何優化。

Google Page Speed Insights 指標

網站體驗核心指標（Core Web Vitals）

網站體驗核心指標 會蒐集網站在過去28天內的三組數據（LCP、FID、CLS），進而評估該網址劃分不同的等級：「優良的網址」、「待改善的網址」、「不良的網址」

LCP（Largest Contentful Paint）：計算網頁中最大元件載入時花費的時間，例如一個網址中有一張尺寸較大的圖片，這個圖片也是需要載入時間最久的元件，LCP就會計算載完這張圖所需要的時間。
FID（First Input Delay）：當使用者進入網頁，並在該網頁進行的第一個互動中，可能是點了連結、按鈕、上傳資料…等，網頁需要花多久的時間才能反應使用者的互動，簡單來說，這是一個Google衡量網頁跟用戶「互動性」的指標。
CLS（Cumulative Layout Shift）：又稱為「累計版面配置轉移」，當網頁中的元素載入時，很容易因為網頁速度不穩造成畫面跳動，為了視覺的「穩定性」並且提供給使用者良好的網站體驗，CLS越低越好。
優良網址 待改善網址 不良網址

效能診斷（Performance diagnostics）

 Google Page Speed Insights 結合 Lighthouse 分析模擬網站在FCP、LCP、CLS…等指標權重後，給予檢測的網址一個分數，如果計算出來的分數介於0-50分，則會顯示「紅色」，代表網頁還有多處需要加強；分數介於5-89分，則會顯示「橘色」；分數超過90分，則會顯示「綠色」，代表是優良的網址。
雖然效能診斷是透過「模擬」的環境進行測試，但是仍然網站擁有者然仍可以根據提供的指標項目進行優化，讓網頁更符合Google網頁速度的標準。

Google Page Speed Insights 教學

1. 至 Google Page Speed Insights 填入網址

2. 查看該網址在「電腦」以及「行動裝置」的成效

3. 查看網站體驗核心指標

4. 查看效能診斷分數

5. 針對優化建議做網址改善

Google Page Speed Insights 整體結論

網站速度 是每一個經營網站者本身必須考量的問題，除了用「體感」的方式感受網頁速度之外，  Google Page Speed Insights 提供了數據、指標來評估網頁快與慢，讓網頁經營者在優化上可以更有方向。
一個對於 Google 來說使用者體驗優良、網頁速度快，也會有助於在 SEO 上的排名，Google也會更願意推薦該網站在指定搜尋結果中，不過即便如此，也要提醒 Google Page Speed Insights 只是一個參考的數據指標，在進行網頁速度優化時，也要搭配其他網站速度監測的軟體同步進行，讓網頁速度的優化效果更加全面。（延伸閱讀：SEO教學；運用內容行銷做SEO）
如果對於網站速度或是自家網站在 Google Page Speed Insights 數字有任何疑問，都歡迎與我們 展曜網頁設計 聊聊，我們將提供您最完整的 網頁速度優化 建議。