optimisation core web vitals 7 min

Rédiger un email commercial avec les principes Core Web Vitals

Pourquoi les règles qui rendent une page rapide (LCP, INP, TTFB) s'appliquent aussi à vos emails. Et comment un email lent tue votre taux de clic.

Par Julien Morel
Partager

Pourquoi ton email affiche un taux d’ouverture correct et un taux de clic minable ? On a retourné le problème sur des campagnes de 20 000 à 200 000 envois, et la réponse est presque toujours la même : le corps du message est lent. Lent à comprendre, lent à scroller, lent à agir. Exactement comme une page web qui traîne son LCP.

Les principes qui font une page performante ne sont pas une exclusivité du navigateur. LCP, INP, TTFB décrivent la perception humaine de la vitesse, et cette perception s’applique à tout support où l’attention est la ressource rare. Un email commercial qui les ignore est un email qui demande un effort cognitif. L’effort, en marketing, c’est du clic perdu.

Le LCP de votre email se joue dans les 300 premiers pixels

Le Largest Contentful Paint, dans un navigateur, mesure le temps que met le plus gros élément visible à s’afficher. Dans un email, il faut traduire : c’est l’élément qui capte l’attention dans la zone visible à l’ouverture, sans scroll. Sur un client mail classique, cette zone fait environ 300 à 400 pixels de haut.

Si votre call-to-action trône sous une bannière de 600 pixels, vous venez de repousser votre LCP hors écran. Le destinataire voit une image, peut-être un logo, puis une accroche. Mais l’action que vous attendez de lui n’est pas encore chargée dans son viewport mental. Il doit scroller pour la découvrir. Et scroller, c’est accepter une friction que seule une minorité consent.

On applique ici la même règle que pour une page web : l’élément le plus important doit être dans le premier viewport. Pour un email commercial, c’est soit le call-to-action lui-même, soit une accroche suffisamment forte pour justifier le scroll. Ne pariez jamais sur le scroll. La majorité des destinataires ne dépassent pas la ligne de flottaison.

J’ai vu des campagnes perdre plus de la moitié de leurs clics pour une seule raison : le bouton était sous une image hero qui occupait tout l’écran. Le responsable marketing avait validé la maquette parce qu’elle était « belle ». Elle l’était. Mais belle et performante sont deux choses distinctes, et dans un email, ce qui ne se voit pas immédiatement n’existe pas. C’est la même rigueur qu’un audit Core Web Vitals : si l’élément principal n’est pas rendu dans la première seconde, le visiteur est déjà parti.

⚠️ Attention : Une image hero qui occupe tout le premier écran et repousse le texte en dessous, c’est l’équivalent d’un LCP à 6 secondes sur mobile. Vous venez de perdre 40 % des lecteurs avant qu’ils n’atteignent votre message.

L’INP, ou pourquoi le temps de réponse au clic tue votre conversion

L’Interaction to Next Paint mesure le délai entre une action utilisateur et le retour visuel. Sur une page web, un INP médiocre, c’est un clic qui met 300 ms à réagir. Dans un email, l’INP se joue à un autre niveau : le temps que met le destinataire à comprendre ce qu’il doit faire et à pouvoir le faire.

Un bouton noyé dans trois paragraphes n’est pas un bouton. C’est un puzzle. Le lecteur doit analyser la mise en page, discriminer les liens secondaires, localiser l’action principale. Pendant ce temps, son attention s’érode. La moindre hésitation augmente la probabilité qu’il abandonne.

Un lien peu contrasté qui se confond avec le corps du texte, une police trop petite qui exige un zoom, un call-to-action formulé de manière générique (« Cliquez ici ») : chaque obstacle visuel allonge l’INP humain. Le cerveau clique, mais le retour visuel n’arrive pas. Il cherche, déchiffre, hésite.

La solution est la même qu’en développement front. Quand on gère le state management d’une app React avec Zustand, on évite les re-rendus inutiles pour ne pas ralentir l’interface. Ici, on évite les informations parasites pour ne pas ralentir la décision. Même combat, même logique de performance perçue. L’email doit avoir un seul call-to-action principal, visible, contrasté, compréhensible en une fraction de seconde. Tout le reste est secondaire et doit être traité comme tel.

Le TTFB de l’email, c’est le temps avant la valeur

Le Time to First Byte mesure le délai entre la requête et le premier octet reçu. Dans un email, c’est le temps que met le destinataire à identifier la valeur du message après l’avoir ouvert. Les premières lignes sont critiques.

Un email qui commence par « Bonjour, nous espérons que vous allez bien » brûle son TTFB en politesse inutile. Le destinataire lit, ne trouve aucune information, et son attention s’effondre avant d’avoir commencé. C’est exactement ce qui se passe quand un serveur met deux secondes à renvoyer le premier octet d’une page : l’utilisateur a déjà commencé à fermer l’onglet.

La première phrase doit contenir la valeur. Pas de warm-up, pas de contexte, pas de formule de courtoisie. Une promesse concrète, un chiffre, une question qui interpelle. Le TTFB doit être aussi proche de zéro que possible.

💡 Conseil : Si vous supprimez la première phrase de votre email et que le message reste compréhensible, cette phrase était du poids mort. Supprimez-la.

Le poids du message se compte en secondes, pas en mots

