不懂程式也能上手! 如何評量 WordPress 網站的效能狀態 – Google PageSpeed Insights

覺得網站好像有點慢,可是卻又沒辦法精準描述出是慢在什麼環節嗎?相信這個問題一定是很多網站經營者,尤其是 WordPress 網站經營者經常碰到的困擾。但是當我們和網頁設計的工程師溝通時,對方通常會希望我們能明確的告知問題與需求。如果沒有辦法情確的告知想要改善的範圍和目標,工程師也很難精準的對症下藥解決問題。

如何量化網站效能

要有效的和工程師溝通解決問題,首先我們得先知道要如何有效的描述問題。光是一句:網站速度有點慢。這樣的描述內容絕對是不夠的!我們必需要能夠更明確的講出類似「圖片載入的速度有點慢」、「打開網站後要等很久才能操作」或是「等超過三秒才看到第一個畫面」諸如此類的描述內容。而且我們最好能夠提供工程師我們在操作時的環境,比方說:「使用手機在4G網路環境,首頁上方的輪播區塊要等很久才有辦法操作」

要能夠做到如此細節和精準的描述,其實這並不是一件容易的事情。所以市面上也出現了許多不同類型的工具,可以幫助網站經營者或是網頁設計的工程師準確的找出需要改善的問題方向。今天我們就來介紹其中一款最被廣泛使用的工具,在和工程師溝通時也可以直接用這些工具產生的內容來進行討論。

Google PageSpeed Insights

Google PageSpeed Insights 只要講到網站效能,那一定會看到這個網站工具的身影!Google PageSpeed Insights 是一個由 Google 提供的免費網站效能評估工具。它可以幫助你評估你的網站在桌面和行動設備上的加載速度和性能表現。這個工具不僅提供了關於網站速度的評分,還提供了詳細的優化建議,讓你可以改進網站效能。

使用Google PageSpeed Insights非常簡單。你只需要輸入你的網站網址,然後點擊”分析”按鈕。稍等片刻,工具就會分析你的網站並提供以下兩個重要方面的評估:

桌面版本評估

Google PageSpeed Insights for desktop 工具會為你的網站在桌面瀏覽器上的加載速度進行評估。它會提供一個網站速度評分,該評分基於多個因素,包括加載時間、壓縮和縮小圖像的程度,以及程式碼優化等。此外,你還可以看到關於如何改善網站加載速度的建議,這些建議可以幫助你優化網站的效能。

行動版本評估

Google PageSpeed Insights for mobile Google PageSpeed Insights還提供了關於你的網站在行動設備上的加載速度和性能的評估。行動使用者體驗對於網站的成功至關重要,因此評估行動版本的效能是非常有價值的。你可以看到網站的行動評分,並根據評分了解你的網站在行動設備上的優化程度。同樣地,工具會提供改進建議,幫助你優化網站以提供更好的行動使用者體驗。

重要指標介紹

Google PageSpeed Insights 提供了多種不同的指標來衡量網站的效能狀態,不同的指標代表了不同的意義也有不同的改善或是調整方法,或甚至也有可能因為某些特定的網站需求造成特定指標要有所犧牲,每個網站都會有其獨特的解讀與調整方式。

我們今天先把重心放在效能的部份, 好好的了解一下 Google PageSpeed Insights 提供了哪些指標來衡量一個網站的效能

First Contentful Paint

how-to-evaluate-the-performance-status-of-a-WordPress-website-2023-05-19-15-39-50 FCP(首次內容繪製)是指在用戶來到您的頁面後,瀏覽器渲染第一個頁面內容所花費的時間。您頁面上的圖像、非白色的畫佈元素和 SVG 都被視為頁面內容。

Largest Contentful Paint

how-to-evaluate-the-performance-status-of-a-WordPress-website-2023-05-19-16-03-07 LCP(最大內容元素繪製)是衡量在視窗中最大的內容元素何時被渲染到屏幕上。

Total Blocking Time

how-to-evaluate-the-performance-status-of-a-WordPress-website-2023-05-19-16-00-32 TBT(Total Blocking Time)衡量了頁面在無法回應用戶輸入事件(例如滑鼠點擊、螢幕點擊或鍵盤按鍵)的總時間。任何執行時間超過 50 毫秒的任務都被視為長時間任務,而超過 50 毫秒的時間即為阻塞部分。例如,如果檢測到一個持續 70 毫秒的長時間任務,則阻塞部分為 20 毫秒。

Cumulative Layout Shift

how-to-evaluate-the-performance-status-of-a-WordPress-website-2023-05-19-16-10-00 CLS 是指整個網頁生命週期中發生的「不在預期內」的所有佈局偏移中,最大一連串佈局偏移的分數。

佈局偏移的意思是指,當一個可見元素的位置從一個已渲染的畫面變更到下一個已渲染的畫面時,所發生的佈局改變。

意外的佈局偏移大部份都會造成差勁的使用者體驗,一個好的網站應該要能盡量減少CLS。

Speed Index

how-to-evaluate-the-performance-status-of-a-WordPress-website-2023-05-19-16-10-37 Speed Index(速度指數)衡量了頁面加載期間內容的視覺顯示速度。

結論

了解這些指標之後,就可以更有效率的和工程師進行溝通,並且針對特定的範圍和目標進行評估與優化改善。至於要如何成功的優化又是另一門很深的專業了,歡迎您可以持續的收看我們蓋婭所提供的一系列教學內容來進行優化調整;或是也歡迎您直接和我們聯絡,讓蓋婭做為您網站製作上做堅強的後援!

Shingo

Shingo

系統架構師 | 鏟屎官 專治疑難雜症,擅長系統架構設計與規劃

想知道更多嗎?

填入常用的電子郵件,即可在第一時間獲取最新知識!

Subscription Form