由57分提升到90分的Google PageSpeed技巧 (只需10分鐘)

你的網站有沒有比這一個新版本的 Google PageSpeed Insight 降低你的評分,你想改善網站的評分嗎?

我做了一個小規模的研究,找到了一些蛛絲馬跡,希望同你分享下,從而改善你網站於 Google PageSpeed 的評分。

PageSpeed研究的規模

這是一個小規模的測試,根據 Alexa 可以拿到的數據,於香港最多人瀏覽 1,000 個網站當中,主要找前 100 個 WordPress 網站,找 WordPress 網站的原因是可以肯定是那些都是內容網站,而不是 Google 的搜尋器、或電郵的登入畫面、或下載美劇的網站,而且我比較熟悉 WordPress 這個內容管理系統,所以可以得到一個相對公平的測試。

如何進行PageSpeed研究

由這 100 個網站當中,我們會逐一將他們的網址放進 Google PageSpeed 進行測試,之後記錄他們的桌面網站評分及手機網站評分,再作一個總結。

不過這個測試會有一定的偏差,因為不同的時間去進行測試網站的時候,可能該網站的伺服器速度也不一樣,所以盡可能於早上進行這 100 個網站的速度測試,從而拿取一個相對公平的數據。

除了記錄這個桌面及手機網站的評分之外,我們會將一些比較常見的問題,也會歸納出來,從而可以告訴大家什麼地方是需要作出改善,令你的網站可以獲得一個較好的評分。

PageSpeed研究結果

於這 100 個 WordPress 網站當中, 手機網站的評分都比桌面網站的評分為低,手機網站評分由 4 分至 38 分,桌面網站的評分由 35 分至 85 分,手機版網站的平均數為 17 分而桌面版網站的平均數為 64 分,桌面版比手機版的評分多 47 分,相當於 270% 的分別。

而且有大概 20% 的網站,他們的桌面版評分比手機版評分超過 10 倍,這些網站的其中一個共通點是版面較長及內容較多。

雖然這一次測試是着重於 Google PageSpeed 手機版及桌面版的評分,不過有一個比較令人意外的發現,前 100 個 WordPress 網站當中,有超過 30% 的網站沒有安裝 HTTPS (SSL),這個數字我覺得屬於頗高,因為 Google Chrome 瀏覽器於 2017 年 1 月已經實行了如果沒有 HTTPS (SSL),會於瀏覽器上顯示「不安全」的字樣。

根據100個網站的分析所得,以下有三類網站對於今次 Google PageSpeed 更新之後得到最大的衝擊

第一類為有廣告的媒體網站

由於廣告需要第三方系統的程式碼,而且你可能有多個不同供應商的廣告程式碼,這會令你的網站需要下載很多不同的資源,導致這類型的的網站分數降低。

第二類為使用 Google Font 的網站

網站需要下載第三方字型導致分數降低,有一點諷刺的是,這個 Google PageSpeed 的更新有機會導致一些網站不再使用 Google Font。

第三類為有安裝即時客服及網上推播 (web push) 功能的網站

情況同對以上兩類是一樣的,因為都需要下載第三方系統的程式碼,導致分數降低,所以這絕對是一個功能與 Google PageSpeed 分數的取捨。

第三方功能導致分數下降為:

  • Facebook Live Chat (導致 gzip compression 問題)
  • 網上推播 Web Push
  • Google Adsense 及其他網上廣告Google 字型
  • WordPress JetPack (這引起重大的分數問題)

放棄或改善 PageSpeed分數?

如果你的網站屬於以上三類情況的其中之一,但是不想放棄及移除這些第三方程式,還是有一些方法可以改善,不過改善的程度始終有限,你要抱著合理的期望。

這次 Google PageSpeed 更新似乎針對手機網站分數為主,普遍桌面版的分數未有太大影響,就算有影響,範圍也不會太大,仍然是可以接受的程度。

Google 喜歡手機版網站

這次更新其實反映了一個鐵一般的事實,就是 Google 對手機版的要求越來越高,也是說如果你能夠配合 PageSpeed 的要求,你的網站於 Google 手機版的搜尋排名得以提升及可以提升用戶體驗。

Google PageSpeed 建議一些需要改善的地方。

以桌面網站為例,比較常見的是:

  • 使用合適的圖片大小
  • 延後載入畫面外圖片
  • 排除禁止轉譯的資源
  • 避免耗用大量網路資源

