簡介
目前，您能為網站做的最重要事情，就是確保網站能在手機或平板電腦上順暢運作。請繼續閱讀，瞭解如何使用 Chrome 開發人員工具和 Android 裝置，針對行動瀏覽器最佳化網站。
為什麼針對行動版網站進行最佳化如此重要？
效能
隨著我們從 2G 和 3G 轉換到 4G，行動裝置的 CPU 速度、RAM 容量、GPU 速度和網路存取速度都越來越快。儘管技術不斷進步，但行動裝置的效能仍不如電腦。具體來說，載入網路資源、解壓縮圖片、繪製網頁和執行指令碼都需要更長的時間。可以合理假設網頁在行動裝置上的執行速度會慢 5 到 10 倍。
電池
行動裝置僅使用電池供電。行動裝置使用者希望電池續航力越長越好。如果網站未經最佳化，電池耗電速度會比預期快得多。盡可能減少網路流量和繪製次數，降低耗電量。擷取資源時，Wi-Fi 或手機無線電必須開啟，這會消耗電池電力。瀏覽器繪製元素時，CPU 和 GPU 使用量會激增，也會消耗電池電力。
參與度
「成效」目標旨在提升您最重視的指標。在 Facebook，我們很重視捲動。在 A/B 測試中，我們將捲動速度從 60 fps 降至 30 fps。參與度已收合。我們認為可以，因此捲動很重要。
Facebook at Edge Conference
行動裝置使用者希望能夠快速進出。速度最快的網站將獲得最多參與度。
管理成效
Chrome 隨附一組實用的開發人員工具。本文將說明如何使用這些工具剖析行動網站。如果您已熟悉 Chrome 開發人員工具，那太好了！如果還不熟悉，請參閱以下實用教學課程：
現在您已瞭解基本概念，接下來就來看看如何使用開發人員工具加快行動網站速度。如果這是您第一次使用 Android 版 Chrome 開發人員工具，請參閱本文底部的入門指南。
從遠端使用 Chrome 開發人員工具
將 Android 裝置連接到電腦。在電腦版 Chrome 中前往 http://localhost:9222，並在 Android 裝置上開啟網站。系統會將你導向 Android 裝置上開啟的分頁清單。 從「可檢查的網頁」清單中挑選網頁。
系統會將你導向該網頁的 Chrome 開發人員工具。
哇…熟悉的 Chrome 開發人員工具工具列就在那裡。關於遠端 Chrome 開發人員工具，最重要的一點是，它們與您目前在電腦上使用的開發人員工具相同。 唯一的差別在於，Android 裝置只負責網頁，而電腦則負責開發人員工具。基本上，系統會收集相同的資料，並提供相同的功能。
舉例來說，我用手機造訪 www.sfgate.com/movies，在電腦上使用 Chrome 開發人員工具時，我將滑鼠游標懸停在「Elements」工具中的 div 上，Android 裝置上的 div 就會以視覺方式醒目顯示，就像在電腦上一樣。
元素工具也可用於切換樣式，在我們嘗試調查繪製時間時，這項功能會非常實用。
揭開網路存取權的神秘面紗
網路效能很重要，在行動版網站上更是如此。行動裝置的連線速度通常比桌上型電腦和筆記型電腦慢。如要確認操作正確，請前往網路工具並按下錄製，擷取網路快照。
螢幕截圖顯示 Google 搜尋產生的網路流量。觀察網站發出的網路要求，並設法減少。如果網站會向伺服器發出輪詢要求，請留意使用者活動，避免在使用者閒置時進行輪詢。網路工具可讓您查看原始 HTTP 標頭，在行動網路變更標頭時非常實用。
最佳化繪製時間
行動網路瀏覽器最大的瓶頸之一是繪製網頁。繪製是指在網頁上繪製具有指定樣式的元素。如果繪製某個元素需要耗費大量資源，整個網頁的繪製速度就會變慢。Chrome 會嘗試將先前繪製的元素快取在螢幕外緩衝區。不過，行動裝置的 GPU RAM 有限，因此可快取的螢幕外元素數量也有限。副作用是繪製次數增加，且每次繪製的速度都比電腦版慢。如要讓捲動功能快速回應，請盡量縮短繪製時間。
Chrome 25 包含連續網頁重繪模式。連續網頁重繪模式不會快取繪製的元素，而是在每個影格繪製所有元素。強制在每個影格繪製所有元素，即可透過切換元素和樣式的開啟和關閉狀態，對繪製時間進行 A/B 測試。雖然這個程序是手動進行，但對於追蹤網頁上每個元素的繪製成本，這是一項非常有價值的工具。最佳化俱樂部的第一條規則是測量您要最佳化的項目，以取得基準。我們來看看一個簡單的例子。
首先，啟用連續網頁重繪模式：
啟用後，Android 裝置的右上角會顯示圖表。圖表的 X 軸是時間，以影格為單位。圖表的 y 軸會以毫秒為單位測量繪製時間。在我的裝置上，頁面需要 14 毫秒才能繪製完成。此外，系統也會顯示繪製時間的最小值和最大值，以及使用的 GPU 記憶體。
為了實驗，我將所選元素的樣式設為 display: none。現在來看看繪製網頁的成本有多高。
繪製時間從每影格約 14 毫秒縮短至 4 毫秒。換句話說，繪製該元素大約需要 10 毫秒。只要按照上述程序，切換元素和樣式的開關，就能快速找出網頁中耗費資源的部分。請記住，繪製時間越短，代表卡頓情形越少、電池續航力越長，使用者參與度也越高。如要深入瞭解，請務必閱讀這篇關於連續網頁重繪模式的優質文章。
進階功能
about:tracing
電腦版 Chrome 提供的許多進階開發人員功能，也適用於 Android 版 Chrome。例如，about:gpu-internals、about:appcache-internals 和 about:net-internals 都可以使用。調查特別棘手的問題時，有時需要更多資料，才能縮小問題原因的範圍。在電腦上，您可能會使用 about:tracing。如果您還不熟悉 about:tracing，請觀看這部影片，瞭解如何使用及探索 about:tracing 分析工具。您也可以從 Android Chrome 擷取相同資料，請按照下列步驟操作：
- 下載 adb_trace.py
- 透過指令列執行 adb_trace.py
- 在 Android 裝置上使用 Chrome
- 在指令列按下 Enter 鍵，關閉 adb_trace.py 指令碼。
adb_trace.py 完成後，您會取得 JSON 檔案，可在電腦版 Chrome 的 about:tracing 中載入。
入門指南
我們已介紹遠端 Chrome 開發人員工具的功能，接下來說明如何開始遠端偵錯工作階段。如果您從未使用過，請參閱詳細操作說明，瞭解如何開始使用。如果您已經使用過，但忘記具體的使用方式，我也在這裡列出了簡短的操作說明。
1. 安裝 Android SDK
您可能會想，既然是開發網頁，為什麼要安裝 Android SDK。SDK 包含 adb (Android Debug Bridge)。電腦版 Chrome 必須能與 Android 裝置通訊。 Chrome 不會直接與 Android 裝置通訊，而是透過 adb 轉送通訊。
2. 在裝置上啟用 USB 偵錯功能
您可以在 Android 設定中找到啟用 USB 偵錯的選項。啟用。
3. 連線至裝置
如果尚未連線，請透過 USB 將 Android 裝置連接到電腦。如果您是第一次使用 USB 偵錯，系統會顯示下列提示：
如果您經常進行遠端偵錯工作階段，建議勾選「一律允許透過這台電腦進行」。
4. 確認裝置已正確連接
在命令提示字元中執行 adb devices。畫面中應會列出您的裝置。
5. 在 Chrome 中啟用 USB 偵錯
依序開啟「設定」>「進階」>「開發人員工具」，然後勾選「啟用 USB 網頁偵錯」選項，如下所示：
6. 建立與 Android 裝置的開發人員工具連線
執行下列指令：
adb forward tcp:9222 localabstract:chrome_devtools_remote
透過 adb 在電腦和 Android 裝置之間建立橋接。如果遇到任何問題，請參閱這裡的詳細設定操作說明。
7. 正在確認你是否符合資格
在電腦上開啟 Chrome 並前往 http://localhost:9222，確認裝置已正確連線。如果收到 404 或其他錯誤，或未看到類似下方的內容：
請參閱這篇文章，瞭解詳細設定操作說明。
結論
行動裝置使用者通常時間緊迫，需要快速從網頁中取得重要資訊。身為行動網站建構人員，您有責任確保網頁載入速度快，且在行動裝置上運作良好。否則使用者參與度會下降。遠端 Chrome 開發人員工具的功能與電腦版相同。兩者的使用者介面十分相似，因此您不必學習使用新工具。換句話說，工作流程會延續下去。請記住，Facebook 也會遇到成效問題，您的網站同樣如此。效能優異的網站能吸引更多使用者參與度。