為什麼 Google 的 Pagespeed Insight 分數不重要?

作為一個網站管理員,你當然知道網站愈快愈好。你已經閱讀了所有關於如何使 WordPress 更快的文章,以及如何安裝各種外掛來讓網站變得更快。你可能安裝了一個快取外掛,然後信心滿滿的準備看看網站是不是真的飛了起來。

當然你會去看 Google PageSpeed Insights,因為這是網路上所有文章告訴你要做的。你輸入了你的 URL,得到一個 ABCD 之類的等級和一個來自 Google 的推薦代辦事項,然後你可能會感到沮喪:

「這些紅色和橘色的警告是什麼?」

「為什麼我的分數不是很高?」

「這些建議到底是在說什麼?」

不對啊,我明明就已經安裝了快取,為什麼我的分數不是 100 分,甚至沒有 87 分!你開始檢視這些建議,想知道為什麼你的快取外掛沒有自動解決這些問題。

很多人問我為什麼他們的 PageSpeed 分數沒有更高,或者他們認為因為分數沒有增加很多,所以他們的網站沒有變得更快。

但是事實是:Google PageSpeed Insights 的分數對於頁面快或不快,根本不重要。我接下來會解釋為什麼。

速度

快取外掛的目的是讓你的網站更快。

速度,例如你的網站載入時間,是最重要的指標。這也是使用者體驗和搜尋引擎優化的一個重要因素。當 Google 抓取你的網站時,它看不到你的「等級」,只有你網頁載入的速度。

你知道 Google PageSpeed 甚至沒有測量你網站的載入時間嗎?

重申一遍:Google PageSpeed 實際上沒有測量你網站的載入時間。

對於台灣的站長來說,不管你是用 Pingdom 也好、GTMetrix 也罷,這些數據都不是真的很準確。因為網站的載入速度和物理距離是有關聯的,記得你的網路線是實體線路嗎?距離拉的愈長,速度就會愈慢。雖然如此,我個人還是喜歡使用 GTMetrix 來測量載入時間,GTMetrix 登入(免費)之後可以切換到香港的伺服器,速度會稍微準確點,但是即使是這樣,也只能當做參考。我認為最準確的方式是用你的手機 4G 網路,看看訪問你的網站時,到底需要多久,這也是目前你的用戶大部分時候的訪問方式。

回想一下你的學生時代。考的高分代表你的智商很高嗎?不一定吧。它只是告訴你答對了幾題。有時候你全寫 C 也能及格,也有很多聰明的人在考試中表現不佳。

所以就像學校的成績不是智力的指標,Google 的 PageSpeed 等級實際上並不是速度的指標。

沒有人是完美的,所以也沒有網站可以每次都拿到 100 分

沒有一個網站能每次都獲得 100 分,事實上這幾乎是不可能實現的,而且既然它與速度無關,為什麼還要追求這個呢?

如果你嘗試達到一個完美的等級,通過實現 Google PageSpeed 的所有建議,你很快就會瘋掉,因為他們的評斷標準經常和我們製作網站的初衷悖離,這些建議有些完全不切實際。

例如,它可能會告訴你「Leverage browser caching for the following cacheable resources」。這是不可能的。因為並不是所有的 JS 檔案都在你的伺服器內,例如你加了 Facebook 的按讚分享、或是粉絲團外掛。只有 Facebook 和 Google 本身可以向這些檔案新增瀏覽器快取。為了在這個項目拿滿分,你的網站可能必須要拿掉 Facebook 的 Widget,或是移除你的網頁廣告,這好像不太對吧。

如果你在你的網站上使用 CDN,PageSpeed 可能會給你一個更低的分數,但是在多數情況下,CDN 會為訪客提供了更好的速度。

或者,他會因為你的圖片可以再壓縮 1kb 而扣你的分數,但這是不值得為之煩惱的!

禁止轉譯 Javascript 和 CSS

PageSpeed 很經常給出的一個建議會是「消除在上面的內容中禁用的、阻塞的 JavaScript 和 CSS」,它通常提供 2 個部分的建議:

1. 移除 Render-blocking JavaScript

通常我們會建議你把 JavaScript 檔案移到站點頁尾載入,或者讓這些檔案非同步,這樣它們就不會阻塞站點上的其他內容的下載,以保持頁面載入的速度。但是 Google 沒有考慮到的是,有時候在頁尾載入所有東西是不可能的,尤其是當你使用現成 WordPress 主題時。

有些外掛可以幫助你把 JavaScript 合併或是移至下方,但這可能是主題或外掛開發人員故意的。有時,當您將 JavaScript 檔案從頁首移動到頁尾時,你會發現網站跑版,或是功能消失。

當然,如果這沒有破壞你的網站上的任何功能,它可能會幫助你的 PageSpeed 分數。但你依舊需要測試,這麼做了之後對你的網站的速度會不會有影響。

2. 優化 CSS 傳輸

Google 建議您可以「優化 CSS 傳輸」。但是如果你單純把 CSS 移至頁尾,那麼會讓你的頁面載入時沒有任何樣式,看起來會像是故障,並且提供了糟糕的使用者體驗。

本質上,他們希望您分離出呈現頁面的第一部分所需的 CSS,並將其直接嵌入到頁面的程式碼中,而不是在主樣式表中。

因此,如果您不是開發人員,那麼就很難做到這一點,並且需要重新編碼您的主題部分。它也會因站點的不同而有所不同,所以在快取外掛中,它不是可以被做成一鍵式解決方案的東西。

如果您是一個開發人員,或者你有一個技術團隊,您可以要求他們實現這個技術。它並不一定會減低頁面的整體載入時間,但是它會增加您的 PageSpeed 分數,當然,頁面頂部的元素會更快載入。這種等級的微優化被像亞馬遜這樣的網站利用,對於超超大型網站來說,10ms 的差異可能會影響他們的營收。但對於大多數小站點來說,它不太可能有太大的影響。

那你說,PageSpeed 到底是做什麼用的?

Google PageSpeed 還是很有用,但是不要把它當作圭臬。

大部分的時候,它可以提醒你網站上的哪裡有問題,方便你去檢測/處理。例如,它可能會提醒你,您的內容沒有被 GZIP 壓縮。或者,它可能會提醒你,你有太多可以壓縮的大圖片。這是一個很好的建議,你可以使用 TinyPNG 或是 resmush.it 這樣的工具來減低你的圖片大小。

因此,最好將 PageSpeed 看作是您的工具箱中可能提供一些指標的工具之一,但是您的目標應該是提高實際速度,而不是您的 PageSpeed 等級。

總結

  1. 不要盲目地相信 Google ,或者以表面的價值來看待它。
  2. 一定要仔細閱讀他們的建議,並評估它們是否可行,是否值得你花時間。如果它要求你做一些不可能的事情,你應該忽略它!
  3. 不要忘記關注速度,不要因為沒有 100 分而感到挫折。
  4. 始終使用像 GTMetrix 或是 Google Chrome 的檢查功能這樣的實際速度測試工具來檢視您在站點上所做的任何更改的影響。