GoHighLevel着陆页指南
概述
本指南介绍如何创建作为单个HTML文件的高转化率着陆页，用于GoHighLevel部署，涵盖架构、CSS/JS模式、性能陷阱以及常见GHL问题的解决方案。
核心技术栈
- 单个HTML文件（无构建工具——GHL不支持框架）
- Tailwind CDN（
https://cdn.tailwindcss.com） - 通过CDN引入Google Fonts
- 外部CDN资源（filesafe.space或类似平台）
关键GHL解决方案
全宽溢出： 使用 .ghl-wrapper 配合 width: 100vw; left: 50%; transform: translateX(-50%)
固定定位变通方案： 通过JavaScript将固定定位元素移动到 document.body，因为 transform 会破坏固定定位的行为。
页面结构（转化顺序）
遵循问题-煽动-解决方案（PAS）框架，板块顺序如下：
英雄区 → 社交证明 → 解释说明 → 案例研究 → 问题/煽动 → 运作方式 → 功能 → 优势 → 定价 → 团队 → 常见问题 → 最终行动号召 → 页脚
基本CSS动画
推荐使用IntersectionObserver实现淡入动画、交错延迟、行动号召按钮脉冲效果、卡片网格的悬停模糊效果、玻璃态以及动画渐变徽章。
关键视频规则
使用： <video autoplay loop muted playsinline>（简单方法）
避免： preload 属性、loading="lazy" 或延迟加载脚本——这些都会破坏自动播放功能。
压缩目标： 视频低于5MB，720p H.264，码率1-2Mbps，循环时长不超过30秒。
定价板块最佳实践
三卡片布局：月度 | 年度（居中，缩放1.10倍，深色背景，热门徽章，脉冲行动号召按钮） | 半年度。包含划掉的原价和节省金额计算。
图片优化
上传前调整尺寸：头像≤100×100px，卡片≤400×400px，英雄区≤1200px宽度。优先使用WebP/AVIF格式。添加 width 和 height 属性；在首屏下方使用 loading="lazy"。
PageSpeed目标
| 指标 | 目标 |
|---|---|
| LCP | < 2.5秒 |
| TBT | < 300毫秒（Tailwind CDN额外增加约1.3秒以上） |
| CLS | < 0.1 |
| FCP | < 1.8秒 |
压缩视频和图片，包含预连接链接，使用异步解码。
必选性能检查（本地Lighthouse）
在通过此项测试之前，切勿将页面视为准备就绪。 页面加载慢 = 潜在客户在加载完成前离开 = 流量转化率低。我们在上线之前进行验证，而不是在广告费用消耗之后。
测试在慢速4G网络的移动设备模拟环境下运行——这是来自广告的潜在客户的实际场景。
运行方法（在包含 index.html 的目录中）：
bash ~/.claude/skills/ghl-landing-page/lh-check.sh .
该脚本会本地启动页面（npx serve），运行Lighthouse（npx lighthouse——无需安装，已缓存），打印评分 + 核心网页指标 + 最大的优化机会，自动关闭服务器，并返回：
- 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像素 |