有在追蹤使用者體驗的各種心理學研究,應該都有聽過網頁開啟速度的 X 秒原則,從西元二零零幾年到現在,在各種文獻都有不同的 X 數值,總之網頁開啟速度盡量越快越好。Google 也說過載入速度會當作SEO排名因素之一(Official Google Webmaster Central Blog: Using page speed in mobile search ranking),網站好不容易導流得到曝光,內容好不好先不論,卻敗在開啟速度,有點可惜,所以花時間調校,對於網站經營還是能有一丁點幫助的。

但什麼叫做讓網站變快?
– 在網站觀看線上視訊直播時,荷官和玩家…呃!老師和學生…之間的動作會有10秒以上的延遲
– 瀏覽供應商的產品資料網站,依SQL語法從70萬筆資料中篩選出對應的規格選項,要很久才能跑出結果
– 在論壇網站瀏覽別人的美食遊記,一篇文章有50張照片,開網頁開了老半天,文章都看完了,照片還沒跑完
– 瀏覽海外地區網站,點擊選單換頁,要過很長一段時間,畫面才會開始顯示內容
– 在網頁瀏覽器開啟雲端硬碟,上傳4K的行車紀錄器影片時,上傳的非常久

上述幾件事通通是在瀏覽網站時發生,但是慢的原因是完全不一樣的!
如果搞不懂哪些部份歸後端伺服器、哪些部分歸前端瀏覽器、哪些部分歸傳輸線路,就像騎 Gogoro 去加油站問說怎麼開油箱蓋、大鬧要加滿 92 汽油一樣,叫加油站的主管出來面對也沒用,是無法解決問題的。

像遇過有一次網頁打不開,靜態檔案跟 ping domain, ip 都正常,就是有連到資料庫的後端程式都爆幹慢,大概又是回收機制的老症頭,某國內主機商竟然劈頭先丟 PageSpeed 跑分叫人把網頁裡的圖片壓縮,一堆外行人還真的叫設計師開始壓圖片,實在是黑人問號。最後解決方式仍是伺服器重開機治百病。

本文純討論網頁開啟速度,現在最流行的就是使用 Google 出的 PageSpeed Insight, GTmetrix, Lighthouse, web.dev 之類的跑分檢測工具,就可以讓大家忙很久。

想提升 PageSpeed 的跑分,首先要先了解 PageSpeed 的計分方式:
– 用督導制,滿分100逐步扣下去,有做到的不會讚賞你,它覺得是缺失就扣爆
– PageSpeed 沒有暫存,一般瀏覽器都有暫存機制,初次瀏覽網頁時要下載一些圖片等靜態資源,但下次瀏覽時,只要沒有超過資料 Response 提供的檔頭資訊 Cache-Control , Etag …之類的有效期,會直接從本機暫存快取載入,第二次瀏覽時就會比較快,但是 PageSpeed 沒有這回事。
– 分數不是固定值,網頁沒做修改,同一頁連測數次,分數會有上下浮動的情況,估計是受伺服器傳輸速度影響。那麼分數是要多測幾次取平均值、中位數,還是取最高分?還是取整個網站最高分的那頁?這裡開始就開始有統計爭議點了。

以下提供幾個小小的分數提升秘訣

第一招:換個方式載入 Google Fonts 的 Web Font

現代能上網的裝置這麼多,光是 iOS, Android, Windows 的黑體字都會長得不一樣,為了跨瀏覽器字型接近統一,或是有時候想讓網頁上的文字多些花樣,但又不想做成圖片,會用 Google Fonts 上的雲端字型,免費嘛!

Google fonts 提供的嵌入碼,是用 link tag 呼叫 css,本例在一個內文有上萬字的網頁裡直接直接引用,然後把這個極端環境的測試網頁1,直接丟去測 PageSpeed…
厲害了,不到10分(測試連結1)

PageSpeed - 使用 link tag 呼叫 web font css

不要聽從官方的嵌入碼指示,另外做一頁改用 Web Font Loader 來載入雲端字型,分數就能達到80分以上(測試連結2)

PageSpeed - 使用 webfont loader 載入

第二招:延遲載入非必要的JS套件,如各種 Facebook plugins

從前 Flash 跟無名小站部落格的時代,部落格上常常掛一堆第三方套件,例如可愛日曆、部落格寵物、計數器,還有廣告之類的,最可怕的是網頁一打開還會自動播放音樂。

現在十幾年過去了,硬體效能提升了好幾倍,有線和無線網路的最大理論速度也提升了,網頁瀏覽器也吃了更多的記憶體,網頁瀏覽器對自動播放影音做了很多管制,但是網站上仍然會放一些有的沒的第三方套件、廣告代碼、追蹤程式,網頁開起來一樣慢到靠北。

在本例的測試網頁,把台灣常見的「社群四天王」套件通通加好加滿
Line 分享按鈕與即時分享數
Facebook 分享按讚按鈕與分享數(like plugin)
Facebook 網頁內訊息聊天視窗(Customer Chat Plugin)
Facebook 粉絲專頁按讚區塊(page plugin)

