Optimiser votre header pour un site web performant
Un header raté se mesure dans un taux de rebond qui ne bouge pas, dans un moteur de recherche interne saturé de requêtes qui existent déjà dans le menu, et dans une home que personne ne quitte jamais vers les pages les plus rentables du site.
L’Agence Galopins, agence web éco-conception installée à Nantes et à Marseille depuis 2020, travaille cette zone en premier sur chaque refonte, parce qu’un en-tête concentre à lui seul des enjeux de conception, de navigation, d’accessibilité, de référencement naturel et de poids technique que la plupart des sites traitent séparément, donc mal.
L’étude d’eye-tracking publiée par le Nielsen Norman Group en 2018, conduite auprès de 120 participants et fondée sur environ 130 000 fixations oculaires, situe 57 % du temps de regard au-dessus de la ligne de flottaison, et 74 % dans les deux premiers écrans de contenu. Le header occupe le haut de cette zone la plus regardée de toute page web. Cet article détaille les éléments clés d’un en-tête performant, les bonnes pratiques de hiérarchie visuelle qui les rendent lisibles, les exemples de headers réussis dont s’inspirer, et la façon dont un header bien construit sert le référencement naturel plutôt que de le freiner.
Qu'est-ce qu'un header, et pourquoi il est central
Un header, ou en-tête, désigne la section située en haut d’une page web, généralement composée du logo, de la navigation principale, parfois d’une barre de recherche, d’icônes de réseaux sociaux et d’un bouton d’appel à l’action. Cette section fournit aux visiteurs les repères visuels et fonctionnels dont dépend leur expérience sur l’intégralité du site : où ils se trouvent, quelle information existe ailleurs, et quelle action l’entreprise attend d’eux. Cette section partage une propriété qu’aucune autre partie du site ne possède : elle est identique partout, et elle est donc téléchargée, rendue et lue par chaque visiteur, à chaque visite, sur chaque appareil.
Cette répétition change complètement l’économie de la conception. Un élément décoratif placé dans une landing page pèse une fois. Le même élément placé dans un header pèse autant de fois qu’il y a de pages vues. Les mesures du HTTP Archive publiées dans le Web Almanac 2025 situent la home médiane à 2 559 ko sur mobile et 2 862 ko sur desktop, dont 122 ko de polices sur mobile, l’édition 2024 relevant une médiane de quatre fichiers de police chargés par page. Les polices, les icônes et le logo qui vivent dans l’en-tête représentent une part directe de ce budget, et cette part est payée sur l’intégralité du parcours. Les en-têtes sont, à ce titre, les sections d’un site dont l’optimisation se rentabilise le plus vite.
Hiérarchie visuelle du header : trois niveaux de lecture
La première bonne pratique de design d’un en-tête consiste à hiérarchiser explicitement trois niveaux et à s’y tenir:
- Le premier niveau identifie le site, c’est-à-dire le logo.
- Le deuxième oriente, c’est-à-dire le menu principal et ses catégories.
- Le troisième déclenche, c’est-à-dire un unique appel à l’action.
Tout ce qui ne relève d’aucun de ces trois niveaux relève du footer, du corps de la page, ou de rien. Les en-têtes qui échouent à hiérarchiser ne manquent jamais d’éléments : ils en ont trop, et tous réclament la même attention.
Cette hiérarchie s’obtient par le contraste, la taille et l’espacement, pas par la couleur seule. Un menu dont les libellés et le bouton d’appel à l’action partagent le même poids typographique et la même intensité chromatique ne propose aucune hiérarchie : l’utilisateur arbitre lui-même, ce qui consomme de l’attention avant même la lecture du texte.
Chez Galopins, l’arbitrage se fait en amont du design, au moment de la plateforme de marque, ce qui évite de découvrir en phase de maquette que la couleur d’accentuation retenue pour l’identité visuelle sert déjà à trois éléments différents dans l’en-tête.
Le travail mené pour l’association Toit à moi illustre cette continuité entre identité de marque et interface : le passage d’un rose fuchsia à un rouge conserve la palette chaude tout en affirmant un positionnement plus ferme. Le rouge portant la passion et l’énergie autant que la colère qui fonde l’action de l’association, et le logo devenant une signature au sens de la pétition, première étape d’un engagement citoyen. Un header hérite de ce raisonnement : la couleur qui affirme le combat ne peut pas être la même que celle qui signale un lien secondaire vers un espace membre.
Le logo dans le header : une position qui ne doit rien au hasard !
La position du logo dans l’en-tête est documentée.
L’étude publiée par Kathryn Whitenton pour le Nielsen Norman Group en 2016, menée auprès de 128 participants sur quatre sites d’hôtels, mesure une mémorisation de la marque de 39 % lorsque le logo est placé en haut à gauche contre 21 % lorsqu’il est placé à droite, soit un gain relatif de 89 %.
Une seconde étude du même institut, portant sur 50 participants et quatorze sites de mode, constate qu’un logo centré rend le retour à l’accueil en un seul clic environ six fois plus difficile, que s’il est placé à gauche.
Le logo d’un header doit rester cliquable et pointer vers l’accueil, parce que deux décennies d’usage du web ont installé ce réflexe chez les visiteurs. Il doit être fourni en SVG optimisé plutôt qu’en image bitmap reste net sur tous les écrans, y compris les affichages à haute densité, et pèse généralement quelques kilo-octets, là où une version PNG déclinée en plusieurs tailles multiplie les requêtes pour un résultat visuel inférieur.
Une image d’arrière-plan décorative glissée derrière le logo ajoute une requête et un poids dont l’identification de la marque n’a aucun besoin. Un logo dont la taille impose un en-tête de 140 pixels de haut consomme en revanche une part de l’écran que le contenu ne récupérera jamais, particulièrement sur mobile.
Menu principal : arbitrer des catégories
La création du menu principal est un exercice d’arbitrage éditorial, mêlé à une stratégie SEO, déguisé en composant d’interface. Chaque entrée ajoutée réduit la visibilité de toutes les autres, et chaque niveau de sous-menu ajoute un coût d’interaction. L’étude quantitative du Nielsen Norman Group menée en 2016 avec la plateforme WhatUsersDo, portant sur 179 participants et six sites réels testés sur ordinateur et sur smartphone, montre que masquer la navigation principale derrière une icône divise presque par deux la découvrabilité des contenus, allonge le temps de réalisation des tâches de 39 % sur desktop et de 15 % sur mobile, et dégrade l’expérience déclarée par les utilisateurs.
La conclusion de cette étude est de ne pas importer sur grand écran un motif conçu pour l’étroitesse d’un écran de téléphone.
Sur desktop, une navigation visible, ou mixte, expose les catégories principales et réserve le repli à ce qui est réellement secondaire. Sur mobile, une icône accompagnée du mot « Menu » lève l’ambiguïté que l’icône seule laisse subsister chez les visiteurs les moins familiers du web.
Les libellés de ce menu méritent autant d’attention que la structure. Un intitulé générique du type « Nos solutions » ne porte aucune information sur ce que l’entreprise fait, alors qu’il est répété sur l’ensemble du site.
Les catégories les plus utiles nomment les prestations, les produits, les publics ou les usages, ce qui sert simultanément la compréhension des utilisateurs et le référencement naturel, comme détaillé plus loin. Les catégories retenues doivent refléter la façon dont les visiteurs formulent leur besoin, jamais l’organigramme de l’entreprise.
Dans l’exemple du site de la WWF, on constate au premier coup d’oeil que l’objectif premier du site est la récolte de dons; avec un CTA bien visible et différenciant des autres.
Header collant : ce que la persistance coûte en pixels
L’étude d’utilisabilité publiée par Smashing Magazine en 2012, conduite auprès de 40 participants, mesure une navigation 22 % plus rapide avec un menu collant, et relève que sur les 34 participants ayant exprimé une préférence, tous ont désigné la version persistante comme plus facile ou plus rapide à utiliser. Cette persistance a un prix : l’espace occupé n’est plus disponible pour le contenu. La taille de cette barre persistante est donc le premier paramètre à fixer, avant sa couleur et avant son comportement au défilement. Le Nielsen Norman Group recommande de maximiser le rapport entre contenu et interface, en citant l’en-tête collant du New Yorker qui conserve un ratio de 13 pour 1 sur un iPhone 11 Pro.
Un header collant mal implémenté produit trois défauts mesurables:
- Il masque les cibles d’ancrage lorsqu’un lien interne pointe vers une section de la page, ce que la propriété CSS scroll-margin-top corrige.
- Il génère un décalage de mise en page lorsqu’il est injecté ou redimensionné après le premier rendu, ce qui dégrade la métrique Cumulative Layout Shift dont le seuil recommandé par Google est de 0,1 au 75e centile.
- Il devient enfin illisible lorsqu’il reste translucide au-dessus de contenus de luminosité variable, un fond opaque suffisant à régler ce point.
Un seul appel à l'action dans le header, et il doit dire ce qu'il fait
Un bouton d’appel à l’action placé dans l’en-tête est le seul CTA visible sur l’intégralité du site internet. Cette position lui confère une valeur marketing considérable et impose une discipline stricte : un seul CTA, orienté vers l’objectif business principal, formulé à l’infinitif ou à l’impératif et explicite sur ce qui va se produire au clic. « Réserver une table », « Demander un devis » ou « Faire un don » décrivent une action, là où « En savoir plus » et « Contact » sont trop généralistes.
Un CTA qui reprend la couleur dominante du header perd sa fonction de signal, et un CTA dont le rapport de contraste entre le texte et le fond descend sous 4,5 pour 1 devient un problème d’accessibilité en même temps qu’un problème de conversion.
Sur le site Weenant, l’appel à l’action de l’en-tête sert un objectif unique et mesurable, « se connecter », ce qui rend arbitrable tous les autres éléments candidats à cette zone.
Galopins corrige les copies et voici les erreurs souvent commises !
Deux erreurs sont souvent observées par les Galopins lors d’audits avant refonte de sites. La première consiste à placer dans le header un appel à l’action de bas de tunnel, comme l’inscription à une newsletter, qui n’intéresse qu’une fraction des visiteurs et occupe une place que la conversion principale mérite davantage.
La seconde consiste à empiler deux appels à l’action concurrents, ce qui restaure exactement l’arbitrage que la hiérarchie visuelle était censée retirer à l’utilisateur. Les appels à l’action secondaires ont leur place dans le corps de la page ou dans le footer, où ils ne concurrencent plus l’objectif principal.
Barre de recherche, sélecteur de langue, espace membre : trois éléments qui ne se justifient pas partout
Une barre de recherche dans l’en-tête devient pertinente à partir du moment où le site internet contient plus de contenus qu’un menu ne peut en exposer : catalogue, base documentaire, blog volumineux, annuaire.
Sur un site de quinze pages, cette barre occupe de l’espace et renvoie des résultats moins pertinents que le menu lui-même.
Sur un site riche, la recherche interne devient à l’inverse une source de données inestimable, puisque chaque requête saisie par un visiteur signale une information attendue, mal nommée ou absente du contenu existant, ce qui alimente directement la stratégie éditoriale, le marketing de marque et le référencement naturel.
Un sélecteur de langue se justifie lorsque l’organisation s’adresse à des cibles dans des langues différentes, mais surtout dans des pays différents.
Ce sélecteur doit nommer les langues dans leur propre langue accompagné éventuellement de drapeaux, et il doit basculer vers la page équivalente plutôt que de renvoyer systématiquement vers la page d’accueil de la version traduite.
Un lien de connexion ou un accès à un espace membre n’a de sens dans l’en-tête que si une part significative des visiteurs possède un compte. Dans le cas contraire, cet élément occupe une position stratégique pour une minorité d’utilisateurs, et il est souvent mieux placé dans une barre d’accès rapide discrète, au-dessus de la navigation principale, ou dans le footer pour les usages purement administratifs.
Les icônes de réseaux sociaux, enfin, appartiennent presque toujours au footer plutôt qu’à l’en-tête. Ces liens font sortir le visiteur du site internet au moment précis où il vient d’arriver, et les réseaux sociaux n’ont besoin d’aucune position permanente en haut de l’écran pour être trouvés par une audience qui les connaît déjà.
Dans l’exemple d’Abylsen ci-dessous, les langues sont visuellements affichées.
Éco-conception : le header est le seul élément que chaque visiteur télécharge
L’éco-conception d’un en-tête consiste à traquer ce qui se répète. Une famille de police déclinée en quatre graisses pour afficher un menu de six entrées mobilise plusieurs centaines de kilo-octets pour un gain typographique invisible : deux graisses suffisent presque toujours, et un sous-ensemble de caractères limité aux glyphes réellement utilisés réduit encore le fichier. Les icônes de réseaux sociaux gagnent à être intégrées en SVG inline plutôt que par une police d’icônes complète, dont le chargement de plusieurs centaines de glyphes pour en afficher trois constitue l’un des gaspillages les plus courants du web contemporain.
Les résultats obtenus sur le site éco-conçu de Lemon Tri donnent une idée de ce que cette discipline produit à l’échelle d’un site internet complet. Il atteint 96 sur 100 sur EcoGrader, outil qui s’appuie notamment sur Google Lighthouse et sur CO2.js de The Green Web Foundation pour évaluer la qualité technique d’une page, son poids et ses émissions estimées.
Le cabinet d’expertise comptable Account For, à Marseille, atteint 80 sur 100 sur EcoGrader avec un site qui doit simultanément porter une crédibilité professionnelle et une lisibilité de l’offre, ce qui montre qu’un en-tête sobre ne se paie pas en austérité perçue.
Le header est le premier endroit où un audit RGAA échoue
Le Référentiel général d’amélioration de l’accessibilité, dans sa version 4.1.2, transpose les WCAG 2.1 niveau AA et consacre plusieurs critères à des éléments qui vivent précisément dans l’en-tête. Le critère 12.7, de niveau A, exige la présence d’un lien d’évitement ou d’accès rapide à la zone de contenu principal sur chaque page web. Le critère 12.6, également de niveau A, demande que les zones de regroupement de contenus, dont la zone d’en-tête, la navigation principale et le moteur de recherche, puissent être atteintes ou évitées. Le critère 12.2 impose que le menu et les barres de navigation restent à la même place, visuellement et dans l’ordre du code, d’une page à l’autre d’un même ensemble.
Ces critères se traduisent en exigences de conception à anticiper, notamment dans le cahier des charges pour préparer une refonte web.
Le lien d’évitement doit être le premier élément atteint au clavier et devenir visible à la prise de focus, faute de quoi un utilisateur naviguant à la tabulation traverse l’intégralité du menu sur chaque page avant d’atteindre le contenu.
Ces sections doivent être balisées par les éléments HTML appropriés, header, nav et main, plutôt que par des div stylées en CSS. L’ordre de tabulation doit suivre l’ordre visuel, ce que les mises en page construites à coups de propriétés CSS d’inversion cassent silencieusement. Les cibles tactiles enfin doivent rester assez grandes, la version 2.2 des WCAG fixant un minimum de 24 pixels CSS pour le critère 2.5.8 de niveau AA, quand le Nielsen Norman Group recommande de son côté des cibles d’environ un centimètre de côté sur écran tactile.
Cette exigence a changé de nature depuis le 28 juin 2025. La directive européenne 2019/882, dite European Accessibility Act, transposée en droit français notamment par le décret n° 2023-931 du 9 octobre 2023, étend l’obligation d’accessibilité numérique à des entreprises privées fournissant des services au grand public dans plusieurs secteurs, dont le commerce en ligne, la banque, les télécommunications et le transport de voyageurs, la conformité s’appréciant via la norme EN 301 549 et, pour le web, via le RGAA.
Galopins réalise des audits éco-conception à partir de 800 euros hors taxes ainsi que des audits RGAA, et un en-tête est systématiquement la première section examinée, parce qu’un défaut situé là, se répète sur l’intégralité des pages.
L’impact du header pour le référencement naturel
Les liens du menu principal constituent le seul jeu de liens internes présent sur l’intégralité d’un site internet. Ils déterminent donc la profondeur de clic de chaque page, c’est-à-dire le nombre de clics nécessaires depuis la home. Pourquoi la profondeur est importante pour le SEO? Car plus une URL est éloignée de la home, plus Google peut mettre du temps à la trouver, et donc à la prendre en compte.
En revanche, d’un point de vue sémantique, les liens dans le header n’ont pas beaucoup de poids: ce sont les liens dans un paragraphe, contextualisées qui ont de la puissance et en transmettent. Et oui, le SEO est une expertise particulièrement nuancée !
Les en-têtes peuvent aussi nuire au référencement de trois façons précises.
Un méga-menu exposant quatre-vingts liens sur chaque page aplatit certes l’arborescence, mais il dilue les signaux de priorité en traitant identiquement une page stratégique et une page annexe. Un menu injecté uniquement côté client, dont les liens n’existent pas dans le HTML servi, prive les moteurs d’un chemin de découverte fiable, un fichier sitemap constituant un filet de sécurité et non un substitut. Un logo enveloppé dans une balise h1 partout, enfin, remplace le titre principal par le nom de l’entreprise, ce qui prive chaque page de son signal de contenu le plus visible.
À l’inverse, la crainte que la navigation repliée derrière une icône soit dévaluée n’est pas fondée. Gary Illyes indiquait dès 2016 que le contenu masqué pour des raisons d’expérience utilisateur conserve tout son poids dans un index mobile-first, et John Mueller a confirmé en 2020 que ce qui figure dans le HTML est pris en compte, y compris lorsqu’il n’est pas visible au premier affichage. Ce qui compte n’est pas la visibilité initiale des liens, c’est leur présence dans le code servi.
Reste la dimension performance, qui relève autant du référencement que de l’éco-conception. Un en-tête qui charge une police bloquant le rendu retarde le Largest Contentful Paint de l’élément situé juste en dessous, le plus souvent le titre principal de la page. Un en-tête collant apparaissant après le premier rendu dégrade le Cumulative Layout Shift. Ces deux métriques appartiennent aux signaux Web essentiels utilisés par Google, avec des seuils recommandés de 2,5 secondes pour le premier et de 0,1 pour le second, mesurés au 75e centile des visites réelles.
Ce qu'est, finalement, un bon header
Un bon en-tête est une série d’arbitrages documentés : ce que le logo doit rappeler, quelles catégories méritent une place permanente, quel appel à l’action unique porte l’objectif du site, quels éléments descendent dans le footer, et combien de kilo-octets cette section a le droit de coûter à chaque visite.
L’expérience des utilisateurs se joue moins dans l’esthétique de cette barre que dans la clarté des décisions qu’elle rend lisibles. Un header qui ne peut pas justifier chacun de ses éléments par un usage mesuré ou une contrainte métier porte simplement les hésitations de son commanditaire.
Header WordPress et Elementor : construire, puis rendre la main
Galopins est une agence Elementor, qui travaille exclusivement avec WordPress, et construit les en-têtes comme des modèles conditionnels : un en-tête standard, une variante pour une section spécifique lorsque le parcours le justifie, et une déclinaison mobile pensée pour elle-même plutôt que subie. Ce choix technique sert directement l’autonomie promise aux clients, puisqu’un menu, un libellé de catégorie ou un appel à l’action se modifient ensuite sans intervention de l’agence.
Lucie Leteurtre, de Surfrider, également cliente de Galopins, a identifié cet avantage lors du passage à Elementor : la capacité à reprendre la main sur le site, à publier plus facilement et à répondre plus vite aux besoins internes. L’autonomie n’est donc pas un détail technique, c’est un facteur de fluidité pour toute l’organisation, et elle suppose que l’agence livre un en-tête compréhensible plutôt qu’un assemblage que seul son auteur sait maintenir.
