igorbritoeali/ghl-landing-page-skill

Guía de Página de Aterrizaje para GoHighLevel

Resumen

Esta guía cubre la creación de páginas de aterrizaje de alta conversión como archivos HTML únicos para su implementación en GoHighLevel, abordando la arquitectura, patrones CSS/JS, problemas de rendimiento y soluciones para errores comunes de GHL.

Stack Técnico Clave

• Archivo HTML único (sin herramientas de compilación — GHL no soporta frameworks)
• Tailwind CDN (https://cdn.tailwindcss.com)
• Google Fonts vía CDN
• Activos CDN externos (filesafe.space o similar)

Soluciones Críticas para GHL

Salida de ancho completo: Usa .ghl-wrapper con width: 100vw; left: 50%; transform: translateX(-50%)

Solución para posicionamiento fijo: Mueve los elementos fijos a document.body mediante JavaScript porque transform interrumpe el comportamiento de posicionamiento fijo.

Estructura de la Página (Orden de Conversión)

Sigue el marco Problema-Agitación-Solución (PAS) con las secciones:

Hero → Prueba Social → Explicación → Casos de Estudio → Problema/Agitación → Cómo Funciona → Características → Beneficios → Precios → Equipo → Preguntas Frecuentes → Llamada a la Acción Final → Pie de Página

Animaciones CSS Esenciales

Se recomiendan patrones como: fade-up con IntersectionObserver, retrasos escalonados, pulsación de CTA, efectos de desenfoque al pasar el ratón en cuadrículas de tarjetas, vidrio esmerilado, y insignias con degradado animado.

Reglas Críticas de Video

Usa: <video autoplay loop muted playsinline> (enfoque simple)

Evita: atributos preload, loading="lazy", o scripts de carga diferida — estos rompen la funcionalidad de reproducción automática.

Objetivo de compresión: Videos de menos de 5MB, 720p H.264, tasa de bits de 1-2Mbps, máximo 30 segundos para bucles.

Mejor Práctica para Sección de Precios

Diseño de tres tarjetas: Mensual | Anual (centrado, escalado 1.10, fondo oscuro, insignia popular, CTA pulsante) | Semestral. Incluye precios tachados y cálculo de ahorro.

Optimización de Imágenes

Redimensiona antes de subir: avatares ≤100×100px, tarjetas ≤400×400px, héroes ≤1200px de ancho. Prefiere formatos WebP/AVIF. Añade atributos width y height; usa loading="lazy" debajo del pliegue.

Objetivos de PageSpeed

Métrica	Objetivo
LCP	< 2.5s
TBT	< 300ms (Tailwind CDN añade ~1.3s+)
CLS	< 0.1
FCP	< 1.8s

Comprime videos e imágenes, incluye enlaces de pre-conexión, usa decodificación asíncrona.

Portão de Performance OBRIGATÓRIO (Lighthouse Local)

No des la página por terminada ANTES de pasar esta prueba. Página lenta = lead sale antes de cargar = tasa de conexión baja en el tráfico. Validamos ANTES de subir, no después de gastar en anuncios.

La prueba se ejecuta en emulación móvil con 4G lento — el escenario real del lead que llega desde el anuncio.

Cómo ejecutar (en la carpeta donde está index.html):

bash ~/.claude/skills/ghl-landing-page/lh-check.sh .

El script levanta la página local (npx serve), ejecuta Lighthouse (npx lighthouse — sin instalar nada, ya cacheado), imprime la puntuación + Core Web Vitals + las mayores oportunidades, apaga el servidor solo y devuelve:

• exit 0 → APROBADO (puntuación ≥90, LCP <2.5s, TBT <300ms, CLS <0.1) → se puede publicar
• exit 1 → REPROBADO → lee las "Mayores oportunidades" en la salida, corrige y vuelve a ejecutar. Repite hasta aprobar.

Si reprueba, ataca en este orden (mayor ganancia primero):

1. Tailwind CDN es el villano nº1 de TBT. Para producción, compila con Tailwind CLI (purga clases no usadas → CSS ~5-15KB) e inclúyelo en línea en <head> en lugar de cdn.tailwindcss.com. Por sí solo esto suele salvar la puntuación.
2. Video de fondo — póster estático en el primer pintado; solo cambia al video después de cargado. Mantén <5MB, 720p.
3. Imágenes — WebP/AVIF, con width/height (evita CLS).

Después de estar en línea, haz una comprobación final en la URL real de GHL con PageSpeed Insights (el wrapper/CDN de GHL añade peso que la prueba local no captura).

Problemas Comunes y Soluciones

Problema	Solución
Bordes en GHL	Aplica la solución ghl-wrapper de ancho completo
Reproducción automática de video falla	Elimina preload, mantén el atributo muted
Diseño de precios se rompe en móvil	Separa el precio tachado a su propia línea, reduce el tamaño de fuente
Fotos de avatar enormes	Redimensiona a 100×100 antes de subir