Emailing & newsletter : alléger le poids du fichier html

15 mars 2017
|In email code
|By Emmanuel

La vérification et l’optimisation du poids du fichier html d’un emailing ou d’une newsletter sont parfois négligées par les intégrateurs emailing.  Ce qui n’est pas sans conséquences sur l’expérience utilisateur et la délivrabilité : temps d’affichage laborieux sur mobile, message tronqué dans Gmail, mise en spam plus fréquente si le fichier html dépasse les 100k. (cf. article sur le poids idéal d’un emailing)

je vous propose d’étudier 6 pistes pour alléger le poids du fichier html.

01.

Ne pas surcharger inutilement le code.

Certains intégrateurs emailing ont la fâcheuse tendance à doubler de manière systématique les attributs html avec leurs propriétés css équivalentes.

Exemple :

<td align="center" bgcolor="#ff0000" style="text-align:center; background-color:#ff0000">

Cette technique est utilisée dans l’espoir d’améliorer la compatibilité du rendu dans les outils de messagerie. Sa mise en oeuvre systématique est la plupart du temps inutile. Elle est souvent déployée quand l’intégrateur emailing n’a pas d’outil permettant de tester exhaustivement et efficacement l’affichage de sa production.

En adoptant un outils de tests-rendering comme Email on Acid ou Litmus vous pourrez déterminer avec précision quel attribut html vaut la peine d’être doublé ou non. Par la même occasion la maintenabilité du code html sera améliorée.

02.

Eviter les templates html « prêt à l’emploi »

Il existe des kits html prêts à l’emploi pour créer des emailings ou des newsletters. Ces modèles sont généralement développés pour que l’affichage fonctionne sur n’importe quel outil de messagerie au niveau mondial. Le code est en outre largement commenté pour vous permettre de le modifier. Cela entraîne une surcharge de code qui augmente considérablement le poids du fichier html. Mais avez-vous besoin que votre emailing fonctionne par exemple dans le webmail américain d’Aol, sachant qu’il est destiné à un public français ?

Conseil

Privilégier les templates "made in France" ou faites appel à un intégrateur emailing qui codera vos templates html en prenant en compte les outils de messagerie qui comptent vraiment au regard de votre public.

03.

Utiliser les commentaires html avec parcimonie

Les commentaires html facilitent la compréhension du code et permettent de se repérer plus facilement dans le chaos des structures tabulaires des emailings et des newsletters. Le nombre et la longueur des commentaires html peuvent finir par peser sur le poids final du fichier html. Il faut donc :

  • Limiter le nombre de commentaires
  • Ecrire des commentaires courts

A la place de :

<!--  mettre le texte du preheader ici et n'oublies pas d'acheter du pain en rentrant ce soir -->
texte du preheader
<!-- fin du texte du preheader -->

Vous pourriez écrire :

<!-- preheader -->
texte du preheader
<!-- /preheader -->
04.

Arrêter les styles inline

Pour créer des styles, les intégrateurs ont pris l’habitude de créer des styles css en les incorporant dans chaque balise html contenant du contenu, faute de quoi le rendu ne fonctionnait pas correctement dans Gmail.

Exemple de style inline :

<td style="font-family:Arial, sans-serif; font-size:14px; color:#ff0000">

Il fallait alors répéter l’attribut style et ses propriétés autant de fois qu’il y avait de bloc contenant un texte, ce qui alourdissait considérablement le poids du fichier html.

Depuis fin 2016, Gmail gère les styles y compris lorsqu’il sont créés dans l’entête du document html. L’intégration des styles dans la partie <head> facilite la mise à jour mais permet aussi d’alléger considérablement le poids du fichier html.

Code avec des styles inline
<head>
...
</head>

<body>
...
<td style="font-family:Arial, sans-serif; font-size:14px; color:#ff0000"> mon texte </td>
td style="font-family:Arial, sans-serif; font-size:14px; color:#ff0000"> mon texte </td>
..
</body>
Code sans style inline
<head>
<style type="text/css">
.texteCourant {
font-family:Arial, sans-serif;
 font-size:14px;
 color:#ff0000
}
</style>
</head>

<body>
...
<td class="texteCourant"> mon texte </td>
td class="texteCourant"> mon texte </td>
..
</body>
05.

Compresser le code HTML

Commentaires html, retour à la ligne et indentation du code augmentent le poids du fichier html. Il est possible de les supprimer intégralement et de gagner de 10 à 40% du poids du fichier html.

L’outil en ligne HTML Minifier permet de compresser le code html de votre emailing. Le résultat est assez impressionnant notamment quand le fichier html comporte de nombreuses lignes de code et de nombreux commentaires.

Avec l’outil HTML Minfier le poids fichier html de cette newsletter a été divisé quasiment par 2, passant de 70k à 40k !

N’oubliez pas de conserver une version non compressée de votre fichier html car la version « minifiée » est certes légère mais illisible au niveau du code.

Fichier html – non compressé – 70 k

html non compressé

Fichier html – compressé – 40 k

html compressé
06.

Effectuer un travail de veille

L’intégration html d’un email évolue au gré de l’évolution des outils de messagerie. Ainsi les récents changements opérés par Gmail, nous amène à repenser la manière de coder les styles css dans un email. C’est la connaissance de ces changements et  la mise en place d’une veille technologique régulière qui amène l’intégrateur emailing à délivrer un code html toujours plus moderne, robuste et léger.

bonnes pratiques outils emailing Performance
Articles sur le même thème
2 Commentaires

Add comment