Taille du fichier HTML
La taille du fichier HTML est la taille du fichier .html qui est vraiment envoyé. Cette taille de fichier n'inclut pas la taille des images incluses, car celles-ci seraient liées à ce fichier HTML et téléchargées lors de l'ouverture.
La taille maximale que nous recommandons est de 100 Ko, car tout ce qui est supérieur peut entraîner des problèmes de livraison et d'affichage. Par exemple, Gmail coupera votre HTML à 102 Ko. La coupure masquera la fin de votre e-mail et peut casser votre mise en page.
La plupart des e-mails devraient facilement rester en dessous de 50 Ko. Cependant, parfois des améliorations progressives complexes ou une grande quantité de contenu de campagne entraînent une taille de fichier plus importante. Si cela se produit, il existe plusieurs façons d'aider à réduire la taille de votre fichier HTML.
Nettoyez votre code. L'email est en constante évolution et nous voyons beaucoup de modèles avec du code obsolète. Un rapide nettoyage peut économiser quelques Ko.
Ne codifiez pas trop. Certains modèles que nous voyons contiennent un code supplémentaire qui n'est simplement pas nécessaire. Le pire cas est d'ajouter des éléments de tableau supplémentaires. La plupart des mises en page peuvent être réalisées avec 5-10 tableaux, mais nous voyons souvent du code avec 30-40 tableaux. Moins de tableaux a également l'avantage supplémentaire de rendre votre code plus facile à lire.
Déplacez une partie du code de HTML vers CSS. Il n'est pas encore sûr de déplacer tous vos styles vers CSS, mais si fait correctement, déplacer certains styles en ligne vers des styles intégrés peut aider à réduire le code.
Simplifiez votre design. Une autre option est de revenir à la phase de conception. Les e-mails à colonne unique utilisent beaucoup moins de code.
Minifiez votre code. La minification du code supprimera les espaces et commentaires inutiles. Cela peut avoir un énorme impact, mais soyez prudent car de nombreux ESP appliquent une longueur de ligne maximale qui pourrait forcer un nouveau saut de ligne et casser le code.
Taille des actifs externes
La taille des actifs externes est la taille de toutes vos images et feuilles de style externes. Étant donné que les tailles externes sont rares, nous nous concentrerons davantage sur les images pour l'instant.
Si vous utilisez des images d'arrière-plan et des requêtes de média, il est possible que dans certains environnements, tout ne soit pas téléchargé pour chaque utilisateur. Mais, rappelez-vous que même si vous définissez display:none; sur un élément <img> , cela sera quand même téléchargé. Il n'existe actuellement aucun moyen d'arrêter cela.
La taille maximale pour la plupart des images est de 100 Ko, mais si vous avez une grande image haute résolution ou un gif animé, cela peut atteindre 500 Ko. Cependant, il s'agit davantage de la taille totale, que nous aborderons dans la section sur la taille totale de l'email chargé.
Il existe de nombreuses ressources pour aider à compresser les tailles d'images :
ImageOptim – sur Mac, ou en tant que service web
Caesium – sur Windows
CDN – De nombreux CDN ont l'optimisation d'image intégrée. Certains ajusteront même la compression en fonction de la bande passante disponible.
Voici quelques autres conseils que nous recommandons :
Assurez-vous d'utiliser le format le plus approprié, .jpg pour les photos, .gif pour les graphiques et .png lorsque vous avez besoin de canaux alpha
Simplifiez votre design. Revenez encore à la phase de conception pour utiliser moins d'images, des images plus petites ou des images plus simples qui peuvent être compressées en tailles plus petites.
Taille totale de l'email chargé
Ceci est la taille combinée de tout lorsque l'e-mail est ouvert et que tout est téléchargé. Cela peut varier en fonction de l'environnement dans lequel l'e-mail est ouvert.
Le principal problème ici est le temps que prend l'e-mail à charger. Vous testerez probablement vos e-mails dans un bureau avec une connexion très rapide, mais bon nombre de vos destinataires peuvent être sur des appareils mobiles avec une connexion 3G lente.
Avec une bonne connexion, une taille totale d'e-mail de 1 Mo se chargerait en une fraction de seconde et semblerait instantanée pour l'utilisateur. Cependant, avec une connexion 3G, cela pourrait prendre entre 2 et 14 secondes pour charger l'e-mail complet. Et, si votre public cible est susceptible d'être sur une connexion 2G, ce téléchargement pourrait prendre quelques minutes.
C'est également un problème potentiel pour les utilisateurs avec des forfaits de données restrictifs qui doivent prendre en compte chaque Mo qu'ils téléchargent. C'est particulièrement une considération dans les pays en développement.
Voici quelques actions que vous pouvez entreprendre pour aider :
Tout d'abord, examinez toutes les recommandations que nous avons mentionnées concernant l'optimisation de la taille du HTML et des images.
Si vous avez le temps, c'est toujours bien d'expérimenter avec le code et de tester ce qui est vraiment nécessaire et ce que vous pouvez laisser de côté. Expérimentez avec des images et essayez différentes façons de les compresser. Assurez-vous que votre e-mail est esthétique et a du sens sans images, pour que vos utilisateurs puissent commencer à regarder votre e-mail pendant qu'ils attendent les images.
Mettre tout cela ensemble
Concernant les tailles de fichiers, comme pour beaucoup de choses, tout se résume à un compromis. Vous pourriez faire quelques tests A/B et découvrir que de grandes images haute résolution fonctionnent bien. Vous pourriez constater qu'un contenu détaillé fonctionne bien. Vous pourriez trouver que l'interactivité complexe fonctionne bien. Cependant, lorsque vous combinez les trois dans une seule campagne, vous pourriez voir que les choses commencent à mal fonctionner.