以手機網站為例,比較常見的是:

  • 延後載入畫面外圖片
  • 排除禁止轉譯的資源
  • 提供 next-gen 格式的圖片
  • 避免耗用大量網路資源

如何改善PageSpeed的評分

根據 Google PageSpeed 的建議:

使用合適的圖片大小

有很多網站使用的圖片尺寸比他們顯示的圖片尺寸為大,所以對於用戶來說,額外等待圖片顯示的時間是浪費了,所以需要將合適的圖片尺寸調校一下。

延後載入畫面外圖片

如果你的網站版面比較長及需要顯示較多的圖片,延後載入的意思是,當用戶還沒有移到較低的位置去看你網站內容的時候,那些圖片是不需要預先載入,可以等用戶真的瀏覽到該內容的時候,才顯示該圖片,這個設定是需要技術人員的配合才能夠做到,不過如果你是使用 WordPress ,有不少的 Plugin 可以做到這個功能,你可以搜尋一下 lazyload。

排除禁止轉譯的資源

資源過多會妨礙首次繪製頁面,建議內嵌重要的 JS/CSS,延遲所有不重要的 JS/樣式,這個設定也需要技術人員配合,如果你是使用 WordPress,你可以搜尋一下 Minify 或 optimise 的 Plugin 關鍵字。

提供 next-gen 格式的圖片

JPEG 2000、JPEG XR 和 WebP 等圖片格式通常壓縮效率優於 PNG 或 JPEG,能夠更快下載完成及減少數據用量,我比較多使用 PNG 及 JPG,這個 next-gen 格式的圖片,我做了一點研究,有一些瀏覽器其實暫時未能夠支援,可以觀望一下再了解。

避免耗用大量網路資源

大量網路酬載會造成使用者的費用負擔,而且往往會導致載入耗時過長,如果要改善這一點,其實可以從網站的結構去考慮一下,有沒有需要一個很長的版面及很多的圖片,或是可以變為較多的頁面,令每一次用戶口來這個頁面的時候,需要下載的資源會較少。

詳細步驟改善 PageSpeed,使用這些WordPress Plugins

圖片優化

整體優化 (GZIP, JS/CSS, CACHING) – 付費 Plugins

WP101網站實驗结果

今次的測試使用了WP Rocket、Robin Image Optimizer、移除了 WordPress JetPack 及 OneSignal Web Push。

我用了大概10分鐘的時間去安裝及設定了這些Plugins及移除一些非必要的Plugins,過程相對簡單,最困難是要作出取捨,功能與PageSpeed分數的平衡,不過這個簡單的方法可以令這個網站由57分提升到90分。

你的網站又如何?

如果你還沒有進行這個測試,可以到 Google PageSpeed 測試一下,看一看你得到的結果和我們研究的數據是否接近。

如果你想網站於 Google PageSpeed 優化,你要考慮是不是要犧牲以上提及到的功能,來換取PageSpeed 的高分數,以 Amazon.com 為例,桌面版的分數很高,但是手機版的分數只有41分,由於網站的功能越強大,所以使用第三方的工具會越多,導致這個分數有機會被調低,這是一個優化及取捨的決定。

如果你的網站有被今次的更新所有影響,你可以選擇放棄一些功能或嘗試使用我所提及的方法去優化,如果你已經嘗試過一些方法,可以於以下回覆我們你的網址及桌面/手機網站的評分,我們可以擴大這個研究網站的數據,而且可以互相研究一下,如何改善這個評分,令用戶去你的網站時,有一個較好的體驗及於 Google 搜尋排名得到一個較好的位置,期望得到你的分享。

Author: ivan so

SEO, WP, UX, CRO

2 thoughts on “由57分提升到90分的Google PageSpeed技巧 (只需10分鐘)”

    1. 你好Ringo

      好問題,目前PageSpeed對SEO是有影響,但是還沒有一個龐大的研究去評估究竟有80分的PageSpeed是不是比50分的PageSpeed更容易於Google第一頁搜尋結果出現。

      不過有一個比較詳細的解釋,於這個 Google的博客有敘述 (https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html?m=1),其實只要不成為最差的分數就可以了,因為最主要PageSpeed不是鬥高分,而是不要最低分,最低分會令SEO有所影響。

      但是不會因為PageSpeed 100分,令到排名很高,始終搜尋排名最重要的仍然是內容相關性、外部連結及RankBrain。

Leave a Reply

Your email address will not be published. Required fields are marked *