先看懂量的是什麼,再決定要不要相信這個數字。
手機實測頁在你自己的手機上量三件事:快速版首頁是不是比正式首頁更快出現內容、這支手機支援哪些功能、畫面順不順。本頁說明它做什麼、不做什麼、每個數字的意思、結論的門檻與依據,以及最常被誤解的地方。
先說清楚這不是什麼
- 這不是 PageSpeed、Lighthouse 或任何正式的效能評等,也不是對你手機好壞的鑑定。
- 它只在你這支手機、這個時間點,用很少的次數(最少 4 次、最多 8 次)量出數字;結論只供參考,不是最後的決定依據。
- 「快速版較快」只代表這幾次量到的中位數比較快。網路、背景程式、省電模式與瀏覽器快取都會讓數字變動。
- 流暢度「順暢、普通、吃力」的門檻是經驗值,沒有用真機校正;依據與限制見下方「流暢度小測試與門檻」。
一次一步:每一步做什麼
- 開始:用兩句話說明要做什麼,按「開始檢查」才會往下。
- 基本資料:自動讀取螢幕大小與像素比、CPU 核心數、記憶體(近似)、網路類型、語言、顯示模式、Service Worker 狀態、儲存空間估計。瀏覽器沒有提供的欄位會寫「這個瀏覽器不提供」,不會用猜的。
- 功能支援:用功能偵測(直接問瀏覽器有沒有),不看瀏覽器名稱,列出 14 項功能是否可用,並對照哪些本站工具可能因此吃力。
- 流暢度小測試:約 3 秒,看畫面更新順不順,並跑一小段運算。結果只分「順暢、普通、吃力」,同時列出原始數字。可以略過。
- 首頁實測:真的打開正式版首頁與快速版首頁各至少 2 次,每次載完自動回到本頁並帶回量到的數字;第 2 輪把順序對調。每一次打開都是你按了按鈕,本頁不會自己跳走。
- 結論與報告:用白話寫出結論、列出兩版的中位數比較表,並產生一段可以複製的文字報告。按「複製報告」才會複製。
上方進度列隨時有「從頭再來」。每一步都有「回上一步」。
每個量測項目的意義與限制
以下項目只在首頁實測(步驟 4)用到。不同瀏覽器支援的項目不同;不支援的項目會寫「這個瀏覽器不提供」,不會補數字。步驟 2 會列出這支手機實際支援哪幾種紀錄。
| 項目 | 白話意思 | 怎麼量 | 限制 |
|---|---|---|---|
| 首次內容繪製(FCP) | 畫面上首次出現文字或圖片的時間。越小,打開首頁後越快看到東西。 | 瀏覽器的繪製時間紀錄(paint)。 | 不是「內容都出來了」,只是開始有東西。有些瀏覽器不提供。 |
| 主要內容繪製(LCP) | 畫面上占面積最多的一塊內容(通常是大圖或標題)出現的時間。 | 瀏覽器的 largest-contentful-paint 紀錄;等載入完成後再多等約 1.5 秒讓它穩定。 | 你在量測中途碰螢幕,瀏覽器會提早停止紀錄;有些瀏覽器不提供。 |
| DOM 就緒 | 網頁的文字結構讀完、可以開始互動的時間。 | 導覽時間紀錄的 domContentLoadedEventEnd。 | 看不出圖片或字型有沒有到。 |
| 載入完成(load) | 頁面與它需要的圖片、樣式、程式都載完的時間。 | 導覽時間紀錄的 loadEventEnd。 | 快速版把部分內容延後載入時,這個數字會變小,但不代表你看到的畫面一定更快。 |
| 資源數與傳輸量 | 載入這個頁面一共要了幾個檔案、從網路傳了多少位元組。 | 資源時間紀錄(resource timing)加總;不含測量程式自己。 | 來自瀏覽器快取的檔案傳輸量會是 0 或很小;所以先後順序會影響這一項。 |
| 長任務 | 主執行緒連續忙超過 50 毫秒的次數與總時間。越多越容易覺得「點了沒反應」。 | longtask 紀錄。 | 不是每個瀏覽器都提供;背景程式也會讓它變多。 |
| 版面位移(CLS) | 載入過程中畫面有沒有突然跳動。0 表示沒有跳。 | layout-shift 紀錄,取數值最高的 5 秒內視窗。 | 有些瀏覽器不提供;你操作造成的位移不算。 |
| 可見文字量/頁面文字總量 | 兩版首頁文字一樣不一樣多。可見文字量是畫面上能看到的字數;頁面文字總量連被收起來的區塊也算。 | 可見文字量用頁面的 innerText 長度;頁面文字總量逐一加總文字節點(不含程式與樣式)。 | 快速版把下方區塊收起來延後顯示,但文字仍在頁面裡,所以兩版數字會很接近。 |
| 連結數與圖片數 | 兩版首頁連結、圖片的數量。 | 計算 a[href] 與 img 的個數。 | 只能看出「有沒有少東西」,看不出內容對不對。 |
首頁實測:結論怎麼來的
量完之後,頁面依下面的順序逐項檢查,由上往下最先成立的那一項就是結論。這些門檻是設計時定的經驗值,不是從統計檢定算出來的;每版只有 2 到 4 次樣本時,雜訊本身就可能有 10% 到 20%,甚至更多(見下方沙箱例子),所以結論一律附「樣本很少,僅供參考」。
- 有逾時或出錯的測量:先不給速度結論,顯示「有測量沒有完成,請先重測再看結論」;按「重測這一次」重做。
- 任何一版的有效測量不到 2 次:顯示「資料還不夠,先不下結論」(至少要測兩輪)。
- 瀏覽器沒有回報 FCP 與載入完成時間:顯示「這個瀏覽器沒有回報可以比較的時間,無法下結論」。
- 內容量(可見文字量、頁面文字總量、連結數、圖片數)任何一項兩版差 20% 以上:顯示「兩版內容差很多,請先目視比對」,先不看速度。
- 每版只有 2 次時,另外拿各版最快的一次再比一次;兩種比法的分級互相矛盾:顯示「數字還不穩,先不下結論,建議再測一輪」。
- 一項快 15% 以上、另一項慢 15% 以上:顯示「兩版互有快慢,建議再多測一輪」。
- FCP 或載入完成中有一項快速版快 15% 以上,而且沒有任何一項慢 15% 以上:顯示「在這支手機上快速版較快,可以考慮換成正式首頁」。
- 至少一項慢 15% 以上,沒有任何一項快 15% 以上:顯示「這支手機上沒有比較快,先不要換」。
- 其餘(差距都在 ±15% 內):顯示「兩版差不多」。
| 項目 | 數值 | 說明 |
|---|---|---|
| 比較的指標 | FCP 與載入完成 | 各版取中位數(偶數次時是中間兩個的平均)。 |
| 「較快」門檻 | 快 15% 以上 | 算法:(正式版中位數 − 快速版中位數)÷ 正式版中位數。剛好 15% 算達標。 |
| 「差不多」範圍 | ±15% 內 | 兩項都在這個範圍內。 |
| 「較慢」門檻 | 慢 15% 以上 | 至少一項慢 15% 以上,且沒有任何一項快 15% 以上。 |
| 內容量差異 | 20% 以上算差很多 | 算法:兩版差 ÷ 較大的那一版。剛好 20% 算差很多。優先於速度。 |
| 最少樣本 | 每版 2 次 | = 至少兩輪;最多 8 次(4 輪)。 |
| 交叉檢查 | 每版不到 3 次時 | 用各版最快的一次再比;每版有 3 次以上就只看中位數。 |
| 單次逾時 | 25 秒 | 從開始打開首頁算起;超過就記為逾時,帶著已量到的部分回來。 |
| 載入後多等 | 1.5 秒 | 載入完成後再等一下,讓 LCP 穩定才回報。 |
測量順序與「首次打開」
第 1 輪「正式版 → 快速版」,第 2 輪順序對調(快速版 → 正式版),之後依此輪替,最多 4 輪。首次打開的頁面要從網路載入,再次打開時瀏覽器已經存了一部分共用檔案,通常快得多,所以先測的那一版會吃虧。對調順序、取中位數可以抵消一部分,但每版只有 2 次時中位數就是兩次的平均,仍會被「首次較慢」拉偏;這就是上面「交叉檢查」存在的原因。想看真正的「首次打開」,請關掉所有本站分頁,用無痕視窗打開手機實測頁,只看那一輪。
為什麼是 15% 與 20%
15% 與 20% 是設計規格指定的經驗門檻:差距小於 15% 的快慢在這麼少的樣本下無法和雜訊分開;內容量差 20% 以上,表示快速版很可能少了東西。它們沒有經過統計檢定,也沒有用大量真機驗證。
流暢度小測試與門檻
測試約 3 秒:畫面每次更新的時間間隔用 requestAnimationFrame 記錄(前 3 格是暖機,不算);同時把一段 JS 型別陣列運算(約 200 毫秒)與一段 WebAssembly 整數運算(約 80 毫秒)切成每塊約 3 到 10 毫秒的小塊,塊與塊之間讓出主執行緒,所以不會讓畫面凍結。若測試中分頁被切到背景,會中斷並請你重測;最久 10 秒一定結束。
| 指標 | 順暢 | 普通 | 吃力 | 說明 |
|---|---|---|---|---|
| 畫面更新(格/秒) | 50 以上 | 24 到 50 | 低於 24 | 60 Hz 螢幕該有 60;很多手機的省電模式會降到約 30,所以會被列為「普通」。 |
| 掉格比例 | 8% 以內 | 8% 到 25% | 25% 以上 | 兩格之間隔了中位數 1.5 倍以上,算掉一格。 |
| 最長一次畫面間隔(毫秒) | 150 以內 | 150 到 500 | 500 以上 | 畫面「停住」最久的一次。 |
| JS 運算(百萬次/秒) | 75 以上 | 40 到 75 | 低於 40 | 型別陣列迴圈,約 200 毫秒的運算量,切成小塊。越高越快。 |
| WebAssembly 運算(百萬次/秒) | 120 以上 | 50 到 120 | 低於 50 | 整數迴圈,約 80 毫秒。不支援或被擋時不扣分,只在報告寫「沒有量到」。 |
整體等級取最差的一項;任何一項「吃力」就是「吃力」。畫面更新、掉格與最長間隔反映「畫面順不順」,兩項運算速度反映「處理大檔案會不會等很久」。
門檻的依據(也是限制)
這組數字是經驗值,沒有用真機校正。做法是在開發用的模擬環境(2 核心的虛擬機、無頭 Chromium)用 Chrome 開發者工具的 CPU 降速功能把同一個測試降速 1、2、4、6、8 倍,各跑 4 次取中位數,再把「順暢、普通、吃力」的分界設在大約降速 4 到 5 倍與 8 倍附近;降速 4 倍大致相當於中階手機的速度,8 倍大致相當於入門手機,但這個對應只是粗略估計。那個環境同時有其他程式在跑,數字本身有 ±30% 的雜訊。
| CPU 降速倍率 | 格/秒 | 掉格比例 | 最長間隔(ms) | JS(百萬次/秒) | WebAssembly(百萬次/秒) | 依現在門檻的等級 |
|---|---|---|---|---|---|---|
| 沒降速(1 倍) | 60 | 1.2% | 75 | 225 | 464 | 順暢 |
| 2 倍 | 60 | 0.3% | 25 | 141 | 200 | 順暢 |
| 4 倍 | 60 | 3.3% | 117 | 87 | 134 | 順暢 |
| 6 倍 | 60 | 8.8% | 75 | 60 | 90 | 普通 |
| 8 倍 | 60 | 14.8% | 67 | 40 | 63 | 吃力 |
同一個測試在不同手機上的數字可能差很多,充電中、背景有程式、散熱、省電模式都會影響。若你的報告顯示的等級和實際使用感受不符,請把報告貼給客服,門檻會依真機資料調整。
沙箱裡的實測例子(不代表你的手機)
下表是開發時在模擬環境完整跑過的 A/B(每個情境一次)。目的是讓你看到「同一版本的兩次也會差很多」,以及不同條件下結論會不同;數字每次重跑都會變,請不要把它當成你手機的預期值。
| 情境 | 正式版 FCP(ms):首次/再次 | 快速版 FCP(ms) | 正式版載入完成(ms) | 快速版載入完成(ms) | 當次的結論 |
|---|---|---|---|---|---|
| 桌面(1366×800,沒降速) | 432/312 | 296/336 | 592/450 | 359/404 | 在這支手機上快速版較快,可以考慮換成正式首頁 |
| 手機模擬(390×844,沒降速) | 272/144 | 200/216 | 743/385 | 335/184 | 在這支手機上快速版較快,可以考慮換成正式首頁 |
| 手機模擬+CPU 降速 4 倍 | 1,044/536 | 628/1,044 | 3,707/2,629 | 918/842 | 數字還不穩,先不下結論,建議再測一輪 |
| 手機模擬+1.6 Mbps/往返 150 ms | 348/288 | 260/308 | 1,910/2,913 | 2,000/2,086 | 數字還不穩,先不下結論,建議再測一輪 |
| 手機模擬+CPU 4 倍+慢網路 | 1,004/516 | 372/544 | 4,632/3,199 | 1,924/1,898 | 在這支手機上快速版較快,可以考慮換成正式首頁 |
觀察:每一版的先後兩次常差一倍以上(先測的那一次通常較慢,因為瀏覽器還沒有快取);網路是瓶頸時,兩版載入完成時間會很接近,結論偏「差不多」或「數字還不穩」;CPU 是瓶頸時,快速版延後載入部分內容的效果比較明顯。
功能清單與工具的對照
步驟 2 列出這些功能是否可用,並把「缺了就無法使用」與「缺了會變慢」分開寫。對照依據是各工具頁面程式實際做的檢查。「可用」只代表功能齊全,不代表處理大檔案一定順;速度請看流暢度小測試。
| 功能 | 意思 | 哪些工具會用到 |
|---|---|---|
| WebAssembly | 需要高速運算的程式能不能跑。 | 截圖與照片轉文字 OCR(必要) |
| WebAssembly SIMD | 高速運算的加速指令。 | OCR(沒有時改用較慢的核心) |
| Web Worker | 讓大檔案的運算放在背景,畫面不容易卡住。 | OCR、PDF 工坊、聊天紀錄統計分析器、影像增強副本、錄音增益降噪副本、鑑識存證的雜湊計算(都是必要) |
| OffscreenCanvas | 圖片處理可以在背景進行。 | 影像增強副本(必要);OCR 前處理(沒有時較慢) |
| createImageBitmap | 圖片解碼與縮放比較快。 | 影像增強副本(必要);OCR 前處理(沒有時較慢) |
| Web Audio 解碼 | 能讀取並解碼音檔。 | 錄音增益降噪副本(必要) |
| showSaveFilePicker | 讓你直接選存檔位置。 | 部分工具(沒有時照常下載到預設位置) |
| Clipboard 寫入 | 一鍵複製。 | 各工具的「複製」按鈕(沒有時要自己選取文字再複製) |
| BroadcastChannel | 同一網站的分頁互傳訊息。 | 本站現有的交接功能不依賴它 |
| CSS 捲動動畫 | 捲動時的進場動畫。 | 只影響動態效果 |
| 跨頁轉場(View Transitions) | 換頁時的淡入淡出。 | 只影響動態效果 |
| content-visibility | 長頁面延後繪製看不到的區塊。 | 長頁面的捲動順暢度 |
| 預先載入規則(speculationrules) | 預先載入下一頁。 | 本站快速導覽只預取、不預先轉譯 |
| 效能量測項目(PerformanceObserver) | 首頁實測需要的 paint、LCP、長任務、版面位移四種紀錄。 | 手機實測的首頁量測 |
資料放在哪裡
- 不上傳:所有數字都在你的手機上量;本頁與測量程式只向本站要自己需要的檔案,沒有任何第三方請求,沒有分析或追蹤程式。
- 不使用瀏覽器儲存:不用 localStorage、sessionStorage、IndexedDB、cookie 或快取儲存庫(網站本來就有的離線快取只存網站檔案,不含你的量測數字)。狀態只放在網址的 # 後面(例如
#pc1.…)與畫面裡;關掉頁面或按「從頭再來」就消失。 - 網址的 # 部分不會送到伺服器,但如果你把網址複製、加入書籤或傳給別人,裡面的數字會跟著走。
- 測量首頁時會多一個查詢字串:為了讓狀態在兩頁之間傳遞,前面已量到的數字會放在首頁網址的
pcs=參數裡,所以網站伺服器的紀錄看得到這些數字。內容只有時間、次數與計數,不含姓名、電話、位置或帳號。 - 回傳目標只認 phone-check.html:首頁測量程式只會回到同網站的
phone-check.html;網址裡的 ret 參數不是這個值,就只量測、不跳轉。 - 按「複製報告」才複製:頁面不會自動複製或傳送報告。複製失敗時會把全文選取起來,請長按後選「複製」。
- 報告會含:瀏覽器版本字串、螢幕大小、核心數、記憶體近似值、時區、各項量測數字與時間。不含姓名、電話、位置、帳號。
- 統計工具:如果網站日後加裝瀏覽統計,測量時首頁被打開的每一次都可能被記成一次瀏覽。
如何自行驗證
- 打開瀏覽器的開發者工具(電腦上按 F12),切到「網路」分頁再整理頁面:本頁只會有本站的請求;網址不在本站的請求應該是零個。
- 切到「應用程式」(Application)分頁,看 Local Storage、Session Storage、IndexedDB、Cookies、Cache Storage:本頁的程式不會寫入量測資料;若看到網站自己的離線快取,裡面是網站檔案,不是你的數字。
- 看網址列:每做完一步,# 後面的字串就會更新;整段(含開頭的 #)上限 1700 個字元,由英文字母、數字、逗號與波浪號組成,格式不對的網址會被整段忽略並提示。
- 把網址的 # 後面刪掉再整理:狀態消失、回到開頭,證明狀態只在網址裡。
- 想核對速度數字,可以在同一支手機的瀏覽器開發者工具(或 PageSpeed Insights)另外量一次;兩邊的環境與算法不同,數字不會相同,只看大方向(誰比較快)是否一致。
- 看原始碼:本頁用到
v237-phone.js(介面)、v237-phone-core.js(判斷與格式)、v237-pcprobe.js(首頁測量程式,只有網址含 gibpc=1 才載入);v234-fast.js尾端只多了一小段(298 位元組)的啟動程式,沒有 gibpc=1 時完全不作用。
常見誤解
- 「後測的比先測的快,所以快速版比較快。」
- 不一定。再次打開時瀏覽器已經存了共用檔案(還有 Service Worker 的快取),本來就會比較快。所以才要測兩輪、對調順序,並提醒你「首次打開」與「再次打開」不同。
- 「結論說差不多,就是兩版一樣。」
- 不是。「差不多」只代表這幾次量到的差距在 ±15% 內;樣本少時,真正的差距可能被雜訊蓋住。
- 「載入完成(load)變小,就是畫面更快出現。」
- 不一定。快速版把部分內容延後載入,load 會變小,但你看到畫面開始出現的時間(FCP)可能一樣。所以兩個數字都列出來。
- 「流暢度是順暢,所有工具都不會卡。」
- 不是。小測試只量約 3 秒、一小段運算;處理很大的檔案時,記憶體與持續散熱更重要。
- 「測量時我可以順便滑手機。」
- 不行。操作螢幕、切到別的 App、螢幕關掉都會讓數字變差,頁面會把這些情況標在該次測量旁邊,並在結論加註。
- 「省電模式開著也一樣準。」
- 不會。省電模式常把畫面更新降到約 30 格/秒、降低處理器速度,流暢度與載入時間都會變差。請關掉再測。
- 「網路快慢不影響結果。」
- 會。網路是瓶頸時,兩版載入完成時間會很接近;請在你平常使用的網路下測,並知道這個數字只代表當下。
- 「開發者工具的模擬手機就等於真手機。」
- 不等於。模擬器只降低處理器與網路速度,記憶體、散熱、瀏覽器版本與真實觸控都不同;這就是做這個頁面的原因。
已知限制
- 門檻是經驗值,流暢度的分界沒有用真機校正(見上)。
- 首頁量測依賴首頁載入一段很小的測量程式;如果手機上留著舊版的快速導覽程式(瀏覽器或離線快取沒更新),啟動前檢查會發現並提醒你關閉本站所有分頁後重開,或改用無痕視窗。
- 不同瀏覽器支援的量測項目不同,缺的項目寫「這個瀏覽器不提供」,結論只用有量到的項目;兩個速度指標都沒有時不給結論。
- 每一次測量都是真的打開首頁一次,網站若有統計工具,可能多記幾次瀏覽。
- 網址長度有上限:整段 # 字串(含 #)1700 字元、單一首頁網址的查詢字串 2000 字元、最多 8 次測量;超過會拒絕,不會截斷後硬用。
- 本頁沒有在真機上測過;自動化測試在桌面與手機模擬、CPU 降速與慢網路下通過,但真機(尤其是 iOS Safari 與低階 Android)的行為仍可能不同,請以你自己的結果為準。
- 返回鍵:測量前後的每一個狀態都在瀏覽紀錄裡,按返回會回到上一個狀態,不會自己再去測;測到一半按返回,會回到本頁並保留先前的結果。
建議的使用流程
- 關掉其他 App 與其他本站分頁,把螢幕亮度與休眠時間調高,關掉省電模式,插著電更穩。
- 想看「首次打開」的樣子:用無痕視窗打開手機實測頁,先完整測一輪,只看那一輪。
- 再用一般視窗測一遍:完整測 兩輪(正式、快速、快速、正式),看結論。結論若是「數字還不穩」,按「再測一輪」。
- 測量中不要碰螢幕、不要切換 App。
- 看結論頁的比較表與「樣本很少」的提醒,不要只看標題。
- 按「複製報告」,貼給客服或工程師;報告不含個人資料。
- 要重來就按「從頭再來」,或直接重新整理(網址裡的狀態還在,會回到首頁實測那一步)。