Comparatif web performance des candidats 2012 - les images

Bien que tous les candidats souhaitent s'adresser au plus grand nombre de citoyens, voyons voir si leur site web le leur permet vraiment. Ici je propose de vous focaliser sur la partie "images". Si vous voulez comprendre brièvement les différentes étapes de la web performance l'article "prélude" est pour vous.

Le protocole

Tous les résultats sont issus de l'extraction des images de la page d'accueil des candidats 2012, le 10 mars 2012.

Les images retenues sont au formats PNG, GIF et JPG.

L'outil d'extraction utilisé est l'extension Image Picker 1.0 pour Firefox. Le logiciel d'optimisation utilisé est ImageOptim pour MacOs. Tous les optimisations effectuées sont automatiques.

Les données brutes

Candidats Nombre d'image Avant optimisation Après optimisation Gain en Ko Ratio poids/images

Arthaud 21 1074 ko 637 ko 437 ko 30 ko

Bayrou 69 2706 ko 2233 ko 473 ko 34 ko

Cheminade 19 391 ko 382 ko 9 ko 20 ko

Dupont 19 467 ko 427 ko 40 ko 22 ko

Eva Joly 29 1129 ko 994 ko 135 ko 34 ko

Hollande 41 3834 ko 288 ko 3548 ko 7 ko

Lepage 31 563 ko 430 ko 133 ko 14 ko

Le Pen 39 1437 ko 1322 ko 115 ko 34 ko

Melenchon 55 804 ko 666 ko 138 ko 12 ko

Poutou 62 849 ko 720 ko 129 ko 12 ko

Sarkozy 37 901 ko 846 ko 55 ko 23 ko

Villepin 46 4323 ko 3336 ko 987 ko 73 ko

Au vue des statistiques 2011 il apparait que le poids total moyen des images pour un site est de 600ko pour 75 éléments. Ce qui nous donne un ratio 8ko / image. Je ne connais pas l'écart type mais cela donne déjà une idée pour faire vos propres comparaisons.

Analyse

Avant Optimisation automatique

Pour être raccord avec le monde politique, carton rouge pour le candidat François Hollande, l'optimisation est tout simplement ahurissante. En regardant de plus près on s'aperçoit que deux images .png de 18 px x 53px sont à l'origine de 3.6 Mo. Je ne sais pas quel logiciel est utilisé pour générer ceci. Il est fort probable que les serveurs du candidat soient dimensionnés pour envoyer une grande quantité d'informations, mais imaginez un seul instant une connexion depuis un modem 56ko. En plus, c'est du gachis. Pour information après optimisation on passe de 3.6 Mo à 1.4 ko .

Parmis les ogres, nous retrouvons le site de François Baryrou avec 2.7mo, Arthaud avec 1mo, Le Pen avec 1.4mo, Eva Joly avec 1.1mo et enfin Villepin avec 4.3 mo de données images. Pour revenir aux statistiques globale de 600ko au mieux c'est deux fois plus que la moyenne mondiale au pire sept fois plus.

Après optimisation automatique

Les gains

Enorme surprise, un des pires devient le meilleur. Le site de François Hollande réalise un énorme gain avec 3.5 mo économisés. Hormis Cheminade tous les candidats peuvent profiter largement de cette optimisation qui prend 10 minutes. Le top 4 des meilleurs gains et donc des mauvais élèves: Hollande, Villepin, Bayrou, Arthaud

Les ratios après optimisations

Pour Hollande, le ratio tombe à 7ko par image. C'est le seul candidat capable d'accrocher la moyenne mondiale. Ensuite dans les bons résultats, on retrouve Melenchon, Poutou et Lepage.

Mais que nous indique le ratio ?
Au vue des résultats on s'aperçoit que malgré les optimisations jpg, png "simples" certains ratios indiquent que des efforts supplémentaires peuvent être faits, notamment sur le choix de résolution/qualité des jpg. Villepin apparait ici avec le plus mauvais ratio : 73ko par image.

Les "bons" candidats

La réponse est malheureusement aucun, tous peuvent faire plus d'efforts sur la réduction du poids de leurs images. La taille des images a un inpact important mais le nombre d'images aussi. Pour le bien être de tous les utilisateurs il semble raisonnable de limiter le nombre d'images à une soixantaine. Si malgré cela vous devez afficher un nombre important d'images au format jpeg vous pouvez utiliser la version "progressif" voir fournir une image réduite et charger la vraie image plus tard. Vous allez augmenter le poids de votre page mais accélerer le rendu. (A tester au cas par cas)

Notes

Via wget impossible de limiter les images à la page d'accueil tout en récupérant les images utilisées dans le css, si vous avez une solution élégante je suis preneur.