Analyser et optimiser le poids du code HTML/CSS des emails

Vous découvrirez tout ce qu'il faut savoir sur l'optimisation du poids du code HTML avec le témoignage de Darty.

Vos emails sont tronqués dans Gmail ? Il est très probable que le poids du code de vos emails soit trop lourd : sa  limite imposée est de 102 Ko.

Dans cet article nous allons vous détailler les règles à suivre pour analyser et alléger le poids du code HTML/CSS de vos emails.

Pour effectuer une analyse du poids du code, il faut distinguer le poids obtenu en sortie de l’Email Builder de celui obtenu en sortie de l’outil de routage. Le contrôle qualité, accessible depuis le volet “workflow de validation”, vous permettra de vérifier le poids de votre code HTML sur l’Email Builder (avant de l’exporter et de l’envoyer depuis votre outil de routage).

Lors de l’intégration du code Email Builder dans votre outil de routage, le poids du fichier HTML/CSS peut augmenter. La plupart des outils de routage modifient notamment le code pour héberger les médias et ajouter du tracking. Il est donc préférable que le poids du code dans l’Email Builder (visible à l'aide du contrôle qualité) ne dépasse pas 90 Ko.

• Limiter le nombre de séparateurs
  • Lorsque cela est possible, il est préférable d’utiliser les marges (haut et bas) pour espacer des contenus entre eux plutôt qu’un séparateur. Cette option est disponible sur les éléments image, texte, bouton et vidéo.

• Conserver uniquement les groupes indispensables
  • Lorsque cela est possible, il faut éviter d’imbriquer des groupes les uns dans les autres. Note : une mise en page en colonnes peut être faite directement au niveau de la section.

• Utiliser avec parcimonie les sections
  • Il faut éviter de multiplier inutilement des sections (ex. Une section composée uniquement d’un séparateur). Lorsque cela est possible, il est recommandé de regrouper plusieurs sections en une.

• Être économe en liens
  • Il est recommandé de ne pas appliquer de liens à l’ensemble des éléments de vos emails, mais uniquement aux potentielles zones cliquées par les utilisateurs.
  • Dans une moindre mesure, l’option “Ouvrir dans une nouvelle fenêtre” (target=”blank”) disponible pour les liens, alourdit légèrement le poids du code.
  • Vérifiez la longueur et optimisez la longueur de vos liens avec des outils de type URL shortener.

• Ne conserver que les polices spéciales & Google font utiles
  • Il est préférable de ne pas déclarer plus de 3 polices spéciales ou Google font pour un email. Vérifiez aussi que les polices spéciales présentes dans les paramètres sont bien utilisées ou bien supprimez-les.

Lors de l’intégration du code Email Builder dans votre outil de routage, le poids du fichier HTML/CSS peut augmenter. La plupart des outils de routage modifient notamment le code pour héberger les médias et ajouter du tracking à vos liens.

Ensuite, dans le cas d’utilisation de variables, le poids indiqué dans le Contrôle Qualité peut être légèrement plus faible. Le poids final dépendra de la taille de la donnée injectée dans la variable lors du routage.

Pour plus d’informations sur le contrôle qualité,  vous pouvez vous référer à l’article : Utiliser le contrôle qualité

À l’inverse, lorsque vous intégrez des blocs conditionnels dans votre email, le poids indiqué dans le contrôle qualité peut être élevé. Mais, lors du routage de l’email, les blocs conditionnels sont interprétés et seule une partie du contenu sera routée. Par conséquent, le poids du code routé sera plus faible.

Pour connaître le poids “final” de votre e-mail, vous pouvez par exemple examiner le code HTML/CSS depuis le lien miroir de l’outil de routage.

Malgré toutes ces optimisations vos emails restent tronqués sur Gmail ? Il faut peut-être s’intéresser à la quantité de contenus sur votre email.

Pour plus d’informations sur le poids de votre email, vous pouvez vous référer à l’article : Les points essentiels concernant le poids d'un email