Image Speed Test 分析你的網頁內容,提供加速及圖片最佳化建議

最後更新於 2020 年 07 月 07 日

最近在研究免費資源網路社群的網站成效表現,才發現圖片容量太大、對於網頁載入速度造成一定程度的影響,事實上對一般內容網站來說可能不會非常要求圖片品質,例如文章裡搭配文字說明所使用的畫面擷圖也不用過度清晰,利用圖片壓縮工具先處理一下,即使是無損壓縮(Lossless)也能讓容量降低不少。若你是使用 WordPress 架站,官方提供的 Jetpack 外掛就有內建免費的圖片 CDN(Photon CDN)功能,開啟後就能自動壓縮圖片,以內容傳遞網路技術讓載入速度更快,也更節省主機流量。

本文要介紹的「Image Speed Test」剛好是我在研究圖片壓縮過程中遇到的一個新推出的線上工具,背後是一家專門提供圖片壓縮技術的服務 Piio,輸入網址就能線上檢測你的網站速度快不快,圖片部分有沒有任何最佳化的空間,和之前推薦過的 16 個免費網站測速工具功能差不多,只不過 Image Speed Test 更側重於圖片項目。

當然 Image Speed Test 主要目的還是要行銷宣傳 Piio 本身的圖片壓縮、最佳化業務,如同之前介紹過的「imgix Page Weight Tool 找出網頁裡過於肥大的圖片資源」就是 imgix 提供的類似工具(imgix 和 Piio 是同類型服務),但還好這樣的網頁檢測工具並不會強制使用者必須使用它推薦的圖片壓縮服務,因此還是可以掃描一下自己的網站圖片是不是過於龐大、有沒有任何壓縮、調整或是變換格式的必要。

Image Speed Test
https://imagespeedtest.piio.co/

使用教學

STEP 1

開啟 Piio 的 Image Speed Test 服務後,填入要檢測的網站網址,按下 Analyze 產生分析結果。如果是內容網站簡易可以直接檢測首頁,或是隨意挑一篇具有圖片的內文。

STEP 2

Image Speed Test 需要一段時間擷取網站,同時分析桌面端和行動端的速度,最後才會產生結果,這裡有一些數據提醒使用者網站速度的重要。值得注意的是 Image Speed Test 提供 Email 訂閱功能除了會在網站分析後發送通知,也會每個月定期將新的網站報告寄到你的信箱。

STEP 3

檢測後就能看到目前的網站效能評分、頁面大小和頁面載入時間,上方也會有幾個建議的調整項目,例如可以降低頁面大小來提升載入速度、有幾張能使用 WebP 格式來讓容量變小的圖片等等。

從頂端按鈕切換桌面或是行動裝置的檢測結果,通常都是桌面端的成效較佳,如果你的網站流量主要來源是手機用戶記得要針對行動版網頁進行最佳化,例如降低圖片大小、或是減少頁面載入的程式,盡可能讓請求數減少會是最立竿見影的作法。

STEP 4

底下的 Image Optimization Comparison 也是很值得參考的項目,網站會將目前圖片和最佳化圖片列出比較,包括在圖片大小的變化、可節省流量,提示項目也很有參考價值,像是目前圖片的尺寸過大建議可以縮小、當前使用的格式建議轉換為 WebP 等等。

總歸一句話就是盡量讓圖片尺寸符合一般桌面裝置適合的尺寸大小,將格式轉為可以使圖片容量更小的 WebP(如果瀏覽器支援的話)。

還有一個項目是列出在桌面端、行動裝置使用相同瀏覽器所得到的圖片差異,可以看到透過 Piio 可以讓每張圖片容量變得更小,提升整體的網頁載入速度(當然只要把圖片尺寸變小、格式換成 WebP 就能獲得類似效果),這部份僅供參考,因為也不可能把圖片的尺寸變得這麼小,不過可以看出就是任何網頁的圖片都有最佳化空間。

值得一試的三個理由:

  1. 填入網址線上檢測網頁載入速度,更偏重於圖片最佳化處理
  2. 可以分析桌面版和行動版網頁的載入效能、時間和頁面大小
  3. 針對圖片進行比較,找出能夠調整和最佳化圖片建議

 

相關的文章

設定 Jetpack 網站加速器的圖片壓縮畫質教學(Photon CDN)

最近使用了 Piio 的 Image Speed Test 工具,也提到我正在研究一項適合免費資源網路社群的圖片壓縮功能,一直以來我都是使用 Cloudflare(本身除了加速分流也有圖片最佳化功能),另外我也相當推薦 WordPress 架站的站長使用 Jetpack 的網站加速器(以前叫做 Photon CDN),都能有效提升網站載入效能。當然你也可以將每張圖片都下載回來以圖片壓縮工具進行處理,但對有數萬甚至數十萬張圖片的網站來說實在是個大工程,也不建議這麼做。

Blackmagic Disk Speed Test 免費硬碟測速工具,快速獲取寫入和讀取速度(Mac 應用程式)

剛寫完一篇 PS4 Pro 更換 SSD 教學,做完功課也對 SSD 固態硬碟有了更多認識,於是興起把自己日常工作使用的 iMac 一併換成 SSD 硬碟的念頭,當然想歸想,iMac 最困難大概就是要拆機的部分吧!尤其是要拔除膠條、處理裡頭排線等等都有一定的難度,儘管網路上有不少教學影片依舊沒什麼信心,打算先詢問一下專門維修 iMac 和 MacBook 的店家,看看是否有從 Fusion Drive 升級為 SSD 硬碟的必要,Fusion Drive 兼具容量和速度也是絕佳解決方案。

Cloudflare Speed 免費網路測速服務,可測網路速度、延遲和抖動情形

受新冠肺炎(COVID-19)疫情影響,許多公司改採在家辦公模式,減少員工在辦公室可能造成的群聚感染風險,也讓網路服務提供業者(ISP)觀察到家用頻寬上升的狀況。另一方面串流影音服務、線上會議服務的使用量也增加許多,Netflix 甚至宣布調降部分地區的流量,以因應過度使用情形。如果你想知道自己的網路速度究竟快或不快,可以透過網路測速工具看到數據,之前推薦過一些很值得使用的測速服務:

回應