igorbrtoali/ghl-landing-page-skill

GoHighLevel Landing Page Guide

Übersicht

Dieser Leitfaden behandelt die Erstellung von Hochkonversions-Landingpages als einzelne HTML-Dateien für die GoHighLevel-Bereitstellung und befasst sich mit Architektur, CSS/JS-Mustern, Performance-Fallstricken und Lösungen für häufige GHL-Probleme.

Wichtigster Technologie-Stack

• Einzelne HTML-Datei (keine Build-Tools – GHL unterstützt keine Frameworks)
• Tailwind CDN (https://cdn.tailwindcss.com)
• Google Fonts per CDN
• Externe CDN-Assets (filesafe.space oder ähnlich)

Kritische GHL-Lösungen

Full-Width-Breakout: Verwenden Sie .ghl-wrapper mit width: 100vw; left: 50%; transform: translateX(-50%)

Workaround für Fixed-Positionierung: Verschieben Sie fixierte Elemente per JavaScript an document.body, da transform das Verhalten der Fixed-Positionierung beeinträchtigt.

Seitenstruktur (Reihenfolge der Konversion)

Folgen Sie dem Problem-Agitation-Solution (PAS)-Framework mit diesen Abschnitten:

Hero → Social Proof → Erklärung → Fallstudien → Problem/Agitation → Funktionsweise → Features → Vorteile → Preise → Team → FAQ → Finaler CTA → Footer

Essenzielle CSS-Animationen

Empfohlen werden Fade-up mit IntersectionObserver, Staffelungsverzögerungen, CTA-Pulsieren, Hover-Blur-Effekte auf Kartenrastern, Glassmorphismus und animierte Verlaufs-Badges.

Kritische Videoregeln

Verwenden: <video autoplay loop muted playsinline> (einfacher Ansatz)

Vermeiden: preload-Attribute, loading="lazy" oder Lazy-Load-Skripte – diese unterbrechen die Autoplay-Funktionalität.

Kompressionsziel: Videos unter 5MB, 720p H.264, 1-2 MBit/s Bitrate, maximal 30 Sekunden für Loops.

Best Practice für Preisabschnitte

Dreispaltiges Layout: Monatlich | Jährlich (zentriert, 1,10-fach skaliert, dunkler Hintergrund, Popularitäts-Badge, pulsierender CTA) | Halbjährlich. Enthalten Sie durchgestrichene Preise und Sparberechnung.

Bildoptimierung

Vor dem Hochladen skalieren: Avatare ≤100×100px, Karten ≤400×400px, Helden ≤1200px Breite. Bevorzugen Sie WebP/AVIF-Formate. Fügen Sie width- und height-Attribute hinzu; verwenden Sie loading="lazy" unterhalb des Seitenumbruchs.

PageSpeed-Ziele

Metrik	Ziel
LCP	< 2,5 s
TBT	< 300 ms (Tailwind CDN fügt ~1,3 s+ hinzu)
CLS	< 0,1
FCP	< 1,8 s

Komprimieren Sie Videos und Bilder, fügen Sie Preconnect-Links hinzu und verwenden Sie asynchrones Dekodieren.

Performance-Tor WÄHLEND (Lighthouse Local)

Geben Sie die Seite nicht als fertig aus, bevor Sie diesen Test bestanden haben. Langsame Seite = Lead verlässt vor dem Laden = niedrige Connect-Rate im Traffic. Wir validieren VOR dem Hochladen, nicht nachdem wir für Anzeigen ausgegeben haben.

Der Test läuft in mobiler Emulation mit langsamem 4G – dem realen Szenario des Leads, der aus der Anzeige kommt.

So führen Sie ihn aus (im Ordner, in dem sich index.html befindet):

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

Das Skript startet die lokale Seite (npx serve), führt Lighthouse aus (npx lighthouse – ohne Installation, bereits zwischengespeichert), gibt den Score + die Core Web Vitals + die größten Chancen aus, fährt den Server automatisch herunter und gibt zurück:

• exit 0 → BESTANDEN (Score ≥90, LCP <2,5 s, TBT <300 ms, CLS <0,1) → kann veröffentlicht werden
• exit 1 → DURCHGEFALLEN → lesen Sie die „Größten Chancen" in der Ausgabe, korrigieren Sie sie und führen Sie das Skript erneut aus. Wiederholen, bis bestanden.

Wenn Sie durchfallen, gehen Sie in dieser Reihenfolge vor (größter Gewinn zuerst):

1. Tailwind CDN ist der Übeltäter Nr. 1 für TBT. Kompilieren Sie für die Produktion das Tailwind CLI (bereinigt ungenutzte Klassen → CSS ~5-15KB) und inline im <head> anstelle von cdn.tailwindcss.com. Allein das rettet oft den Score.
2. Hintergrundvideo – statisches Poster beim ersten Paint; erst nach dem Laden durch das Video ersetzen. Halten Sie <5MB, 720p.
3. Bilder – WebP/AVIF, mit width/height (vermeidet CLS).

Führen Sie nach der Veröffentlichung eine finale Überprüfung an der echten GHL-URL mit PageSpeed Insights durch (der GHL-Wrapper/das CDN fügt Gewicht hinzu, das der lokale Test nicht erfasst).

Häufige Fallstricke und Lösungen

Problem	Lösung
Umrandete Kanten in GHL	ghl-wrapper Full-Width-Lösung anwenden
Video-Autoplay schlägt fehl	preload entfernen, muted-Attribut beibehalten
Preis-Layout auf mobilen Geräten defekt	Durchgestrichenen Preis in eigene Zeile setzen, Schriftgröße reduzieren
Avatar-Fotos zu groß	Vor dem Hochladen auf 100×100 verkleinern