Chez Fasterize, on avait envie d’apporter notre petite contribution à la campagne présidentielle et on s’est dit qu’avoir une approche décalée sous l’angle de la performance Web pouvait être fun.
On a donc passé les sites officiels de campagne dans nos moulinettes et autres outils bien connus (WPT, PageSpeed, etc …) et on a compilé les résultats.
Nous avons sélectionné les sites officiels des 5 candidats en tête des sondages à ce jour et nous n’avons regardé que la homepage (désolé pour les autres candidats … et les autres pages).
Ces sites sont donc :
- Jean Luc Mélenchon : http://www.placeaupeuple2012.fr/
- François Hollande : http://toushollande.fr/
- François Bayrou : http://www.bayrou.fr/
- Nicolas Sarkozy : http://www.lafranceforte.fr/
- Marine Le Pen : http://www.marinelepen2012.fr/
Soyons clairs et même si c’est évident, avoir un site rapide ne reflète pas un programme politique et donc il n’y a aucune corrélation entre cette mini étude et le résultat de dimanche soir prochain !
Pour ce qui est des résultats, on peut constater que même en 2012 (ou 2011 pour les sites lancés il y a quelques mois), quasiment tous ces sites ne respectent pas les règles élémentaires de performance Web, voire pour certains font de l’antiperformance.
D’abord, quelques vidéos pour constater visuellement start render et temps de chargement. On peut déjà voir que ces deux métriques ne sont pour la majorité pas extraordinaires. Les vidéos ont été faites à plusieurs moments de la journée et en prenant en compte soit le lastchange, soit le document complete pour déterminer la fin.
Dans l’ensemble, aucun des sites n’utilisent de CDN ou de domaine pour les objets statiques, tous ont au moins une dizaine de CSS, une vingtaine de JS et le poids des pages varie de 1,2Mo à 5Mo (ouch !) tandis que le nombre de requêtes varie quant à lui de 60 à 220. L’évolution pointée par les chiffres de StrangeLoop (http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/web-pages-keep-getting-bigger/) ou Souders (http://httparchive.org/trends.php?s=Top1000) de la taille et de la complexité des pages n’est pas un mythe !
La plupart des sites ont des headers de cache mal configurés (à croire qu’ils n’ont pas envie que les électeurs reviennent …) et deux sites n’ont même pas activé la compression Gzip …
Quasiment aucun ne fait de minification CSS/JS ou de concaténation CSS/JS ou bien n’utilise un loader JS. Sur les homes, le pourcentage de règles CSS inutilisées est impressionnant (de 70 à 90%).
Pour ce qui est des images, seuls les sites des favoris ont des images assez optimisées, tous ont des images avec des tailles non spécifiées (90 pour Bayrou !) et seuls les sites de gauche utilisent la bonne taille pour leurs images.
Bref, gauche, droite ou centre, il fallait s’y attendre, les sites de nos candidats ne sont pas optimisés ! (Ce n’est pas forcément leur priorité, c’est vrai)
Le palmarès selon PageSpeed donne :
- Sarkozy (90)
- Hollande (88)
- Le Pen (84)
- Mélenchon (72)
- Bayrou (69)
Quelques remarques pour chaque site :
Mélenchon
Le site http://www.placeaupeuple2012.fr/, développé avec WordPress, fait partie des mauvais élèves de ce classement. Pas de Keep-Alive, pas de Gzip, des headers de cache mal configurés, une page complexe et un poids conséquent font que le site est naturellement mal classé par PageSpeed. Cependant, le Front de Gauche a de la ressource, il arrive quand même à obtenir un start render et un temps de chargement honorable !
Hollande
Le site http://toushollande.fr/ est un site sobre, court, très léger. Un des seuls à utiliser la concaténation JS et les sprites ! Il mérite largement d’être dans les premiers du classement (nous n’avons pas jugé le contenu !).
Bayrou
2700 lignes de HTML, une page qui pèse presque 5Mo (avec une image de plus de 1Mo au milieu), quasiment 30 CSS, 25 JS, contrairement à son programme centré sur la réduction de la dette, on ne peut pas dire que son site fasse dans l’économie !
Sans surprise, le site obtient un score Page Speed de 68/100 (c’est mauvais) mais paradoxalement, il est remarquable de voir que ce n’est pas le plus lent à se charger car même s’il est le plus lourd, il n’a pas d’éléments bloquants.
Il a de plus un excellent TTFB (50ms), est-ce que c’est du à l’utilisation d’un cache en frontal (Varnish) ou bien son hébergeur (NeoTelecom) ?
Sarkozy
Le site http://www.lafranceforte.fr/, développé en Drupal, est un site extrêmement complexe (220 requêtes, plus de 2000 éléments DOM, 50 fichiers JavaScript !) qui est long à se charger car il possède beaucoup d’éléments bloquants (à tel point que son start render est supérieur au load time).
Malgré tout il obtient la meilleure note car il est observe la majorité des bonnes pratiques de performance Web et possèdent notamment des headers de cache plutôt mieux configurés que les autres.
Il existe quand même des 404 sur certaines ressources.
Le Pen
Développé en WordPress, le site http://www.marinelepen2012.fr/accueil/ est un des sites les plus “modernes”. La page est légère, le JavaScript est minifié et un certain nombre de scripts sont disposés en bas de page.
En terme de disponibilité, le site de Marine Le Pen a plusieurs fois été indisponible durant les tests. Mais bien sûr, ce ne sont pas les sites officiels qui vont avoir du mal ce dimanche en fin de soirée, ce sont tous les sites médias ! Heureusement, parmi ceux-ci, beaucoup ont déjà pris en compte la dimension WebPerf dans leur développements (20minutes.fr, lemonde.fr).
Petit disclaimer, cette étude réalisée cette semaine n’est pas scientifique du tout, les données ne sont pas reproductibles, ne sont pas exhaustives et les sites ont souvent changé. Bref, elle ne prétend rien démontrer. C’est juste l’occasion de rappeler quelques règles simples que tout le monde devrait suivre.
Encore une dernière chose, si ces sites avaient utilisé Fasterize, ils auraient certainement pu éviter les erreurs de base et accueillir plus de visiteurs, ne pas faire attendre leurs électeurs potentiels et ce tout en faisant des économies sur leurs infrastructures. Bon, c’est vrai aussi que Fasterize est toujours en beta privée et qu’il aurait fallu qu’ils demandent un accès ! Mais patience, nous peaufinons notre service depuis plusieurs semaines pour être sur de pouvoir offrir le meilleur lorsque tout le monde pourra souscrire en ligne ! (Voilà, c’était la pub 😉
N’hésitez pas à laisser des commentaires ! Et surtout, n’oubliez pas d’aller voter dimanche !