網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 Mobile Friendly

網頁行動裝置相容/手機友善化測試: 網頁測試工具與資源整理 Mobile Friendly

1. PageSpeed Insights 行動/桌面測試工具

網址： https://developers.google.com/speed/pagespeed/insights/

一個測試同時幫你測試「行動版/手機版網頁」＋「桌面PC/MAC」版，並且個別打分數。

這個 Tools 最開始的時候，其實著重於「網頁速度」（中文為: 網頁效能工具），而沒有所謂的 Mobile-Friendly 使用者體驗！
但隨著行動上網的人增加，Google 也把 mobile user experience 的元素加入到測試內容內。

小於 60 分，則會顯示「紅字」，60 ~ 85 分則是「橙黃」，85 分以上則顯示「綠色」！
另外，他會幫你挑出
(a) 必須修正的問題 (should Fix)
(b) 建議修正的問題 (consider Fixing)
(c) 通過的測試 (Passed Rules)

當然，一定是建議先從類別 (a) 去著手修復，不管是「使用者體驗」或者「網頁速度」。

2. Google Webmaster Mobile Friendly Checker 測試工具

網址： https://www.google.com/webmasters/tools/mobile-friendly/

Google Webmaster 提供手機網頁相容測試的工具，他的原理很簡單，其實就是剛剛上面提到 PageSpeed Insights 「使用者體驗 (User Experience)」分數超過 80 分，就算是 Mobile Friendly！

這個 Mobile Friendly 測試看起來不 Care 「速度(Page Speed)」，所以有些寫的太過於精雕細琢的 RWD 網頁，雖然 PageSpeed Response time 很長，CPU% 使用率很高，但往往可通過此測試。

3. W3.org 的 Mobile OK 測試工具

網址： https://validator.w3.org/mobile/

W3C MobileOK Checker/Validator 歷史比 Google 資深，他的 User Agent 是「W3C-mobileOK/DDC-1.0 ( see http://www.w3.org/2006/07/mobileok-ddc )」

從 URL 來看，此 W3C Mobile OK 於 2006~2007 年就有了！

也因為是如此資深，他設計的原理其實是希望你符合一些「2G 傳統手機/功能手機」的「網頁瀏覽」
e.g.
(a) 他希望你每一頁 {HTML + 圖片} 小於 20KB
(b) 他希望你每一頁純 HTML 小於 10KB
(c) 他希望你用 XHTML 撰寫
(d) 他希望你不要用 PNG (因為手機可能無法 render)

從下面這段話，W3C 認為 Mobile 的網路還是 GPRS/CSD (10~30 Kbits)，而非 EDGE/CDMA/WCDMA/LTE (384Kbit ~ 1Mbit 等級以上)等。