伺服器架設, 網站架設

CloudFlare Pro 支援網站圖片轉WebP與壓縮40%以上,讓網站開啟速度變更快

梅干2018/05/22
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
  影響網站的開啟速度,絕大部分則是取決於圖片,且當圖片一多時,開啟的速度就愈慢,因此為了解決圖片大小問題,每當要將圖片上傳時,都會進行壓縮,同時盡量能符合Google PageSpeed Insights的檢測,由於目前Google對於網站的開啟速度,愈來愈重視,所以要能提升自己網站的開啟速度,變成是現在一個相當重要的課題。
  雖然說WordPress也有一些針對圖片的壓縮外掛,但那需要將圖片上傳在WordPress的媒體庫才能進行壓縮,同時還會造成主機的負擔,而梅干的圖片,則是放在圖床主機中,因此為了解決圖片壓縮的問題,最後梅干花了20美,購買了CloudFlare的Pro方案,裡面除了可針對圖片進行壓縮外,甚至還可將圖片轉成WebP,讓圖片在載入時檔案更小,速度更快,且還可解決在Google PageSpeed Insights測速時,網站圖片太大的問題,因此網站中有大量圖片的朋友,不坊也可參考看看囉!
Step1
有時都已壓縮了,但在Google PageSpeed Insights還是會出現,圖片太大的問題,這應該是讓許多人感到頭大,由其是不只一張。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step2
這時在升級為CloudFlare Pro方案後,就可到「Speed」選項下,「Polish」的下拉選單中,設為「Lossy」
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step3
再把「WebP」勾選起來。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step4
設定好後,再清除快取。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step5
這時再重整一下網頁,這時會發現到,在圖片的類型中,變成了WebP。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step6
同時也可以看到圖片的壓縮比與快取,和原本的檔案大小,從14.8KB變成了8.1KB,足足少了43%。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快
Step7
接著再到Google PageSpeed Insights檢測看看,哈~剛的圖片都不見了,只剩下Google的gif檔,而CloudFlare目前只能針對jpg與png進行壓縮,gif似乎還不支援!但這也大幅的提升了網頁的開啟速度。
梅問題-CloudFlare Pro支援網站圖片轉WebP與壓縮,讓網站開啟速度變更快