GoHighLevel 著陸頁指南
概述
本指南說明如何製作高轉換率的著陸頁，以單一 HTML 檔案形式部署至 GoHighLevel，涵蓋架構、CSS/JS 模式、效能陷阱，以及常見 GHL 問題的解決方案。
關鍵技術棧
- 單一 HTML 檔案（無建置工具 — GHL 不支援框架）
- Tailwind CDN（
https://cdn.tailwindcss.com） - Google Fonts 透過 CDN
- 外部 CDN 資源（filesafe.space 或類似服務）
關鍵 GHL 解決方案
滿版突破： 使用 .ghl-wrapper，搭配 width: 100vw; left: 50%; transform: translateX(-50%)
固定定位的解決方案： 透過 JavaScript 將固定元素移至 document.body，因為 transform 會破壞固定定位的行為。
頁面結構（轉換順序）
遵循 Problem-Agitation-Solution (PAS) 框架，各區塊依序為：
英雄區 → 社會證明 → 說明 → 案例研究 → 問題/激化 → 運作方式 → 特色 → 優點 → 定價 → 團隊 → 常見問題 → 最終行動呼籲 → 頁尾
必備 CSS 動畫
建議使用 IntersectionObserver 淡入效果、交錯延遲、CTA 脈衝、卡片網格的懸停模糊效果、玻璃擬態，以及動態漸層徽章等模式。
關鍵影片規則
使用： <video autoplay loop muted playsinline>（簡單做法）
避免： preload 屬性、loading="lazy" 或懶加載腳本—這些會破壞自動播放功能。
壓縮目標： 影片小於 5MB，720p H.264，位元率 1-2Mbps，循環影片最長 30 秒。
定價區塊的最佳做法
三欄式佈局：月繳 | 年繳（置中、縮放 1.10、深色背景、熱門標籤、脈衝 CTA）| 半年繳。包含劃掉的原價和節省金額計算。
圖片最佳化
上傳前調整大小：頭像 ≤100×100px，卡片 ≤400×400px，英雄區 ≤1200px 寬度。偏好使用 WebP/AVIF 格式。加上 width 和 height 屬性；折線以下使用 loading="lazy"。
頁面速度目標
| 指標 | 目標 |
|---|---|
| LCP | < 2.5 秒 |
| TBT | < 300 毫秒（Tailwind CDN 約增加 1.3 秒以上） |
| CLS | < 0.1 |
| FCP | < 1.8 秒 |
壓縮影片和圖片，加入 preconnect 連結，使用非同步解碼。
強制效能檢查（本機 Lighthouse）
在通過此測試之前，不要認為頁面已經準備好。 頁面載入慢 = 訪客在載入前離開 = 流量轉換率低。我們在上線前就進行驗證，而不是在花錢投廣告之後才做。
此測試在慢速 4G 網路的手機模擬環境下執行 — 這正是從廣告點擊進來的訪客的真實情境。
執行方式（在 index.html 所在的資料夾中）：
bash ~/.claude/skills/ghl-landing-page/lh-check.sh .
該腳本會啟動本機頁面（npx serve）、執行 Lighthouse（npx lighthouse — 無需安裝，已快取）、列印分數 + Core Web Vitals + 最大的改善機會、自動關閉伺服器，並回傳：
- exit 0 → 通過（分數 ≥90，LCP <2.5 秒，TBT <300 毫秒，CLS <0.1）→ 可以發布
- exit 1 → 未通過 → 閱讀輸出中的「最大改善機會」，修正後重新執行。重複直到通過。
如果未通過，請依此順序處理（效益最大者優先）：
- Tailwind CDN 是 TBT 的頭號殺手。 正式上線時，請編譯 Tailwind CLI（清除未使用的類別 → CSS 約 5-15KB）並內嵌於
<head>中，取代cdn.tailwindcss.com。光是這一步通常就能挽救分數。 - 背景影片 — 首次繪製時使用靜態海報；載入完成後才切換成影片。保持 <5MB，720p。
- 圖片 — WebP/AVIF 格式，加上
width/height屬性（避免 CLS）。
上線後，請透過 PageSpeed Insights 在真實的 GHL URL 上進行最終檢查（GHL 的包裝器/CDN 會增加本機測試無法捕捉到的額外負擔）。
常見陷阱與修正
| 問題 | 修正 |
|---|---|
| GHL 中的邊框 | 套用 ghl-wrapper 滿版解決方案 |
| 影片自動播放失敗 | 移除 preload，保留 muted 屬性 |
| 定價版面在行動裝置上斷掉 | 將劃掉的價格獨立一行，縮小字型 |
| 頭像照片過大 | 上傳前調整為 100×100 |