PageSpeed 100分?網頁效能與分數的關係

黃詩雅
Begonia Design 海棠設計
7 min readMay 18, 2020

由 Google 開發的 PageSpeed Insights (PSI) 是網站專案中普遍使用的效能檢測工具,在 PSI 輸入欲檢測的網頁網址,會得到一個 0-100 之間的效能評分,分為快、中、慢三個等級,並列舉出各項優化建議,提供給開發者做參考。

身為 PM,不像前後端工程師是實際建置網站的人,對於網站效能的優劣,只能透過跑分工具略知一二,在交付成果時,能有個品質保證的依據,然而客戶可能會說:

「我的網站分數怎麼只有XX分?」

「可以再幫我提高分數嗎?但還是希望能保留某某功能…」

「診斷出好多修改項目,可不可以都幫我改一改?」

這時候就輪到 PM 大顯神威,好好地為客戶解釋以上種種疑難雜症,於是我們必須釐清以下幾個問題:

分數越高真的代表網頁效能越好嗎?

先讓我們來看看在 Google Analytic 中,對於 PageSpeed 分數的說明:

PageSpeed 分數代表網頁載入時間可以改善的程度。高分表示改善的空間較小,低分則表示改善的空間較大。分數只代表速度可以改善的程度,不代表速度本身。

也就是說,我們不能以分數的高低,去判斷一個網頁實際上的效能好壞,而是基於普遍認知的網頁優化規則,有多少項目不符合這些規則標準,進而轉換出分數,就像是寫考卷一樣,不符合標準答案便會扣分,但這是否就代表著答題者的答案是錯的呢?其實不全然。

WP Rocket 在文章中舉例,證明分數與網頁效能及載入速度沒有直接關係,也解釋了箇中原因,有興趣可以點進去詳閱:

優化建議好多,要照著修改嗎?

雖然分數不代表實際效能,PSI 列舉的修改建議還是非常有用的,開發者可以從中看出有哪些扣分項目,以及該項目可能影響效能的幅度,再回過來看該網頁是否能夠應該採納建議。

例如常見的圖片大小問題,一般圖片大小只要不超過 500KB,就不太會造成網頁負擔,但在 PSI 中可能會為了可再節省 1KB 的流量而對網頁扣分,或甚至建議到圖片會失真的大小,反而影響到最直接的視覺感受,那就本末倒置了。

另外,網頁的動態效果也是會被扣分的項目,在保留交互效果下,分數有一定的極限,當然我們可以拿掉會影響到網頁正常瀏覽的動效,但有些動效對於品牌形象的建立是不可或缺的元素,那拿掉就不是那麼妥當。

我們不需逐項的依照建議調整,必須考量到實際的需求與使用性,選擇可以做到的,以確實達到提升網頁速度的目的。

分數會影響到SEO?

事實並非如此,網頁載入速度才會影響到 SEO。

一般使用者可接受的載入時間為 4 秒,若能在 2 秒內載入完成為佳,只要是在正常範圍內,即使這些網頁再加快載入時間,也不會影響 SEO,只有過慢的載入速度才會實際影響到網站排名。

Google 的 John Mueller 在twitter 解釋網頁載入速度如何影響SEO

所以我說,那個載入速度呢?

PSI 報告呈現了許多數值與修改建議,都與載入速度有關,卻都不能代表實際的網頁載入速度,比較多還是建議以 PingdomGTmetrix 等工具測試載入速度,因速度會與伺服器連線距離有關,提到的這兩項工具都可以選擇連線區域,且直接顯示出 Load Time,致力於縮短加載秒數,而非提高 PSI 分數。

結語

Google PageSpeed 現在已更新到 V5 了,持續改進以提升測量的準確性與提供更多有效的建議給所有網頁開發者,協助我們自我檢測,但不應盲目追求高分,透過多種工具的結果比較,追求實際的網頁速度,才能做到真正的優化,給予使用者優良的使用體驗。

也希望沒有技術背景、但也在相關領域打滾的朋友們,看完這篇文章後能更清楚跑分工具所擔任的角色,以及用正確的方法閱讀診斷結果,也能給客戶一個安心的解答!

--

--

黃詩雅
Begonia Design 海棠設計

將我不知道的記錄下來,也許就能讓很多人知道了