igorbritoeali/ghl-landing-page-skill

Guide des pages d'atterrissage GoHighLevel

Aperçu

Ce guide couvre la création de pages d'atterrissage à fort taux de conversion sous forme de fichiers HTML uniques pour le déploiement sur GoHighLevel, en abordant l'architecture, les modèles CSS/JS, les pièges de performance et les solutions aux problèmes courants de GHL.

Stack technique clé

• Fichier HTML unique (pas d'outils de build — GHL ne prend pas en charge les frameworks)
• Tailwind CDN (https://cdn.tailwindcss.com)
• Google Fonts via CDN
• Actifs CDN externes (filesafe.space ou similaire)

Solutions critiques pour GHL

Débordement pleine largeur : Utiliser .ghl-wrapper avec width: 100vw; left: 50%; transform: translateX(-50%)

Solution de contournement pour les positions fixes : Déplacer les éléments fixes vers document.body via JavaScript car transform perturbe le comportement des positions fixes.

Structure de la page (Ordre de conversion)

Suivez le framework Problème-Agitation-Solution (PAS) avec les sections :

Héro → Preuve sociale → Explication → Études de cas → Problème/Agitation → Comment ça marche → Fonctionnalités → Avantages → Prix → Équipe → FAQ → Appel à l'action final → Pied de page

Animations CSS essentielles

Les motifs recommandés incluent : fondu vers le haut avec IntersectionObserver, délais décalés, pulsation du CTA, effets de flou au survol sur les grilles de cartes, effet verre dépoli, et badges à dégradé animé.

Règles vidéo critiques

Utiliser : <video autoplay loop muted playsinline> (approche simple)

Éviter : les attributs preload, loading="lazy" ou les scripts de chargement différé — ceux-ci cassent la fonctionnalité de lecture automatique.

Objectif de compression : Vidéos sous 5 Mo, 720p H.264, débit 1-2 Mbps, max 30 secondes pour les boucles.

Bonne pratique pour la section des prix

Disposition à trois cartes : Mensuel | Annuel (centré, échelle 1.10, fond sombre, badge populaire, CTA pulsant) | Semestriel. Inclure les prix barrés et le calcul des économies.

Optimisation des images

Redimensionner avant téléchargement : avatars ≤100×100px, cartes ≤400×400px, héros ≤1200px de large. Préférer les formats WebP/AVIF. Ajouter les attributs width et height ; utiliser loading="lazy" en dessous de la ligne de flottaison.

Objectifs PageSpeed

Métrique	Objectif
LCP	< 2,5s
TBT	< 300ms (Tailwind CDN ajoute ~1,3s+)
CLS	< 0,1
FCP	< 1,8s

Compresser les vidéos et images, inclure les liens preconnect, utiliser le décodage asynchrone.

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

Não considérez la page prête avant d'avoir RÉUSSI ce test. Page lente = le lead part avant le chargement = faible taux de connexion sur le trafic. On valide AVANT de mettre en ligne, pas après avoir dépensé en pubs.

Le test s'exécute en émulation mobile avec 4G lente — le scénario réel du lead venant de l'annonce.

Comment exécuter (dans le dossier où se trouve index.html) :

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

Le script lance la page localement (npx serve), exécute Lighthouse (npx lighthouse — sans rien installer, déjà en cache), affiche le score + les Core Web Vitals + les plus grandes opportunités, arrête le serveur tout seul et retourne :

• exit 0 → RÉUSSI (score ≥90, LCP <2,5s, TBT <300ms, CLS <0,1) → peut publier
• exit 1 → ÉCHOUÉ → lisez les "Plus grandes opportunités" dans le résultat, corrigez et réexécutez. Bouclez jusqu'à réussite.

En cas d'échec, attaquez dans cet ordre (gain le plus important en premier) :

1. Tailwind CDN est le vilain n°1 du TBT. Pour la production, compilez Tailwind CLI (purge des classes inutilisées → CSS ~5-15KB) et intégrez-le en ligne dans <head> au lieu de cdn.tailwindcss.com. À lui seul, cela sauve généralement le score.
2. Vidéo de fond — poster statique au premier affichage ; ne passez à la vidéo qu'après chargement. Gardez <5 Mo, 720p.
3. Images — WebP/AVIF, avec width/height (évite le CLS).

Après mise en ligne, faites une vérification finale sur l'URL réelle du GHL via PageSpeed Insights (le wrapper/CDN de GHL ajoute du poids que le test local ne capture pas).

Pièges courants et correctifs

Problème	Correctif
Bordures dans GHL	Appliquer la solution ghl-wrapper pleine largeur
La lecture automatique vidéo échoue	Supprimer preload, garder l'attribut muted
La disposition des prix se casse sur mobile	Séparer le prix barré sur sa propre ligne, réduire la taille de police
Photos d'avatar énormes	Redimensionner à 100×100 avant téléchargement