除了四天王,常見的網頁嵌入還有 Google 地圖,Youtube影片、Facebook 留言板(Facebook Embedded Comments plugins)、Youtube 頻道訂閱按鈕(YouTube Subscribe Button)之類的,族繁不及備載…

PageSpeed - 嵌入社群分享套件

測試頁3丟去跑分之後發現,只是擺了一些分享按鈕,FB粉專按鈕,完全依照原廠指示放置嵌入碼,結果就已經讓一個根本沒內容的空網頁的 PageSpeed 分數不及格了(測試連結3),而這些外部嵌入的東西通通都是別人網站上的程式,裡面的程式碼怎麼寫的,我們又管不著?

這時候要寫報告,由於社群行銷工具導致網頁開啟速度變慢,降低SEO的排名因素,看是這些社群套件要移除,還是行銷部門要移…..當然不可能有這種事,最後還是該死的技術人員要處理。

一樣不要聽從官方的嵌入碼,自己把那些 Facebook, Line 嵌入碼改寫掉,例如先改寫成 lazyload 之類的機制,網頁開始捲動後,才載入這些社群網站套件。

PageSpeed - 延後載入嵌入社群分享套件
一個幾乎沒內容的空網頁測試頁4,也能回到比較正常的分數了。(測試連結4)。但因為目前 PageSpeed 主要是測網頁首次顯示的首屏,如果改天增加一種評量方式,會把網頁從頭捲動到尾,那這種奧步又失效了。

這些社群套件各有不同的雷,為了安全起見,盡量能改用純超連結,不要顯示即時資料的就好了。否則喜歡三不五時沒事找事做的,就歡迎多多使用「原廠」提供的嵌入碼。

讓網站在 PageSpeed 測不出分數

有碰過幾個網站,有請主機商設定阻擋國外IP,只限台灣IP瀏覽,我不知道主機商是如何設定的,以及他們是用哪套國家 IP 資料表。總之這些設定阻擋國外訪客的網站,丟去測 PageSpeed 就只會出現以下訊息,跑不出分數。
Lighthouse returned error: FAILED_DOCUMENT_REQUEST. Lighthouse 無法穩定載入你要求的網頁。請確認你的測試網址是否正確,以及伺服器是否正確回應所有要求。(詳細資訊:net::ERR_TIMED_OUT)

另外另外如果看主機 Log 檔,可以發現 PageSpeed bot 的 UserAgent 字串至少有以下兩種:
– Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 Chrome-Lighthouse
– Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Mobile Safari/537.36 Chrome-Lighthouse
然後 IP 是66.249.82.* 開頭的,所以也可以再針對 UserAgent 的 Chrome-Lighthouse 或 IP 網段進行阻擋,甚至吐出不一樣的內容給 bot 看,來達成造假的目的…

用 LiteSpeed Web Server 會讓 PageSpeed 分數提高嗎?

這個部落格為了省錢或實驗性質,歷經多次搬家,最近一次也轉換到用 LiteSpeed Web Server 的虛擬主機,那這樣 PageSpeed Insight 分數有變高嗎?
其實分數也沒差多少,而且自己會寫 JS 跟 CSS,用不著為了排版裝一堆 Elementor 之類的編輯器,套件能不裝的就盡量不裝,畢竟只是個單純的部落格而已,只差沒用 WordPress REST API 來自己做前台而已。

換了 LiteSpeed 之後,前後台瀏覽的體感速度有變順,但扣分主要是在 Google 廣告 AdSense 產生 render blocking、還有 AdSense 載入的廣告圖片造成靜態資源相關的審核被扣分,這跟網站本身用哪一家主機商、啥伺服器架構沒關係。

這回到一開始騎 Gogoro 去加油站問說怎麼開油箱蓋的問題一樣,如果不了解慢的是哪些部份,例如用一年幾千塊的虛擬主機硬放了 N 個 WordPress 網站還裝了 WooCommerce 之類的肥外掛,導致網站速度慢,卻叫人要優化 CSS 跟 JS?操作後台經常執行到 timeout 或 5xx 當機,卻叫人壓縮圖片?那就繼續做夢,等哪一天網站真的會變快吧。

結論

衝分數跟搞資安的基本出發點有點像,多加任何一個東西上去,就要考慮會帶來怎樣的問題。但通常都是說加就加,為加而加,基層的技術人員就是該死。

衝分數不只是技術人員的事,編輯人員有沒有網頁插入圖片的正常觀念,製作適當大小的照片、適當的照片格式,也會大大的影響評分項目。

網頁一開始壓預算壓時程隨便寫,日後調整將會曠日費時、動搖國本、禍延子孫,創造更多的工作機會和商機。

網站前後端各自有許多可以調整的項目,但如果改善後讓 PageSpeed 分數提升,但實際體感並沒有變快,甚至有時反而變更慢?純屬正常現象。

至於如果是亂裝了一堆套件和佈景主題的 WordPress 網站,掛 AdSense 又設動態相關廣告的啦,甚至還是一整頁落落長的一頁式網站…也想要衝分數?沒錢沒時間就不要想太多了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *