Above the fold : les 5 secondes qui décident si votre visiteur reste ou part
80 % du temps passé sur une page se concentre sur la zone visible sans scroll. Ce que votre visiteur voit en premier détermine tout — headline, CTA, visuel, hiérarchie. Voici comment l'optimiser.
Thomas Leclerc
4 juillet 2026
- 1.C'est quoi l'above the fold ?
- 2.Pourquoi les 5 premières secondes décident
- 3.Les éléments indispensables dans la zone visible
- 4.Hiérarchie visuelle — guider l'œil
- 5.Le CTA : placement, couleur, formulation
- 6.Mobile first : above the fold sur smartphone
- 7.Vitesse et LCP — l'impact SEO
- 8.Ce qui tue votre above the fold
- 9.Tests A/B et optimisation continue
- 10.Exemples analysés — bon vs mauvais
- 11.Checklist — 16 points clés
- 12.FAQ
1.C'est quoi l'above the fold ?
L'"above the fold" (au-dessus de la ligne de flottaison) désigne la partie d'une page web visible à l'écran sans qu'il soit nécessaire de faire défiler. L'expression vient de la presse papier : le haut d'un journal, plié en deux, exposait les titres les plus importants dans les kiosques.
Sur le web, cette zone varie selon l'appareil, la résolution et la taille de la barre de navigation. Sur un iPhone SE en 2026, vous disposez d'environ 550 pixels de hauteur utile. Sur un desktop 1440px, environ 800 pixels. Ce que vous placez dans cet espace limité détermine si le visiteur continue à lire — ou clique sur "retour".
en lien avec l'offre
↓ Below the fold — visible uniquement après scroll
L'above the fold n'est pas une zone figée : elle change à chaque résolution. Concevez toujours en mobile first (375px) puis vérifiez sur desktop. Ne jamais supposer que le visiteur scrollera spontanément.
2.Pourquoi les 5 premières secondes décident
Les études de Nielsen Norman Group — la référence mondiale en UX research — montrent que les utilisateurs forment leur première impression d'un site en 50 millisecondes (une étude canadienne de 2006, répliquée depuis). La décision de rester ou partir prend moins de 5 secondes.
55 %
des visiteurs passent moins de 15 secondes sur une page
Nielsen Norman Group
80 %
du temps passé est concentré sur la zone visible initiale
Eye tracking studies
57 %
du trafic web mondial est sur mobile en 2026
StatCounter
3 sec
pour qu'un visiteur décide de rester ou partir
Google / Think
Ces 5 secondes ne sont pas une fenêtre pour tout dire : c'est une fenêtre pour répondre à une seule question dans la tête du visiteur — "Suis-je au bon endroit ?" Si votre above the fold ne répond pas clairement à cette question, le visiteur part.
Les 3 questions auxquelles votre zone visible doit répondre
- Qui êtes-vous ? Nom, secteur, positionnement en une ligne
- Que proposez-vous ? L'offre principale, concrète et spécifique
- Que dois-je faire ? Une action claire, une seule, visible immédiatement
Conseil Pro
3.Les éléments indispensables dans la zone visible
Une zone hero efficace n'est pas chargée — elle est précise. Voici les éléments qui doivent absolument apparaître dans la zone visible initiale, par ordre de priorité.
Headline (H1)
Votre proposition de valeur en une ou deux lignes. Ce n'est pas votre slogan — c'est la réponse à "qu'est-ce que je gagne si je reste ?". Soyez spécifique : "Site vitrine livré en 7 jours, dès 490€" > "Nous créons votre présence digitale".
Sous-titre
2 à 3 lignes qui complètent la headline : pour qui, avec quel résultat, et qui lève une objection courante. "Pour les PME qui veulent un site professionnel sans passer 3 mois en réunions."
CTA principal
Un seul bouton d'action, visuellement dominant. Verbe d'action + bénéfice. Accessible sans scroll, avec assez d'espace autour pour ne pas être noyé.
Visuel / image hero
Une image qui illustre concrètement l'offre ou son résultat — pas une photo de poignée de main. Screenshot produit, photo d'équipe en action, ou illustration de l'interface.
Preuve sociale rapide
Un micro-élément de réassurance : note étoiles, nombre de clients, logo presse, ou avatars clients. Pas besoin de place — 20px de hauteur suffisent.
4.Hiérarchie visuelle — guider l'œil
La hiérarchie visuelle détermine l'ordre dans lequel l'œil lit les éléments d'une page. Un bon design guide le regard de l'élément le plus important vers le CTA, naturellement, sans effort cognitif.
L'œil lit la première ligne en entier (barre du F), puis une ligne partielle au milieu, puis scanne verticalement le bord gauche.
→ Implication design
Placez les informations les plus importantes au début de chaque ligne et en haut à gauche.
L'œil commence en haut à gauche (logo), traverse vers la droite (CTA/nav), descend en diagonale, puis traverse à nouveau vers la droite (CTA principal).
→ Implication design
Placez votre CTA en haut à droite ET en bas à droite — les deux points terminaux naturels du Z.
Les 3 outils de hiérarchie visuelle
- La taille : ce qui est grand est perçu comme important. Le titre doit être notablement plus grand que le sous-titre, lui-même plus grand que le corps de texte
- Le contraste : fond sombre + texte clair, ou l'inverse. Le CTA doit avoir un contraste fort par rapport au fond pour "sauter aux yeux"
- L'espace blanc : ce qui est entouré d'espace vide attire le regard. N'encombrez pas votre above the fold — chaque élément supplémentaire dilue l'attention sur le CTA
Conseil Pro
5.Le CTA : placement, couleur, formulation
Le CTA (Call To Action) est l'élément le plus important de votre above the fold. Tout le reste est là pour le mettre en valeur. Un CTA mal formulé ou mal placé peut diviser votre taux de conversion par 2 — même avec un texte et une image parfaits.
❌ CTA inefficace
Vague — en savoir plus sur quoi ?
Sans bénéfice ni contexte
Jargon formulaire, pas d'engagement émotionnel
Froid, transactionnel, aucune promesse
✓ CTA efficace
Bénéfice clair + sans risque (gratuit)
Verbe d'action + appartenance (mon)
Transparent, informe avant d'engager
Spécifique + délai = promesse mesurable
Règles de placement
- Visible sans scroll sur tous les écrans — testez sur 375px de large minimum
- Accompagné d'un micro-texte de réassurance juste en dessous : "Gratuit, sans engagement" ou "Réponse sous 24h"
- Pour le patron Z (landing pages) : placez un second CTA en bas à droite de l'above the fold
- Espace minimum autour du bouton : 16px — un CTA trop serré perd en impact visuel
Couleur et contraste
Le bouton CTA doit utiliser la couleur d'accent de votre charte — pas le même bleu que votre fond ou vos liens. Le ratio de contraste WCAG AA (4,5:1) est un minimum légal en accessibilité, mais visez 7:1 pour un impact maximal. Testez avec l'outil gratuit "WebAIM Contrast Checker".
6.Mobile first : above the fold sur smartphone
En 2026, 57 % du trafic web mondial arrive sur mobile. Pourtant, la plupart des sites sont encore conçus sur desktop puis "adaptés" pour mobile. C'est l'inverse qu'il faut faire.
Contraintes mobiles spécifiques
- Hauteur utile réduite : après la barre d'adresse et la navigation, il reste 500 à 600px visibles sur iPhone SE. Votre headline + sous-titre + CTA doivent tenir dans cette zone
- Taille des zones tactiles : boutons ≥ 44×44px (norme Apple HIG) — un bouton trop petit génère des erreurs de clic et de la frustration
- Texte sur image : les images hero avec texte superposé sont illisibles sur mobile sans fond semi-opaque. Préférez texte d'un côté, image de l'autre
- Navigation : un menu hamburger bien visible est préférable à une navbar complète qui écrase le hero
- #1Image hero très haute (> 80vh) qui pousse le CTA hors de la zone visible — le visiteur doit scroller pour voir le bouton
- #2Titre avec font-size trop grand (> 48px) qui force 6–7 lignes sur 375px et noie le contenu
- #3Vidéo en autoplay sans mute — coûteuse en data mobile et intrusive
- #4Popup qui s'affiche immédiatement au chargement sur mobile — Google peut pénaliser depuis 2017
7.Vitesse et LCP — l'impact SEO
L'above the fold a un impact direct sur votre SEO via le LCP (Largest Contentful Paint) — l'un des 3 Core Web Vitals de Google. Le LCP mesure le temps de chargement du plus grand élément visible dans la zone hero, généralement votre image ou titre principal.
- LCP ≤ 2,5 secondes : bon — Google classe votre page comme rapide
- LCP entre 2,5 et 4 secondes : à améliorer
- LCP > 4 secondes : mauvais — pénalisation SEO potentielle et taux de rebond élevé
Comment optimiser le LCP de votre hero
- Image hero en WebP ou AVIF — 30 à 50 % plus légère qu'un JPEG équivalent
- Taille de l'image adaptée à la résolution — inutile de charger 2400px pour un mobile 375px
loading="eager"oupriority(Next.js) sur l'image hero — ne jamais mettre lazy loading sur l'élément above the fold- Attributs
widthetheightdéclarés — évite le CLS (Cumulative Layout Shift) pendant le chargement - Police de titre pré-chargée avec
font-display: swap— le texte est visible pendant le chargement de la fonte
Votre above the fold convertit-il vraiment ?
Audit UX + performance gratuit — analyse de votre zone hero en 48h.
8.Ce qui tue votre above the fold
- #1Headline générique ("Bienvenue", "Experts en", "Solutions innovantes") — sans proposition de valeur concrète
- #2Carrousel en autoplay — réduit les clics sur le CTA, alourdit la page, problèmes d'accessibilité
- #33 CTA ou plus dans la même zone — l'utilisateur paralysé ne clique sur rien
- #4Image de stock cliché (poignée de main, groupe souriant en réunion) — aucune confiance, aucun différentiel
- #5Popup ou chatbot qui s'ouvre au chargement — cache le contenu et irrite immédiatement
- #6Navigation complexe qui écrase visuellement le hero — 12 liens dans la nav = 12 distractions
9.Tests A/B et optimisation continue
Même un above the fold bien conçu peut être amélioré. Les tests A/B permettent de valider des hypothèses avec de vraies données — pas des opinions. Testez un seul élément à la fois pour des résultats interprétables.
| Élément à tester | Variante A | Variante B | Impact moyen |
|---|---|---|---|
| Headline | "Agence web à Lyon" | "Votre site vitrine en 7 jours, dès 490€" | +18 à +35 % de conversion |
| Couleur du CTA | Gris / noir | Couleur d'accent contrastante | +10 à +25 % |
| Formulation du CTA | "En savoir plus" | "Obtenir mon devis gratuit" | +15 à +40 % |
| Image hero | Photo stock générique | Photo équipe réelle ou screenshot produit | +8 à +20 % |
| Preuve sociale | Absente | "+120 clients satisfaits / 4,9★" | +12 à +30 % |
| Sous-titre | Description de l'entreprise | Bénéfice client + objection levée | +10 à +20 % |
Outils de test A/B
- Google Optimize : gratuit (fin de vie mais alternatives comme Optimizely, VWO ou ABTasty)
- Microsoft Clarity : gratuit — heatmaps et enregistrements de sessions pour comprendre le comportement
- Hotjar : heatmaps, scrollmaps et sondages — parfait pour identifier où les utilisateurs s'arrêtent
Conseil Pro
10.Exemples analysés — bon vs mauvais
Voici une analyse côte à côte d'un above the fold typique mal optimisé vs un above the fold converti. Les principes s'appliquent à tout type de site vitrine, landing page ou e-commerce.
❌ Above the fold défaillant
• Headline vague — "Bienvenue" n'informe pas
• 3 CTA en compétition — aucune priorité claire
• Image décorative sans lien avec l'offre
• Texte illisible sur fond photo sans contraste
✓ Above the fold optimisé
• Headline spécifique — qui / quoi en 3 secondes
• 1 CTA principal + 1 secondaire discret
• Preuve sociale visible (avatars + note)
• Navigation épurée — 3 liens + CTA nav
La différence entre les deux n'est pas une question de budget ou de technologie. C'est une question de clarté du message + hiérarchie visuelle + CTA unique. Un simple site peut convertir mieux qu'un site à 50 000€ s'il répond clairement à "pourquoi vous, pourquoi maintenant".
11.Checklist interactive — 16 points clés
Auditez votre above the fold avec ces 16 points. Cliquez pour valider ou marquer les points à améliorer.
Votre above the fold — 16 points
Cliquez pour basculer : À faire → OK → À revoir
0/16
validés
Contenu & clarté
Design & hiérarchie
Mobile
Performance & SEO
Priorité absolue : commencez par le contenu et la clarté.
12.FAQ
Lire aussi