L’hiver arrive doucement dans nos régions, le froid s’installe et les raclettes, choucroutes et autres plats de circonstances également. Mais cette période est également propice à l’obésité des communications envoyées par nous, par nos clients ou par nos marques préférées : bref chacun à son niveau abuse et remplit ses e-mails d’un poids non négligeable.
J’ai réussi à pondre une intro, je vais pouvoir maintenant m’attaquer progressivement à l’objectif de cet article : Nos e-mails devraient subir un régime avant l’Hiver (Le vrai). Ne vous y trompez pas ce billet sans rétention fera office de piqûre de rappel pour les experts et de sensibilisation pour les néophytes.
“Ok Ronan” le poids d’un e-mail ça concerne quoi exactement ?
Excellente question “moi-même”, il faut à mon avis faire un effort sur chaque facette de l’e-mail, à savoir sa personne : le HTML et le CSS du fichier, mais aussi à ses bagages… Parce que oui, en tant que bon touriste, l’e-mail débarque dans ta boîte avec sa collection d’images, de google font qui parfois / souvent pèsent dans la balance et ce, de manière directe ou indirecte.
Les problèmes de poids ne sont pas une nouveauté et vous devez les traiter séparément. En effet, alors que l’un provoque des ralentissements à l’arrivée dans les boîtes e-mail, l’autre ralentit l’affichage de votre message.
Alors pourquoi nous devrions faire maigrir nos e-mails ?
J’ai commencé à en parler dans le paragraphe précédent mais la première raison qui me vient à l’esprit c’est que chaque octet de trop est un octet qui pollue notre planète… Chaque message électronique envoyé est stocké puis mis en cache et même conservé dans certaines boites e-mails pendant plusieurs mois voir pour certains messages des années.
Malheureusement cet argument ne suffira pas toujours à vous convaincre ou à convaincre vos responsables sur cet enjeux de taille. Alors, laissez moi vous proposer une autre approche. Lorsque votre e-mail est envoyé, plus il est lourd de corps (HTML / CSS), plus il mettra de temps à arriver à votre lecteur. On parle de sa rapidité à être délivré dans sa boîte.
L’analogie serait de dire qu’une lettre va plus vite qu’un colis (sauf pour Amazon)… Ensuite, une fois reçu, imaginons que votre lecteur essaie de lire votre message avec une connexion internet dégradée (3G ou Edge). Votre message va alors prendre de longues, très longues secondes avant de s’afficher. Cet argument sur la performance d’affichage et la délivrabilité devrait vous suffire.
Imaginez donc votre magnifique message travaillé avec un webdesigner et un intégrateur e-mail pendant plusieurs heures et qui a pour objectif de mettre en valeur et vendre vos services ou produits. Mais qui risque d’arriver dans la boîte de réception de votre internaute sans ses jambes… (Oui je parle bien de votre footer).
Un e-mail de plus de 100 ko (HTML + CSS) risque d’être tronqué / coupé par Gmail et ce n’est pas beau à voir (Schlak, Gmail tranche) ! Du coup, plus de lien de désabonnement, plus de réassurance si elle est en bas de l’e-mail et pas de footer qui fini proprement votre communication. Les plus grands e-mails sont parfois coupés au milieu d’un article.
Au niveau des performances, si vos lecteurs sont en 4G à priori pas de soucis, vos messages seront affichés presque instantanément. Imaginons maintenant que ce ne soit pas le cas. En 3G ou Edge, c’est un autre monde qui se profile pour votre message, une image trop lourde pourrait ne jamais s’afficher, vos lecteurs les plus impatients (comme moi en fait, navré…) choisiront simplement de ne pas lire votre message et le supprimeront. La flemme d’attendre que votre message s’affiche l’emportera sur la curiosité.
C’est Ici, que commence le listing des astuces les plus connues. Ah, au fait, j’ai tout pompé sur internet (#flemme #expérience ?) !
Allez, on monte sur la balance ! J-0 avant de maigrir
Avant de maigrir, il faut faire un état des lieux. En principe, vous pouvez juger du poids de votre message facilement si vous avez les fichiers sources sur votre ordinateur. Votre système d’exploitation l’affiche dans ses listings de fichiers. Exemple sous windows ci-après.
Par contre, si vous avez fait votre e-mail directement sur votre plateforme de routage, c’est un peu plus compliqué. Il est rare que celle-ci vous affiche le poids de votre e-mail. Dans ce cas, plusieurs options possibles :
- S’envoyer l’e-mail sur une boite qui affiche le poids par exemple : Thunderbird
- En affichant la version navigateur et en ouvrant la console de debug (F12) sur l’onglet network (sous chrome) ou réseaux (sous firefox) : vous aurez le détail du poids de chaque élément qui compose votre e-mail.
- En récupérant le code html de votre e-mail et en l’enregistrant sur votre ordinateur. (pensez à vérifier vos images)
Et maintenant… Allez Zou ! Au régime.
Réécrire et optimiser son code.
Celle là, elle est facile de technique. Il arrive parfois/souvent qu’on abuse de l’imbrication de balise <table>, <tr>, et <td>. Imbriquer du code dans du code sans une bonne raison fait grimper le poids de vos e-mails sans raison. Essayez de toujours écrire du code utile en évitant des copier/coller inutiles. Par automatisme, il nous arrive de produire un code qui n’est pas le plus optimisé.
Stop au beautify, on vire l’indentation
La technique qu’il faudra faire à la dernière minute. Elle a l’avantage de faire gagner un poids précieux mais rend le code plus difficile à lire. Simple à réaliser, soit avec un éditeur de code ou de texte enrichi comme avec Notepad++ par exemple (oui l’éditeur n’est pas récent mais bon, c’est l’exemple facile !).
Avec Notepad++, on sélectionne tout l’e-mail avec CTRL + A puis on retire les différents niveaux d’indentation en faisant plusieurs Shift + Tabulation, jusqu’à ce que le code soit bien aligné à gauche. Si vous utilisez un framework e-mail, vous avez peut-être la possibilité d’automatiser cela à la compilation de votre code.
Minification CSS !
Chaque ligne de CSS peut être réduite en poids en supprimant les retours chariots. (l’économie est minime mais existe) pour cela, de nombreux logiciels en ligne existent. J’utilise celui-ci : https://www.willpeavy.com/tools/minifier/ Pour les plus hardis d’entre vous qui utilisent Mjml, Foundation email ou un autre Framework pour l’e-mail, des options de réduction de poids automatisées existent et devraient être appliquées.
Il existe probablement d’autres techniques mais celles-ci font parties de la base à appliquer. Dans tous les cas, lorsque vous appliquez l’une ou l’autre de ces méthodes, faites des tests de rendu multi-clients e-mails. Vous devez vous assurer que votre message avec un code réduit fonctionne toujours sur les différents clients e-mails que vous allez toucher.
On avait dit pas les vêtements…
Maintenant, on va parler des ressources distantes à savoir les images et autres gifs animés mais aussi des Fonts (Polices d’affichages) qui seront chargées à l’ouverture de votre e-mail. On parle donc des choses qui vont coûter de la bande passante à vos lecteurs.
Parlons de vos images :
Pour commencer, une image doit être dimensionnée à la taille réelle d’affichage dans votre e-mail donc, une image hero qui prend toute la largeur d’un e-mail de 600px de large fera 600px de large. Un seul cas particulier sera fait pour les écrans retina où on utilisera des images X2 en largeur et hauteur donc 1200px de large dans ce cas précis.
Vous ne devez en aucun cas mettre votre image en résolution HD qui fera probablement plus de 20 Mo. Il faut savoir que la plupart des routeurs e-mail ne regardent pas ce que vous utilisez comme image et vous laissent faire n’importe quoi.
Vos images doivent être également optimisées et compressées afin de réduire leur poids.
Utiliser des formats d’images adaptés afin d’avoir le poids le plus juste possible (png, jpg, gif). En principe, vos webdesigners sont les mieux placés pour choisir et réduire le poids de vos images mais si jamais vous n’aviez pas la possibilité de passer par un webdesigner vous pouvez toujours utiliser des outils en ligne ou logiciels comme :
Cette liste est non exhaustive, mais cela vous donne un panel d’outils pour les différents types d’images que vous pourriez être amené à optimiser.
Pensez à vos polices et à l’hébergement de vos images:
Les polices, ce n’est pas ma spécialité. Cependant, ne multipliez pas le chargement de Google Font. Chaque police prend un temps significatif pour être récupérée et plus vous allez prendre de spécificités sur votre police (regular + Bold + thin par exemple) et plus le temps de récupération du fichier sera long.
Pensez également au lieu d’hébergement de vos images. Un serveur performant réduira le temps de réponse avant l’envoi de la ressource demandée. Vous pouvez également prévoir un cache reverse proxy HTTP comme Varnish par exemple dans le cas où vous hébergez vos images sur le même serveur que votre site internet.
Les images seront mises alors en cache sur le serveur de cache lors du passage d’un premier lecteur. L’objectif est de réduire la charge sur le serveur web. En effet, les lecteurs suivants qui récupéreront la même image n’iront plus sur le serveur de votre site internet mais sur le serveur dédié à la gestion du cache.
Comme dit au début de mon article, je n’ai pas la prétention d’être la bible de l’optimisation de vos e-mails, néanmoins en appliquant ces quelques règles vous pourriez réduire efficacement et rapidement le poids et augmenter la vitesse d’affichage de vos e-mails. Ce faisant, vous améliorez les performances de vos communications et réduisez votre impact carbone sur notre planète.
Vos e-mails et moi-même vous remercient d’avoir lu cet article.
Une réponse
Merci Ronan pour cet article.
Nous sommes d’accord pour dire que la surabondance des mails, la plupart du temps non lus, voire non ouverts, est l’enjeu de chacun.
A notre manière, nous y avons contribué en développant une solution permettant de diminuer le poids des mails, en modulant la signature mail des collaborateurs (celle-ci est simplifiée dans les échanges internes) en fonction du destinataire.