Web Performance

Les mobiles ont longtemps été une cible très spécifique à base de WAP. C'est maintenant révolu et on a de réels navigateurs complets avec javascript et CSS. Que peut-on faire de spécifique pour le Web mobile ? C'est Jason Grigsby de cloudfour qui vient de donner une présentation "Going fast on the mobile web". 

La communication des éditeurs de navigateur ressemble plus en plus à celle des vendeurs de lessive, mais au moins on commence à voir l'importance des performances.

Et si on parlait un peu des images ? du point de vue des performances web, toujours.    Sur un site classique comme TF1, Amazon, LeMonde, on dépasse les 100 images sur la page d'accueil, pour un total de près de 300ko. Les sites plus au fait des problèmes de performance ont entre 30 et 50 images mais le poids total est encore souvent supérieur à 100ko.

Ceux qui ont utilisé les jeux vidéo il y a 10 ou 15 ans connaissent forcément les sprites. Pour économiser les ressources on regroupe toutes les icônes et les images dans un ou plusieurs fichiers. Le résultat c'est une sorte de tableau d'images, le jeu utilise alors simplement une partie de cette image à chaque fois qu'il a besoin d'une icône.  Tout est une question de ressources disponibles, à l'époque on parlait de mémoire occupée et d'accès disque. Plusieurs années après, le Web a les mêmes problématiques : la poids et le nombre d'éléments à charger impactent directement et fortement les performances des pages. Il est donc logique qu'on utilise les mêmes solutions.

Camille Roux me fait part qu'il co-animera avec Nicolas Chevallier une présentation sur l'optimisation des performances d'un site web dans le cadre des Intellicore Tech Talks. Cette présentation se tiendra le mardi 8 Juillet à 13h à Sophia-Antipolis.

Aujourd'hui je fais réviser les bases avec Yslow. Il s'agit d'un outil développé par Yahoo! pour vérifier de façon automatisée l'application des règles de performances web internes. Il offre une vue rapide du poids et du temps de rendu de la page, une notation après vérification une à une de 13 des règles de performance web Yahoo!, des graphiques statistiques sur la gestion du cache, et des informations détaillées sur tous les composants de la page

je vous en avais parlé, maintenant c'est fait. Camille Roux et Nicolas Chevallier ont ont réalisé une présentation sur l'optimisation des performances d'un site web aux Intellicore Tech Talks. Vous avez donc maintenant la vidéo et les slides disponibles en ligne. Commentaires et comptes rendus bienvenus.

Stoyan Stefanov, de l'équipe Performance de Yahoo! a donné une présentation fin juin sur l'optimisation des images. J'ai déjà parlé de plusieurs choses, il en rajoute d'autres, avec des chiffres percutants et des explications concices.

Je vous avais rapidement parlé de pngcrush pour optimiser les images PNG, sans aucune perte de qualité. Stoyan Stefanov nous propose jpegtran dans sa dernière présentation sur l'optimisation des images.

Utiliser les filtres CSS d'Internet Explorer n'est pas une bonne idée. Déjà ils sont inutiles la plupart du temps, quand vous pouvez vous contenter d'un PNG8 avec une transparence binaire (c'est à dire la plupart du temps si vous avez suivi le début de la phrase), mais en plus ils sont lents.

Le favicon je pense que vous voyez ce que c'est : cette petite icône bête et méchante qu'on voit à côté de l'URL dans la barre d'adresse du navigateur. Là où c'est moins intuitif c'est que ce favicon peut avoir un impact important dans les performances de votre site.

On parle de temps, de performance, mais finalement que mesure t-on ? La question n'est pas inutile puisque pour une même requête il y a bien trois étape visibles du point de vue du visiteur, cinq du point de vue du navigateur et autant pour le serveur. Alors, que mesure t-on ?

Je vous en parlais il y a presque deux mois, JSON c'est lent à interpréter si on le fait bien. C'est même globalement plus lent que XML parce que le code est en javascript, côté utilisateur, alors que XML est géré nativement par les navigateurs.

Je continue avec l'excellente présentation de Stoyan Stefanov et je prend la suite de la discussion en commentaire d'il y a quinze jours.

Et vous, où en êtes-vous ? Rob Larsen a récupéré une liste de 200 sites américains et a fait fonctionner yslow sur chacun d'eux en janvier dernier. Les résultats c'est 5 A, 6 B, 14 C and 31 D et le reste en F.

Je viens de croiser une liste de recommandations Microsoft pour la performance des sites web. On y retrouve plusieurs choses connues et une recommandation sur la cohérence des liens. La page MSDN donne l'exemple d'un même lien avec deux casses différentes. Certains serveurs ignoreront la casse ou corrigeront le lien mais cela restera deux ressources différentes sur le client, avec des entrées séparées sur le cache, donc au moins une requête HTTP inutile.

J'ai le plaisir de participer demain (vendredi 5 septembre) au WaSP Café qui se tient dans les locaux de l'IESA, à Paris.

Je vous en avais parlé il y a une semaine, voici donc le contenu de notre présentation sur les performances avec Mathieu Pillard et Anthony Ricaud au dernier W3Café.

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50). Cette progression ne faiblit pas, bien au contraire. Attention, je bourre le reste de l'article de chiffres, et certains font peur.

Qui aime attendre pour charger une vidéo ? probablement personne. Du coup quand vous arrivez sur une page avec une vidéo, le lecteur précharge le début au cas où vous voudriez la jouer. Même une fois en lecture, votre logiciel tente d'avoir toujours une avance confortable sur le chargement de la vidéo afin de vous éviter d'avoir à attendre. Sur le principe c'est bien.