Above the fold : optimiser la première impression d'une landing page

En bref — Le above the fold est la partie d'une landing page visible immédiatement, sans que le visiteur n'ait besoin de scroller. Selon les études, 80 % du temps de lecture est consacré au contenu above the fold. C'est là que se joue la décision de rester ou de quitter. Cette zone doit répondre en 5 secondes à la question du visiteur : "Suis-je au bon endroit ?"

Qu'est-ce que le above the fold ?

Le terme "above the fold" vient de la presse imprimée — la partie du journal visible quand il est plié en deux, sans le déplier. Sur le web, c'est la portion de page visible dans la fenêtre du navigateur au chargement, sans scroll.

Pourquoi c'est critique :

• 55 % des visiteurs passent moins de 15 secondes sur une page (Nielsen Norman Group)
• 80 % de l'attention se concentre sur le contenu visible sans scroll
• Si le above the fold ne convainc pas, la majorité des visiteurs ne scrolleront jamais jusqu'aux arguments convaincants situés en bas de page

Le paradoxe de nombreuses landing pages : elles ont de bons arguments mais les enterrent sous 800 pixels de hero vague.

Quel "fold" cibler ?

Le fold varie selon le viewport de l'appareil :

| Appareil | Hauteur de viewport typique | |----------|-----------------------------| | Desktop (1920×1080) | 900-1000 px | | Laptop (1366×768) | 600-700 px | | Mobile (iPhone 14) | ~844 px | | Mobile (Android) | ~720-900 px |

En pratique : concevez pour un fold à ~600px (laptop) sur desktop et ~750px sur mobile. Ce sont les viewports les plus répandus. Testez avec Chrome DevTools en mode responsive.

Mobile first : en 2025, 60-70 % du trafic est mobile. Concevez le above the fold mobile en premier — votre desktop se dérivera naturellement.

Les 5 éléments du above the fold parfait

1. La headline (H1) : votre seule chance d'accrocher

Le H1 est l'élément le plus important de la page. Il doit répondre à : "Que m'offrez-vous et pourquoi c'est pour moi ?"

Formules H1 efficaces :

• Bénéfice + cible + différenciateur : "Générez 3× plus de leads qualifiés, sans augmenter votre budget publicitaire"
• Promesse de résultat : "Passez votre taux de conversion de 1,5 % à 4 % en 90 jours"
• Question problème : "Vous perdez 30 % de votre budget Google Ads sans le savoir ?"
• Déclaration de bénéfice : "Le tracking sans bloqueurs pour les annonceurs exigeants"

Ce qu'un H1 ne devrait pas être :

• Le nom de votre entreprise ("Bienvenue chez Kenoby")
• Un slogan vague ("L'expertise au service de votre croissance")
• Une description de fonctionnalités ("Solution de tracking server-side multi-plateformes")

2. Le sous-titre : précision et qualification

Le sous-titre (H2 ou paragraphe) complète le H1 en précisant :

• Pour qui c'est conçu
• Ce que ça inclut concrètement
• La modalité (gratuit, sans engagement, délai)

"Pour les PME et agences qui investissent > 1 000 €/mois en Google Ads. Audit complet de votre compte + plan d'action personnalisé. Résultats garantis ou remboursé."

3. Le visuel hero

Le visuel renforce le message et crée une connexion émotionnelle. Types de visuels par efficacité :

Visage humain (le plus efficace) Un visage souriant en contexte d'usage attire l'attention et génère de la confiance. Si votre audience est des entrepreneurs ou des marketers, montrez un profil qui leur ressemble.

Screenshot ou démonstration produit Pour un SaaS ou un outil digital, montrez l'interface en action — pas un visuel abstrait.

Résultat "après" Une courbe de conversion qui monte, un dashboard de résultats, un avant/après visuel. Le résultat concret est plus convaincant qu'une illustration générique.

À éviter :

• Stock photos génériques (bureau vide, poignée de main)
• Illustrations abstraites sans lien avec l'offre
• Visuels très lourds qui ralentissent le chargement (LCP dégradé)

4. Le CTA primaire : visible et orienté bénéfice

Le CTA doit être visible sans chercher, avec un texte qui décrit ce que l'utilisateur reçoit (et non ce qu'il fait).

Positionnement :

• Desktop : à droite du texte ou en dessous du H1 + sous-titre
• Mobile : en dessous du H1, plein largeur (min. 48px de hauteur)

Couleur : contrastée par rapport au fond. Si votre charte est bleu, le CTA peut être orange ou vert.

Texte : "Obtenir mon audit gratuit" > "En savoir plus" > "Contactez-nous" > "Envoyer"

5. La preuve sociale rapide (social proof instantané)

Une preuve sociale courte juste en dessous du CTA réduit l'anxiété d'action.

Formats compacts :

• Étoiles + note : "⭐⭐⭐⭐⭐ 4,9/5 basé sur 87 avis"
• Nombre de clients : "Rejoint par 2 300 entreprises"
• Logos clients : 4-5 logos reconnus sur une ligne
• Presse : "Comme vu dans [Logo médias]"

Ce qu'il ne faut pas mettre above the fold

• La navigation complète : sur les landing pages campagne, supprimez ou minimisez la navigation
• Trop de texte : le above the fold doit être scannable en 3-5 secondes
• Plusieurs CTA concurrents : un seul CTA primaire
• Animations lourdes : elles ralentissent le chargement et distraient du message
• Pop-up au chargement : c'est l'une des causes #1 de rebond immédiat

Les tests A/B à faire en priorité sur le above the fold

1. H1 : angle bénéfice vs angle problème, avec vs sans chiffres, court vs développé
2. CTA : texte du bouton (3-4 variantes), couleur, position (droite vs centré sous le H1)
3. Visuel : personne vs screenshot produit, visuel contextuel vs abstrait
4. Preuve sociale : avis vs logos vs chiffres, présent vs absent

Le H1 est systématiquement le test à lancer en premier — il a le plus fort potentiel d'impact.

FAQ above the fold

Le above the fold a-t-il une importance pour le SEO ?

Indirectement. Google évalue l'expérience utilisateur — si les visiteurs rebondissent immédiatement (mauvais above the fold), c'est un signal négatif. Le Largest Contentful Paint (LCP), qui mesure la vitesse d'affichage du contenu principal, est un Core Web Vital et facteur de ranking direct.

Faut-il mettre le formulaire above the fold ?

Pour les offres simples et gratuites (guide, newsletter, devis rapide) : oui, souvent efficace. Pour les offres complexes ou payantes : pas nécessairement — un CTA "Découvrir" ou "Voir les tarifs" above the fold peut être plus naturel que forcer un formulaire complet trop tôt.

Le above the fold change-t-il selon la source de trafic ?

Oui. Un visiteur Google Ads qui a cliqué sur "Audit Google Ads gratuit" attend de voir exactement ces mots dans le H1. Un visiteur organique peut arriver avec une intention légèrement différente. Si vous avez des volumes suffisants, personnalisez le H1 selon la source (dynamic text replacement).

---

Kenoby conçoit les sections hero des landing pages pour maximiser la rétention initiale et le taux de conversion des campagnes publicitaires.