2017年5月8日 星期一

imgix Page Weight Tool 找出網頁裡過於肥大的圖片資源,提高載入速度

imgix Page Weight Tool 找出網頁裡過於肥大的圖片資源,提高載入速度

imgix 是一家讓網站或應用程式可以更快速載入圖片的服務,也可說是致力於圖片最佳化技術公司,整合包括線上裁切、壓縮、響應式設計、圖片增強等眾多功能,最大好處是使用者幾乎不用自行處理圖片,只要將網站串接 imgix API 就能雲端自動進行操作,先前曾經介紹過「Placemat 漂亮的佔位圖片產生器,開發網頁快速嵌入特定尺寸範例圖片」就是直接以 imgix 進行圖片處理。本文要介紹的「Page Weight Tool」是 imgix 最近新推出的服務,能幫你測試網站圖片有沒有需要最佳化處理的空間。

Page Weight Tool 是一款為網站最佳化檢查工具,簡單來說,它如同為網頁圖片設計的 Google PageSpeed Insights輸入要測試的網站網址後得出相關數據及修改建議,同時告訴使用者那些圖片可以被最佳化。Page Weight Tool 會列出整體網頁大小、圖片大小及最佳化圖片後可為網頁「減肥」多少百分比,非常具有參考價值。

大家應該都知道,網頁載入速度已經成為搜尋引擎最佳化(SEO)重要指標之一,也就是說網頁能更快被開啟也更能受搜尋引擎青睞,同時減少使用者跳出率,為網站帶來更多流量甚至是成功提高轉換率。

網站名稱:imgix Page Weight Tool
網站鏈結:https://pageweight.imgix.com/

使用教學

STEP 1

開啟 Page Weight Tool 網站後直接輸入要檢測的網頁網址,按下「Show Me!」繼續。

imgix Page Weight Tool

STEP 2

Page Weight Tool 結果頁面會先顯示檢測的頁面總大小,例如下圖就是 1.57 MB,這些是包括網頁及圖片和程式等等加總結果,因為 Page Weight 是側重於對圖片進行最佳化來降低大小,加速網頁載入速度,因此還會告訴你當前頁面的圖片大小及最佳化後可減肥多少百分比。

如果你檢測出來的結果皆為綠色「Light」的話,代表你的網頁速度還算快,剩下的就是看最佳化後的百分比是否會影響到整體網頁速度,如果比重很高,那就找個方法處理一下圖片吧!

imgix Page Weight Tool

從右上角可切換桌面版和行動頁面所測得的不同結果,對於擁有一般桌面版及行動版的網站來說,這項功能可以分別得知兩種版本的網頁各自有多少的最佳化空間。

imgix Page Weight Tool

STEP 3

當然最重要的是 Page Weight Tool 會以圖表告訴你,目前網站裡圖片部分總共佔用整體網頁大小多少比例,如果最佳化圖片後會有多大的成長空間並加速多少秒數的開啟時間。

imgix Page Weight Tool

STEP 4

以及提供你每一張圖片的分析資訊,有些圖片可能不用這麼大的尺寸,使用者可透過調整圖片大小或壓縮等方式來減少圖片大小,進而讓網頁載入速度更上一層樓,Page Weight Tool 這項功能可以說分析的非常詳盡,網站站長就無需手動檢查圖片。

imgix Page Weight Tool

STEP 5

最後,Page Weight Tool 允許使用者分享這份測試結果,點擊右上角「Share Report」即可產生分享鏈結,讓其他人存取內容,或者透過社群網路按鈕來分享鏈結。

imgix Page Weight Tool

雖然 Page Weight Tool 是為了推廣 imgix 推出的免費工具,但圖片壓縮工具選擇非常多,並非要使用 imgix 不可,例如我推薦過這些服務:

喜歡 imgix Page Weight Tool 找出網頁裡過於肥大的圖片資源,提高載入速度 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。



from 免費資源網路社群 https://free.com.tw/imgix-page-weight-tool/

沒有留言:

張貼留言