GoHighLevel Landing Page Guide
Overview
This guide covers creating high-conversion landing pages as single HTML files for GoHighLevel deployment, addressing architecture, CSS/JS patterns, performance pitfalls, and solutions to common GHL issues.
Key Technical Stack
- Single HTML file (no build tools — GHL doesn't support frameworks)
- Tailwind CDN (
https://cdn.tailwindcss.com) - Google Fonts via CDN
- External CDN assets (filesafe.space or similar)
Critical GHL Solutions
Full-width breakout: Use .ghl-wrapper with width: 100vw; left: 50%; transform: translateX(-50%)
Fixed positioning workaround: Move fixed elements to document.body via JavaScript because transform disrupts fixed positioning behavior.
Page Structure (Conversion Order)
Follow Problem-Agitation-Solution (PAS) framework with sections:
Hero → Social Proof → Explanation → Case Studies → Problem/Agitation → How It Works → Features → Benefits → Pricing → Team → FAQ → Final CTA → Footer
Essential CSS Animations
Fade-up with IntersectionObserver, stagger delays, CTA pulsing, hover blur effects on card grids, glassmorphism, and animated gradient badges are recommended patterns.
Critical Video Rules
Use: <video autoplay loop muted playsinline> (simple approach)
Avoid: preload attributes, loading="lazy", or lazy-load scripts — these break autoplay functionality.
Compression target: Videos under 5MB, 720p H.264, 1-2Mbps bitrate, max 30 seconds for loops.
Pricing Section Best Practice
Three-card layout: Monthly | Annual (centered, scaled 1.10, dark background, popular badge, pulsing CTA) | Semi-annual. Include struck-through pricing and savings calculation.
Image Optimization
Resize before upload: avatars ≤100×100px, cards ≤400×400px, heroes ≤1200px width. Prefer WebP/AVIF formats. Add width and height attributes; use loading="lazy" below fold.
PageSpeed Targets
| Metric | Target |
|---|---|
| LCP | < 2.5s |
| TBT | < 300ms (Tailwind CDN adds ~1.3s+) |
| CLS | < 0.1 |
| FCP | < 1.8s |
Compress videos and images, include preconnect links, use async decoding.
Portão de Performance OBRIGATÓRIO (Lighthouse Local)
Não dê a página como pronta antes de PASSAR neste teste. Página lenta = lead sai antes de carregar = connect rate baixo no tráfego. A gente valida ANTES de subir, não depois de gastar em ads.
O teste roda em emulação mobile com 4G lento — o cenário real do lead vindo do anúncio.
Como rodar (na pasta onde está o index.html):
bash ~/.claude/skills/ghl-landing-page/lh-check.sh .
O script sobe a página local (npx serve), roda o Lighthouse (npx lighthouse — sem instalar nada, já cacheado), imprime score + Core Web Vitals + as maiores oportunidades, derruba o servidor sozinho e retorna:
- exit 0 → PASSOU (score ≥90, LCP <2.5s, TBT <300ms, CLS <0.1) → pode publicar
- exit 1 → REPROVOU → leia as "Maiores oportunidades" no output, corrija e rode de novo. Loop até passar.
Se reprovar, ataque nesta ordem (maior ganho primeiro):
- Tailwind CDN é o vilão nº1 de TBT. Para produção, compile o Tailwind CLI (purga classes não usadas → CSS ~5-15KB) e inline no
<head>em vez docdn.tailwindcss.com. Sozinho isso costuma salvar o score. - Vídeo de fundo — poster estático no primeiro paint; só troca pelo vídeo depois de carregado. Mantenha <5MB, 720p.
- Imagens — WebP/AVIF, com
width/height(evita CLS).
Depois de no ar, faça um check final na URL real do GHL pelo PageSpeed Insights (o wrapper/CDN do GHL adiciona peso que o teste local não captura).
Common Pitfalls & Fixes
| Issue | Fix |
|---|---|
| Bordered edges in GHL | Apply ghl-wrapper full-width solution |
| Video autoplay fails | Remove preload, keep muted attribute |
| Pricing layout breaks mobile | Separate struck price to own line, reduce font size |
| Avatar photos huge | Resize to 100×100 before uploading |