SEO, Webperf et choses bizarres…

13 Nov 2018

Doublez vos performances en loadtime... Grâce à la rotation des Gifs !

Nous sommes tous fans des gifs (oui oui).

Les GIFs c’est toujours drĂ´le, mĂŞme quand on commence Ă  les analyser…

Jetez un coup d’œil à ces deux beaux gradients au format GIF :

Ces deux images sont Ă  100% identiques, une simple rotation Ă  90° Ă  Ă©tĂ© effectuĂ©e… et pourtant :

  • Le gradient vertical pèse 281 Ko
  • Le gradient horizontal pèse 28 Ko

MAIS DIS JAMY, POURQUOI EST-CE LE CAS ?

> Les fichiers GIF suivent un algorithme de compression qui supprime la redondance horizontale.

Designing for Performance

Ainsi, chaque GIF à une taille radicalement différente, car son format offre une compression nettement meilleure dans un sens.

Après cette fabuleuse dĂ©couverte, pourquoi ne pas s’amuser Ă  penser performance web avec un protip sorti tout droit du futur.

MERCI LE CSS <3

<img src = "horizontal.gif" style = "transformation: rotate (90deg);" />

Et hop, il est possible de rĂ©duire la taille de la page en enregistrant une copie d’un fichier GIF pivotĂ© Ă  90° puis le refaire pivoter grâce au CSS Ă  son Ă©tat d’origine.

GAIN INCROYABLE DE PLUS DE 90% D’ÉCONOMIE !

Mais qu’en est-il rĂ©ellement ?

Un PUG qui bronze Ă  l’endroit pèse 4,82 Mo :

Avec une rotation à 90 degrés, ce même GIF pèse : 4,84 Mo :

Cette fois-ci, le gain est bien moins frappant que lors du premier test.

MAIS…. gain toutefois il y a !

Malheureusement, cette technique du fond des tiroirs est Ă  double tranchants. Après des annĂ©es de recherche (oui oui) et de test de divers GIFs. Elle possède une faiblesse…

C’est une Ă©pĂ©e Ă  double tranchant…

Par conséquent, comme au réveil, il ne faut jamais se précipiter pour tout faire pivoter.

La rotation de ce fabuleux océan passe de 860 Ko à 950 Ko.

La rotation n’est pas donc toujours une bonne idĂ©e.

Pour approfondir cette dĂ©couverte, nous allons rĂ©cupĂ©rer tous les GIFS prĂ©sents d’une page choisie au plus grand des hasards, et faire pivoter chaque GIF.

Le dossier original pèse 12,7 Mo et une fois toutes les images renversées à 90°, la taille totale à augmenté à 13,1 Mo.

Sur du volume, le gain est finalement discutable, Buzzfeed ou Giphy n’y verrait aucune Ă©conomie…. et pas forcĂ©ment de gain d’argent.

MAIS, les GIFs c’est rigolo, nous allons donc pousser le vice jusqu’au bout !

Et si j’ai plein de gifs ?

Voici une mĂ©thode que nous pourrions appliquer dès qu’on parle de gros volume :

  1. Conversion en lots des GIFs (rotation à 90°)
  2. VĂ©rifier la taille
  3. Télécharger le plus petit de chaque paire
  4. Manipuler le CSS

Pour pivoter des GIFs à la volée, rien de mieux que les bonnes vieilles lignes de commandes imagemagick ou gifsicle peuvent être de très bons alliés.

Exemple de ligne de commande avec imagemagick :

convert exemple.gif  -rotate  90  exemple_90deg.gif

Le but Ă©tant de travailler avec le fichier le plus petit des deux…

Puis d’intĂ©grer dans le CSS un règle spĂ©cifique.

Dans notre cas, si l’attribut src d’une balise se termine par _90deg.gif, alors dans ce cas nous voudrons le faire revenir dans le sens normal via le CSS grâce Ă  la règle suivante :

[src $ = "_ 90deg.gif"] {
}
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);

Reste plus qu’Ă  s’assurer que le code HTML pointe correctement vers les versions pivotĂ©es… ET C’EST GAGNÉ !

SĂ©rieusement?

C’est toujours cool d’Ă©conomiser des octets sur le tĂ©lĂ©chargement, mais pensez aussi que chaque action CSS applique un temps de chargement supplĂ©mentaire sur le rendu.

En soit, chaque site est diffĂ©rent, et cette mĂ©thode reste trop fastidieuse pour qu’elle devienne W3C Friendly :‘(

La suite s’agirait donc de tester si la transformation 2D via CSS utilise beaucoup (ou non) de ressource cĂ´tĂ© serveur. Je ne le pense pas, et dans ce cas, le compromis est donc probablement viable.

Si votre site Web possède donc de beaux gradient en GIF (ce qui je suppose n’est pas le cas…. triste vie), alors je vous recommande fortement d’adopter cette fabuleuse mĂ©thode pour changer le web de demain !

Si l’article vous Ă  plus ou vous Ă  fait sourire, n’hĂ©sitez pas Ă  le partager et gardons espoir, un jour la rotation de GIFS sera reconnue comme QualitĂ© web chez OPQUAST !

Pierrick

commentaires généré par Disqus