Un email qui pèse 500 mots d’un seul tenant, c’est une page web sans lazy-loading : tout est chargé d’un coup, et le navigateur cognitif du lecteur sature. Le décrochage est immédiat.

La technique qu’on utilise en performance web, c’est le code splitting : on ne charge que le code nécessaire à la route courante. Pour un email, le principe est identique. Chaque bloc de texte doit pouvoir être consommé indépendamment. Le destinataire ne lit pas linéairement, il scanne. Si un paragraphe ne délivre pas une information autonome en moins de cinq secondes de lecture, il sera ignoré.

Appliquez une règle simple : un bloc par idée, pas plus de trois phrases par bloc, et une hiérarchie visuelle qui permet de comprendre l’essentiel en ne lisant que les éléments en évidence. C’est la logique qui pousse les devs à choisir entre Claude Code et Cursor IDE selon ce qu’ils veulent optimiser dans leur flux de travail : on sélectionne la structure qui minimise la charge cognitive.

Un email n’est pas un article de blog. Le lecteur ne lui accorde pas la même durée d’attention, ni la même bienveillance. Traitez chaque paragraphe comme une ressource critique : s’il ne justifie pas sa présence dans le viewport, il disparaît.

Pourquoi le responsive email est un Core Web Vital à part entière

Plus de la moitié des emails sont ouverts sur mobile. Un email qui n’est pas responsive, c’est une page qui affiche un viewport desktop sur un écran de 375 pixels. Les textes deviennent illisibles, les boutons inutilisables, et le destinataire ferme le message en moins de deux secondes.

On ne parle pas ici de media queries CSS complexes. Un email responsive, c’est d’abord une structure simple : une colonne unique, une largeur max de 600 pixels, des boutons d’au moins 44 par 44 pixels, une taille de police qui ne descend pas sous 14 pixels. Ces règles sont aussi fondamentales pour un email que le lazy-loading des images pour une page web. Elles conditionnent l’expérience utilisateur avant même que le contenu ne soit consommé.

L’impact est massif : un email responsive peut doubler le taux de clic par rapport au même message envoyé sans adaptation mobile. C’est un levier plus puissant qu’un objet optimisé ou qu’une segmentation fine. Le responsive n’est pas une option cosmétique, c’est un prérequis de performance, au même titre qu’un serveur qui répond en moins de 200 ms.

Mesurer la performance d’un email comme on mesure un Core Web Vital

On ne peut pas poser un Lighthouse sur un email. Mais on peut mesurer la performance réelle avec les mêmes réflexes que sur le web. Le taux d’ouverture tient lieu de First Contentful Paint : c’est le premier signal que le contenu a été chargé. Le taux de clic, c’est l’INP : il mesure le passage à l’action. Le taux de conversion finale sur la landing page, c’est le pendant du First Input Delay, la mesure ultime de l’engagement.

Le piège classique consiste à optimiser l’objet pour maximiser le taux d’ouverture sans toucher au corps du message. Résultat : plus de monde ouvre, mais le taux de clic s’effondre mécaniquement, parce que la promesse de l’objet n’est pas tenue dans le contenu. C’est exactement ce qui arrive quand on optimise le TTFB d’une page sans travailler le LCP : le serveur répond vite, mais l’utilisateur attend quand même devant un écran blanc.

On applique donc la même méthode qu’en audit de performance : on mesure de bout en bout, on identifie le maillon le plus faible, et on corrige sans casser le reste. Un email, c’est un tunnel de conversion qui se mesure en millisecondes d’attention. Chaque centimètre de scroll est un octet à économiser.

Questions fréquentes

Un email en texte brut peut-il être plus performant qu’un email HTML ?

Dans certaines situations, oui. Le texte brut élimine toute distraction visuelle, force une hiérarchie implicite par la ponctuation et les sauts de ligne, et se charge instantanément. Il performe particulièrement bien pour les emails transactionnels ou les relances très personnalisées. Son point faible : il ne permet pas de bouton cliquable, ce qui allonge l’INP pour le destinataire qui doit identifier un lien hypertexte dans un bloc uniforme.

Comment la segmentation impacte-t-elle la performance perçue d’un email ?

Une segmentation fine réduit le TTFB perçu, parce que le contenu peut être formulé en réponse directe à un besoin spécifique du segment. Le destinataire identifie immédiatement la valeur, sans avoir à filtrer mentalement des informations qui ne le concernent pas. En revanche, une segmentation mal calibrée produit l’effet inverse : l’email manque de pertinence, et l’attention chute avant même la première phrase.

Les GIFs animés améliorent-ils ou dégradent-ils la performance d’un email ?

Ils augmentent le poids du message et peuvent ralentir l’affichage sur les clients mail qui les chargent automatiquement. Surtout, ils capturent l’attention au détriment du call-to-action. Un GIF mal placé devient le LCP involontaire de l’email : le destinataire le regarde en boucle et ne scrolle jamais. Utilisé avec parcimonie, il peut renforcer un message, mais jamais le remplacer.

Articles similaires

Julien Morel

Julien Morel

Ancien dev front React passé SEO technique après une migration e-commerce qui a fait perdre 60% du trafic organique à son employeur en une nuit (fichier robots.txt oublié en staging). Depuis, il écrit pour que ça n'arrive à personne d'autre et teste sur ses propres side-projects avant de publier quoi que ce soit.

Cet article est publie a titre informatif. Faites vos propres recherches avant toute decision.