iT邦幫忙

1

網站更換為 WebP 圖片後的 PageSpeed Insights 分析

由於在 Google PageSpeed Insights 的測試報告中,我們常常看到圖片的傳輸,佔用了不少比例的時間,其分析結果的最佳化建議中,也常會看到建議將圖片檔案改成 WebP 的格式,因為 WebP 擁有極佳的檔案壓縮效率,可以節省不少的檔案大小及傳輸流量。

為了讓商家們了解網站改用 WebP 的圖檔之後,到底能改善多少傳輸效率,提升多少 PageSpeed Insights 的分數,我們建置了 2 個對照網站(採用 OpenCart 台灣優化版),一個不支援 WebP 的 OpenCart 網站,以及一個採用了 WebP 的 OpenCart 網站,在其他內容資料幾乎相同的情況之下,其中一個另外加裝了支援 WebP 的擴充功能(由我方參考 WebP Images 改寫而來),可以設定 WebP 的品質,我們設定了 80。

開放測試的 2 個網站分別是 :
未安裝 WebP 的 OpenCart : https://opencart-tw.twec.org/
已安裝 WebP 的 OpenCart : https://opencart-webp.twec.org/

我們分別測試了 PageSpeed Insights 各 5 次,取了中間值,
先是未安裝 WebP 擴充模組的 OpenCart :

未安裝 WebP 的 OpenCart 所得到的分數(行動版)

未安裝 WebP 的 OpenCart 所得到的分數(電腦版)

已安裝啟用 WebP 擴充模組的 OpenCart :

已安裝啟用 WebP 的 OpenCart 所得到的分數(行動版)

已安裝啟用 WebP 的 OpenCart 所得到的分數(電腦版)

從分數上看來,並沒有很明顯的差別,但從最佳化建議的 [提供 next-gen 格式的圖片] 這一項數據來看,是明顯節省了一些時間 :

未安裝 WebP 的 OpenCart

已安裝啟用 WebP 的 OpenCart (沒有列 [提供 next-gen 格式的圖片])

而這一項數據,在行動版上的差距更大。

未安裝 WebP 的 OpenCart

已安裝啟用 WebP 的 OpenCart

評測結論
如同 PageSpeed Insights 所說,[最佳化建議]的項目,這些建議有助於提升網頁載入速度,但不會直接影響「效能」分數,從我們評測的結果來看也是如此,2 個網站不論在行動版或是電腦版所得到的分數,並沒有很大的差異。

但是從傳輸所需耗掉的秒數來看,使用 WebP 是有很明顯地節省流量與傳輸時間,雖然 WebP 並不會提高 PageSpeed Insights 的分數,到節省傳輸時間鐵定能提升用戶體驗,尤其是大張圖片很多的網站,使用 WebP 與否,在用戶端絕對有很明顯的差異,在行動端更是有巨大的差別,所以依據此評測結果,我們仍強烈建議多圖片的網站,應該導入支援 WebP 的圖片功能,來提升網站的開啟速度及用戶體驗,不過礙於 IOS 上的 Safari 瀏覽器並未支援,這部分仍需要準備 2 套圖片格式供瀏覽器偵測使用,若要導入全站圖片 WebP 恐工程巨大,建議可從主要的大圖片、Slider 圖片下手,並配合語法讓瀏覽器自行取用有支援的最佳圖片檔案。

參考資源
電商系統工程筆記 https://24cc.com/
台灣電商社團 https://www.twec.org/
台灣電商 FB 社團 https://www.facebook.com/groups/opencart.taiwan/
OpenCart 網站代管、客製、維護 https://www.osec.tw/
OpenCart 台灣電商技術支援粉絲頁 https://www.facebook.com/ntcart/
OpenCart 台灣優化版專頁 https://www.osec.tw/opencart.html
OpenCart 台灣中文用戶討論區 https://www.ntcart.com/


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言