Au-dessus de la ligne de flottaison

Qu’est-ce que l’au-dessus de la ligne de flottaison ?

L’au-dessus de la ligne de flottaison (above the fold) est la partie d’une page visible dans la fenêtre du navigateur avant que l’utilisateur ne fasse défiler l’écran. Le terme provient des journaux imprimés, où la moitié supérieure de la première page était visible dans les kiosques à journaux. Sur le web, il n’y a pas de « pli » fixe : la limite dépend de la taille de l’écran du visiteur, de son appareil et de la fenêtre de son navigateur, de sorte que ce qui est visible sur ordinateur peut nécessiter un défilement sur mobile.

Pourquoi l’au-dessus de la ligne de flottaison est-il important ?

C’est là que vous disposez de quelques secondes pour présenter ce que vous vendez et quelle est la prochaine étape. Les études d’oculométrie (eye-tracking) de Nielsen Norman Group montrent que les utilisateurs accordent la grande majorité de leur attention au-dessus de la ligne de flottaison, même s’ils font défiler la page. Une proposition de valeur claire et un CTA visible au-dessus de la ligne de flottaison constituent donc un levier classique pour améliorer le taux de conversion d’une boutique en ligne.

Cas d’utilisation courants

• Bannière d’accueil (Hero). Affichez votre message clé, votre offre ou votre catégorie sans défiler, à la fois sur mobile et sur ordinateur.
• Page produit. Assurez-vous que le prix, le bouton « Ajouter au panier » et l’image du produit sont visibles immédiatement.
• Pages de campagne. Placez l’offre et le CTA au-dessus de la ligne de flottaison pour que le trafic issu de la publicité n’ait pas à chercher l’action.
• Core Web Vitals. Le plus grand élément au-dessus de la ligne de flottaison est souvent l’élément LCP, de sorte qu’une image de bannière lourde peut ralentir votre LCP.

Perspective Shopify

Dans Shopify, la zone située au-dessus de la ligne de flottaison est contrôlée par les sections et les blocs du thème dans l’éditeur de thème. Une erreur courante consiste à charger l’image de bannière en différé (lazy-loading) : lorsqu’elle est candidate au LCP, cela retarde le chargement et nuit aux Core Web Vitals. Configurez plutôt loading="eager" (ou fetchpriority="high") sur l’image de bannière principale et gardez la section supérieure légère. Testez toujours sur un vrai téléphone — pas seulement sur ordinateur —, car la ligne de flottaison est située beaucoup plus haut sur les petits écrans.