去年差不多同時期我寫過一篇「Google 幫你測試網站是否對行動裝置友善,三項評比指標提供最佳化指南」,主要介紹 Google 旗下一個名為 Think With Google 的免費網站檢測工具,這幾年 Google 相當重視對於行動裝置(手機、平板電腦)使用者的體驗,速度是首要關鍵,依照最佳化的提示建議,若網頁載入速度過慢就可能無形中流失許多的重要訪客(是的,對於網站經營者來說,每一個訪客都很重要),那你知道應該如何改善網頁速度和體驗嗎?
其實要最佳化行動版網頁可以做的事很多,或許你我不是那麼熟悉,沒關係,相信 Google 說的總不會錯吧!Think With Google 就是一個能協助你讓網站變得更好的免費工具。最近悄悄換了一個介面,與另一家知名網路測速服務「WebPageTest.org」合作,讓你測試行動版網頁更貼近真實情形。
Think With Google 最大的優點是可以「真正模擬」手機開啟網頁的情形,不只模擬手機環境,而是使用最多人使用的連線速度(3G)來進行測速。根據 Think With Google 說法,到 2020 年以前全球 70% 行動網路仍會是 3G 或更慢的連線速度,因此身為網站站長你必須想辦法「照顧」這些可能網路速度不夠快的使用者,因為他們佔大多數。總而言之,盡力讓行動裝置能越快打開你的網站越好。
Think With Google 除了真實反映出行動裝置開啟你的網站、部落格速度外,我認為最重要的就是最佳化提示建議,這也是此服務最珍貴、最有價值的部分,你可以依照 Google 給的建議,逐步修改網站讓它更符合行動使用者瀏覽。
網站名稱:Think With Google
網站鏈結:https://testmysite.thinkwithgoogle.com/
使用教學
STEP 1
開啟 Think With Google 網站後,從首頁「Test your mobile speed.」下方輸入你要檢測的網址,如果你的網站會自動將行動版裝置重新導向至其他的子網域名稱,那請直接使用該行動版網址做測試,假如你是使用相同網址或是 RWD 版型就輸入網站網址吧!
測試過程 Think With Google 會有相當可愛的插圖,搭配上很有知識性的文字描述,有興趣的話可以稍微看一下,要不然等待大約 30 秒後返回網頁就可以獲取分析結果。
STEP 2
因為免費資源網路社群是使用「響應式網頁設計」(RWD)技術,無論使用何種大小的螢幕都能自動調整到最佳瀏覽版型,不意外地在行動裝置開啟速度上表現不佳,這是因為圖片檔案太大而影響到載入網頁時間。根據 Think With Google 說法,八秒鐘的開啟時間是大約在平均值左右,不過這速度可能會在網頁載入中流失將近 28% 的訪客。
STEP 3
接著把頁面往下拖曳,Think With Google 會告訴你你測試的網頁開啟時間大約位在那個位置,當然可以的話速度越快越好,不過根據網頁類型不同,使用者可以「容忍」的時間也不太一樣。
從下方點擊一下鏈結,選擇你的網頁主題類別(如果 Google 沒有判斷正確),選好後再次回到上個畫面,你就會發現時間軸有些許不同。
STEP 4
最後也是我想推薦 Think With Google 的原因,那就是最後一個畫面會告訴使用者:你可以透過最佳化的過程來減少多少載入時間?依照網頁說明,如果我照著 Think With Google 建議最多可縮短 4 秒,這對於分秒必爭的網頁載入速度來說是相當有說服力的,點擊「See top fixes」好好看一下 Google 給了我們那些最佳化建議。
會碰到的常見問題是:圖片最佳化、延遲載入 JS 和快取功能,當然你看到的也可能不是這些問題,其中我認為最需要被處理的就是「圖片大小」,只要能在合理範圍內適度壓縮圖檔,在不影響畫質的情況下又能減少大小,就有助於獲得更快的載入速度。
我介紹過一些可以無損壓縮圖片的免費工具:
- TinyJPG 線上 JPG、PNG 圖片壓縮工具,輕鬆減少圖片 70% 大小
- TinyPNG4Mac 免費圖片壓縮、最佳化應用程式(Mac)
- Jpeg.io 將常見圖片格式拖曳轉檔為最佳化 JPEG,降低容量且無損畫質
- Imagify 免費線上圖片壓縮服務,三種模式切換壓縮比畫質
最後,你也可以點擊「Get My Free Report」填入 Email 將免費檢驗報告寄回信箱,提供給你的網站工程師讓他們更能夠修改並將網站調整為更適合行動裝置使用者瀏覽的狀態。
值得一試的三個理由:
- 輸入網址快速檢測網站對於行動裝置使用者的友善程度
- 可模擬 3G 連線速度,反映出最真實的連線情境
- 提供相當有價值的最佳化建議報告,協助站長最佳化網站