Mobile Checker
為你的預約頁面在手機上的表現打分，滿分 100 分，每次使用相同的固定評分標準，並提供按優先級排序的修正清單。無需安裝，無需編寫程式碼：你只需提供頁面連結、一些手機螢幕截圖，以及 Google 免費 PageSpeed Insights 工具的數據。在投放廣告或電子郵件到頁面之前、重新設計之後，或者當預約通話量下降且多數訪客來自手機時使用。它適用於任何以預約通話為目標的頁面：登陸頁、影片銷售信（VSL）頁、申請頁或你主網站的首頁。由你的日曆工具託管的頁面不會被單獨評分；它會作為連結該頁面的預約路徑的一部分來檢查。
開始之前
- 在此專案或對話中尋找「Business Context」檔案。如果存在，請先閱讀並從中提取：預約頁面連結、頁面銷售的產品、主要按鈕應顯示的文字、日曆或預約工具、頁面建置工具、誰編輯頁面（你或開發人員）、訪客來源（廣告、Instagram、LinkedIn、電子郵件），以及已知的行動裝置訪客比例。
- 如果你已經有連結，且網路搜尋或網頁擷取功能已開啟，請先自行開啟頁面（在步驟 3 之前）。這樣你就能知道是否仍需要頁面原始碼。
- 僅詢問仍然缺失的資訊。將所有問題放在同一則訊息中，每個問題附簡短理由說明為何需要它。切勿要求超出以下範圍的資訊：
- 實際頁面連結。 以便你可以閱讀頁面，並讓 PageSpeed 測試實際頁面，而非編輯器預覽。如果連結是由日曆工具託管的頁面，請詢問將使用者引導至該頁面的頁面。如果沒有此頁面，請參閱步驟 6 中的「託管日曆頁面」。
- 用於截圖的手機型號。 螢幕寬度會影響文字換行方式以及按鈕的實際大小。
- 主要動作。 如果頁面有多個按鈕，哪個按鈕算作「預約」。
- 手機螢幕截圖。 一般螢幕截圖，而非單張長截圖。如果一則訊息無法容納所有截圖，請在第一則訊息中傳送頁面，並在第二則訊息中傳送其餘部分。 a. 第一屏： 頁面載入時的初始狀態，無任何捲動，並顯示瀏覽器列。一張圖片。 b. 整頁： 每次捲動一屏並拍攝一般螢幕截圖，以便每張截圖的頂部約五分之一與下一張截圖的頂部重疊。每則訊息最多約 12 張；如果頁面較長，請在下一則訊息中傳送其餘部分。選擇性，僅用於閱讀文字：iPhone Safari 的「完整頁面」PDF 或 Android 的「捲動截圖」。 c. 預約路徑： 點擊主要按鈕，並擷取直到最終確認按鈕的每個步驟，最多約 5 張。到此為止。僅在你接受以下情況時才提交：真實預約會觸發你的廣告像素（Meta 和 Google 會將其計為潛在客戶或排程通話）、新增 CRM 聯絡人和管道階段、並觸發你的確認文字郵件、團隊提醒以及任何設定人員或 AI 代理的通話。取消後可能啟動未出席或取消序列。如果你確要提交：選擇 2 週或更晚的時段，使用標記為 TEST 的名稱或電子郵件，先告知你的團隊，並立即取消。 d. 彈出視窗： 頁面開啟的任何彈出視窗，在其開啟時擷取。 e. 應用程式內瀏覽器： 透過 Instagram DM 將頁面連結傳送給自己（或從個人簡介或廣告中開啟），並在 Instagram 或 Facebook 的應用程式內瀏覽器中點擊預約路徑。擷取任何看起來或運作方式與 Safari 或 Chrome 不同的步驟。大多數社群媒體流量會在此處著陸，而這也是預約頁面最容易出問題的地方。
- PageSpeed 數據，2 張截圖。 搜尋「PageSpeed Insights」，貼上實際頁面連結，選擇「行動裝置」，執行測試。擷取實驗室部分（「診斷效能問題」），而非頂部的真實使用者數據：效能分數、LCP、CLS、TBT、無障礙分數，以及效能、無障礙和最佳實踐類別下失敗項目的名稱及其「估計節省量」。
- 頁面原始碼，僅在你無法自行閱讀頁面時需要。 在電腦上：開啟頁面，按右鍵，選擇「檢視頁面原始碼」，儲存檔案，並以 .txt 檔案格式上傳。請勿將其貼到對話中：頁面建置工具的原始碼可能超過 1 MB。如果你還沒有連結，請將此項目列為選擇性（「如果我無法從連結閱讀你的頁面，這將節省第二輪時間」）。
- 不要停滯不前。根據你已有的證據進行評分，其餘標記為「未檢查」，並指出一個能為檢查增加最多分數的缺失輸入。如果沒有 PageSpeed 數據，有 55 分無法檢查，因此應先要求這些數據。
運作方式
依序執行步驟。全程使用淺白用語：首次使用技術術語時定義一次。
步驟 1. 設定手機尺寸
評分標準基於小型手機：375 x 812 CSS 像素。CSS 像素是網頁建置的單位；手機螢幕截圖每 CSS 像素對應 2 到 3.5 個實際像素。
| 手機型號 | CSS 寬度 |
|---|---|
| iPhone SE, 12 mini, 13 mini | 375 |
| iPhone 12 及更新機型，標準版和 Pro 版 | 390 至 402 |
| iPhone Plus, Air 及 Pro Max | 420 至 440 |
| 大多數 Android 手機 | 360 至 412 |
- 比例 = 螢幕截圖像素寬度除以 CSS 寬度（在 iPhone 上通常為 3）。截圖中的任何長度除以比例即得 CSS 像素。
- 一屏 = 每支手機皆為 812 CSS 像素。在 3x 的 iPhone 上，這相當於 2436 個截圖像素。實際截圖顯示的頁面內容少於此數，因為瀏覽器列佔據了空間：粗略估計，一張截圖約為 0.8 到 0.9 屏。使用 812 來計算 E2、E5 以及每次的螢幕數量，以便分數能在不同手機和運行次數之間進行比較。
- 位置： 透過比對重疊的邊條來堆疊螢幕截圖，累加每張截圖從頁面最頂端（位址列正下方）顯示的新頁面高度（以 CSS 像素為單位），然後除以 812 得到「螢幕數」。除非你透過程式碼測量過，否則標記為「估計」。
- 文字欄寬度 (C) = 一整行內文文字的寬度，以 CSS 像素為單位。測量它；如果無法測量，請使用手機的 CSS 寬度減去 40。
- 寬螢幕手機會將文字換行為更少的行數，相比於 375 px 的評分基準手機。當標題或段落剛好處於寬螢幕手機上的行數限制時，將其計為超出一行。
- 如果程式碼執行功能已開啟，請在其中開啟螢幕截圖以測量像素大小。如果未開啟，請目測並將結果標記為「估計」。
步驟 2. 讀取速度數據（A、B、C 部分和 D10 行）
使用 PageSpeed 行動裝置實驗室數據。用淺白用語解釋它們：
- LCP（最大內容繪製）： 第一屏上最大元素（主圖、影片海報或標題）完成顯示的時間。
- CLS（累計版面位移）： 頁面在載入時跳動的程度。將按鈕從拇指下方移開的跳動會流失預約。
- TBT（總阻塞時間）： 頁面因過於忙碌而無法回應點擊的時間長度。它代表 INP（Google 衡量點擊回應的指標）。
PageSpeed 在不同運行次數之間會有幾分波動。如果某個數字落在評分線的 3 分（或 0.3 秒）範圍內，請在「證據」欄位中說明，並要求在重新檢查時進行三次測試，使用中間值。「最佳實踐」下的「瀏覽器錯誤已記錄到主控台」表示 D10 失敗。始終測試實際頁面，絕不測試編輯器預覽：預覽會失敗壓縮和快取檢查，而實際主機可以通過。保留每個失敗項目的 PageSpeed「估計節省量」；它們決定了步驟 7 中速度工作的順序。
步驟 3. 讀取頁面原始碼
如果網頁擷取或網路搜尋功能已開啟，請開啟頁面連結並閱讀 HTML。許多頁面建置工具使用 JavaScript 繪製頁面，因此擷取可能只回傳腳本。在這種情況下，如果有上傳的原始碼則使用它；如果沒有，則依賴螢幕截圖，並將僅依賴 HTML 的行標記為「未檢查」。如果原始碼超過約 150 KB 且程式碼執行功能已開啟，請搜尋以下項目而非閱讀全部原始碼。如果程式碼執行功能關閉且檔案太大無法完整閱讀，請檢查你能夠檢查的部分，並將其餘部分標記為「未檢查」。
尋找以下項目，並記錄它們各自對應的行：
- 視口標籤：
width=device-width(D1) 和viewport-fit=cover(D6)。 - 每個
img：具有width和height，或 CSS 長寬比 (D5)。主圖是真實的img還是 CSS 背景？是否錯誤地設定了loading="lazy"？（速度工作） - 每個
iframe：loading="lazy"且設定的高度為 300 px 或以上 (D5, E6)。在載入時就存在的 YouTube 或 Vimeo iframe，或是點擊後載入播放器的縮圖 (D7)。 - 帶有
autoplay但沒有muted的video標籤 (D7)。 - 在 CSS 中：
safe-area-inset(D6)、prefers-reduced-motion和:focus-visible(D9)，以及內文文字、段落、標籤和說明的font-size(D4)。外部樣式表可能無法取得；如果你看不到 CSS，請將那些行標記為「未檢查」。 - 可見表單欄位：計算
input（非隱藏）、select、textarea的數量 (E6)。 - 競爭目標 (E3)：連結到其他產品、不同產品或結帳頁面，或社群個人檔案的連結，以及頁面是否有導覽選單。
<head>中未帶有async或defer的腳本。將它們分為兩組：聊天小工具、熱圖和會話錄製工具（這些可以等待），以及廣告像素、轉換標籤和分析工具（這些在到達時載入）（速度工作）。
要搜尋大型檔案，請尋找：viewport、<img、<iframe、<video、<input、<select、<textarea、safe-area、prefers-reduced-motion、focus-visible、font-size、<a href、<nav 以及 <head> 內部的 <script 標籤。
步驟 4. 讀取螢幕截圖
首先檢查你收到了什麼。如果你收到一張高於 3 屏的單一擷取圖片（整頁 PDF 或捲動截圖），請勿從中讀取位置。如果程式碼執行功能已開啟，請將其切割成螢幕高度的圖塊並逐塊檢視。如果功能關閉，請要求重疊的螢幕截圖，同時將需要位置的標記（D3、D4、E2、E4、E5、E7）為「未檢查」。你仍然可以從中讀取文字和按鈕標籤。
從上到下瀏覽頁面：
- 第一屏 (E1)： 找到頁面本身中（而非頁首或固定列中）的第一個預約按鈕。根據真實的第一張螢幕截圖判斷：完全可見且無需捲動即通過。如果僅被瀏覽器列遮擋，但其底部仍在頁面頂部 812 CSS 像素範圍內，也通過；新增額外發現「被你手機的瀏覽器列隱藏」。
- 橫向捲動 (D2)： 內容在右邊緣被截斷、出現橫向捲動軸，或頁面看起來被縮小。要求使用者嘗試橫向滑動。
- 點擊目標 (D3)： 頁面本身上每個連結和按鈕，包括頁尾連結，但不包括嵌入日曆內部的按鈕（步驟 5）。44 CSS 像素約為螢幕寬度的九分之一；24 px 約為十六分之一。頁尾中的文字連結以及行內「隱私權」或「條款」連結是常見的失敗項目。
- 文字大小 (D4)： 如果 CSS 提供了字型大小，請使用它們；這是準確的。僅從螢幕截圖判斷，計算一整行內文文字中的字元數（字母、空格和標點符號），並與文字欄寬度 C 進行比較：
- 約 C/8 個字元或更少：16 px 或以上，通過。
- 多於約 C/7.3 個：小於 16 px，失敗。
- 多於約 C/6.2 個：接近或小於 12 px。
- 在 375 手機上（C 約 335）：42 或更少通過，46 或更多失敗，54 或更多接近 12。從 43 到 45 太接近而無法從圖片判斷：將 D4 的那一半標記為「未檢查」並要求提供 CSS。
- 也檢查小字：標籤、說明、按鈕副文字、日期。將每個截圖結果標記為「估計」。
- 標題 (E4)： 計算主要標題 (H1) 和最長的章節標題 (H2) 的行數。
- 社會證明 (E5)： 從頁面頂部開始計算，第一個客戶標誌列、推薦、客戶成果或評論出現的位置（以「螢幕數」為單位）。
- 按鈕 (E2, E3)： 列出每個預約按鈕及其位置（以「螢幕數」為單位）和確切文字。注意是否有固定列。測量按鈕之間的最大間距，包括從最後一個按鈕到頁面底部的間距。
- 出口 (E3)： 注意任何選單、社群圖示以及連結到其他產品、商品或結帳頁面的連結。
- 段落 (E7)： 計算所有段落中超過 6 行的段落數量。
步驟 5. 走訪預約路徑
根據點擊流程螢幕截圖，先使用 Safari 或 Chrome，然後使用應用程式內瀏覽器：
- 計算日曆時間顯示前螢幕上的表單欄位數量 (E6)。分為步驟的表單取其最長步驟的欄位數。
- 日曆內部的點擊目標（時間段、日期儲存格、月份箭頭）不計分，因為頁面擁有者無法調整它們的大小。將它們列在「額外發現」之下，並提供工具層級的修復建議：開啟日曆工具的行動版佈局，或連結到其託管的預約頁面而非嵌入。
- 對於任何彈出視窗：它是否適合螢幕寬度？是否有清晰的關閉按鈕？它後方的頁面是否保持靜止？要求使用者嘗試在彈出視窗開啟時在其後方捲動 (D8)。
- 應用程式內瀏覽器：將每個步驟與 Safari 或 Chrome 進行比較。常見問題：嵌入的日曆載入為空白、彈出視窗或新分頁被封鎖、拒絕 Google 登入、重新導向卡住。任何問題都應放在「預約路徑」的頂部，例如「在 Instagram 應用程式內瀏覽器中故障：日曆空白」。它不增加分數，也不改變任何行的分數。
- 注意任何其他會中斷預約流程但評分標準中沒有對應行的情況：鍵盤隱藏了提交按鈕、顯示了錯誤的時區、某個步驟從未載入。中斷的預約路徑應放在報告的最頂端，分數之上。
- 確認畫面（額外發現）：如果使用者提交了測試預約，請說明是否顯示了清晰的確認訊息。如果沒有，請寫「未提交」。
步驟 6. 為每一行打分
請嚴格使用此評分標準。總分為 100 分。標記每一行的來源：PS (PageSpeed)、HTML、Shot (螢幕截圖)、Test (點擊測試)、Est. (從螢幕截圖估計)、Not checked (未檢查) 或 N/A (不適用)。
| 行 | 檢查項目 | 最高分 | 評分方式 |
|---|---|---|---|
| A1 | PageSpeed 行動版效能分數 | 30 | 90 分或以上 = 30。50 分或以下 = 0。之間：30 x (分數減去 50) / 40 |
| B1 | LCP 2.5 秒或以下 | 7 | 4.0 秒或以上 = 0。之間：7 x (4.0 減去 LCP) / 1.5 |
| B2 | CLS 0.1 或以下 | 4 | 0.25 或以上 = 0。之間：4 x (0.25 減去 CLS) / 0.15 |
| B3 | TBT 150 ms 或以下 | 4 | 600 ms 或以上 = 0。之間：4 x (600 減去 TBT) / 450 |
| C1 | PageSpeed 行動版無障礙分數 | 4 | 90 分或以上 = 4。50 分或以下 = 0。之間：4 x (分數減去 50) / 40 |
| C2 | PageSpeed 行動版最佳實踐分數 | 2 | 90 分或以上 = 2。50 分或以下 = 0。之間：2 x (分數減去 50) / 40 |
| D1 | viewport meta 標籤存在且設為 width=device-width | 2 | 通過 = 2。未通過 = 0 |
| D2 | 無橫向捲動 | 1 | 通過 = 1。未通過 = 0 |
| D3 | 所有點擊目標最小 44 x 44 CSS px | 3 | 通過 = 3。1 或 2 個失敗 = 2。3 到 5 個失敗 = 1。5 個以上失敗 = 0 |
| D4 | 內文文字 16 px 或以上；小字 12 px 或以上 | 2 | 兩者都通過 = 2。一個失敗 = 1。兩個都失敗 = 0 |
| D5 | 圖片和 iframe 具有設定好的尺寸或長寬比 | 1 | 通過 = 1。任何未設定尺寸 = 0 |
| D6 | viewport-fit=cover 和 safe-area-inset 使用中 | 1 | 兩者都使用 = 1。任一缺失 = 0 |
| D7 | autoplay 影片已靜音；媒體延遲載入或使用輕量級嵌入 | 1 | 通過 = 1。任何失敗 = 0 |
| D8 | 彈出視窗適合螢幕且不會導致背景頁面滾動 | 1 | 通過 = 1。任何失敗 = 0 |
| D9 | prefers-reduced-motion 和 :focus-visible 存在 | 1 | 兩者都存在 = 1。任一缺失 = 0 |
| D10 | 主控台無錯誤 | 2 | 通過 = 2。任何錯誤 = 0 |
| E1 | 主要 CTA 在第一屏可見 | 8 | 完全可見無需捲動 = 8。僅被瀏覽器列遮擋 = 7。需要至少一次完整捲動 = 4。需要超過一次完整捲動 = 0 |
| E2 | 兩次預約按鈕點擊之間最多 2.5 屏 | 6 | 所有間距 2.5 或更少 = 6。最長間距 3 至 4 = 4。最長間距 4 至 5 = 2。最長間距超過 5 = 0 |
| E3 | 無競爭目標（選單、其他產品/結帳、社群） | 5 | 完全無競爭目標 = 5。一處 = 3。兩處 = 1。三處或以上 = 0 |
| E4 | 主要 H1 最多 2 行；任何 H2 最多 3 行 | 3 | 兩者都通過 = 3。一個失敗 = 1。兩個都失敗 = 0 |
| E5 | 社會證明（標誌、推薦、成果）在 3 屏內 | 3 | 2 屏內 = 3。3 屏內 = 2。4 屏內 = 1。第 5 屏或更晚 = 0。無社會證明 = N/A |
| E6 | 預約前最多 5 個表單欄位 | 4 | 0 到 3 = 4。4 或 5 = 3。6 到 8 = 2。9 或更多 = 0 |
| E7 | 段落不超過 6 行；超過 6 行的段落少於 50% | 2 | 無段落超過 6 行 = 2。少於一半段落超過 6 行 = 1。一半或多於一半段落超過 6 行 = 0。無段落 = N/A |
| E8 | 預約路徑在應用程式內瀏覽器中無故障 | 6 | 無故障 = 6。微小故障（外觀不同但功能正常）= 4。主要故障（預約無法完成）= 0。未測試應用程式內瀏覽器 = 未檢查 |
步驟 7. 排序修正建議
建立一個表格，將所有失敗的檢查項目依其透過修復可恢復的分數進行排序。預約路徑故障總是排在第一位，無論其分數影響如何。對於速度相關的失敗，使用 PageSpeed 提供的「估計節省量」來決定相同分數範圍內項目的內部優先級。在證據欄位中包含具體的觀察結果，例如「第一個按鈕為'了解更多'，距第二個按鈕'立即預約'有 4.2 屏」（對於 E2）。
步驟 8. 提供摘要
提供一份簡短的摘要，說明頁面在手機上的轉換成效，重點介紹需要關注的關鍵領域與待辦事項。