Performance, en allant plus loin que PHP
09/12/2008 de 09:00 à 10:00 - amphi
80% des problèmes de performance ne se situent pas sur le serveur mais sur le client : échanges sur le réseau, rendu dans le navigateur, organisation des composants dans une page.
Nous nous éloigneront très légèrement de PHP pour parler des performances côté client. Avec quelques règles simples à mettre en oeuvre pour le développeur web PHP, vous pourrez voir des gains de performance sensibles sur des sites à fort traffic.
Eric Daspet (Yahoo!)
Entré sur le web avec les première versions du langage PHP, Éric finit par co-écrire le livre « PHP 5 avancé » aux éditions Eyrolles, en cinquième édition à l'écriture de ces lignes. Porté sur la qualité et l'excellence technique il élargit ses centres d'intérêt à l'accessibilité, à l'interopérabilité, et à tout ce qui touche le web du côté du navigateur.
Suivant cette direction il rejoint le groupe Openweb puis fonde en 2005 les conférences Paris Web pour diffuser la bonne parole sur la qualité web. Aujourd'hui Éric travaille sur les sites web de Yahoo!, donne régulièrement des conférences sur PHP, Ruby et les technologies web, et tient à jour un blog technique sur les performances des sites web.
Actualités de cette session
C'est la fin de la première session de la journée.
Une annonce de la part de Zend France vient d'être donnée. En effet, je l'ai appris hier soir lors de l'apéro, Zeev Suraski ne sera pas présent aujourd'hui pour des raisons personnelles d'empêchement.
Néanmoins Zend a confirmé que sa session sera présentée ce soir par Gauthier Delamarre (Zend France) et qu'il y'aura des vouchers pour la certification PHP 5 et Zend Framework à gagner par tirage au sort.
Time for questions !
Question 1 : peut-on utiliser du cache avec le protocole HTTPS ?
Réponse : oui pour les contenus statiques sans problème.
Question 2 : que doit-on utiliser pour concaténer ? Existe-t-il des outils ?
Réponse : généralement tout est fait à la main, mais il existe des script comme Combo Handler qui sont capables de vous faciliter la tâche.
Question 3 : optimisation du poids des images pour les CMS ? Existe-t-il des outils pour faciliter l'optimisation des images ?
Réponse : Smush.it, PNGcrush, ImageMagick à lancer aux moments des uploads.
Question 4 : Outils d'aide aux performances sous IE ?
Réponse : AOL Page Test fonctionne pour IE, Shard pour effectuer des tests de latence.
Question 5 : Chargement à la demande via YUI ?
Réponse : Il est préférable de faire un chargement manuel plutôt que du chargement à la demande.
Question 6 : Peut-on reforcer le rechargement d'un composant qui se trouve dans le cache navigateur ?
Réponse : Non, il faut envoyer les headers Expires ou au mieux changer l'url du fichier pour que le navigateur comprenne que le fichier a changé.
Ex : http://www.site.com/mon_js.js?version=1
Ex : http://www.site.com/mon_js.js?version=2
Question 7 : Optimisation des CSS ?
Réponse : Il est simplement recommandé de supprimer les espaces blancs.
Question 8 : Qu'en est-il des chargements parallèles sur les nouveaux navigateurs ?
Réponse : Firefox 3 et Safari 3.1 sont capables de mettre jusqu'à 6 fichiers en téléchargement parallèle. Des améliorations sont d'ores et déjà prévues pour les prochaines versions de Firefox, Safari, Opéra ou Chrome pour 2009.
Question 9 : Qu'en est-il de GZIP ?
Réponse : GZIP est supporté à partir de IE 3 mais avec quelques potentiels dysfonctionnement !
Quelques outils pour jouer avec les performances :
- Firebug (débug, onglet réseau avec graphiques en cascade...),
- YSlow (Yahoo!), extension de firebug qui évalue le site Internet testé selon 14 critères. Une note de A à F est transmise à la fin de l'audit automatique. A étant la note la plus haute.
- AOL Page Test pour établir des graphiques en cascade.
Enfin, une documentation riche des performances sur le site de Yahoo!
http://developper.yahoo.com/performance (anglais)
http://performance.survol.fr (français)
Information importante transmise par Eric : lorsque le navigateur charge des fichiers JS (jQuery ou n'importe quel autre script), il bloque entièrement les téléchargements des autres composants de la page. Il y'a donc un moment de latence que l'on peut éviter en demandant à charger les Javascript en bas de la page avant le tag </body>. L'objectif est bien entendu de rendre la page le plus rapidement utilisable par le client.
Si l'on ne souhaite pas charger les javascripts en bas de page, il est recommandé de les charger dynamiquement au moyen d'un script JS qui construit la balise script.
Il est recommandé de placer tous les fichiers statiques (images, css, js, html...) sur un serveur différent ou bien au minimum sur un domaine ou sous-domaine différent pour améliorer les téléchargements en parallèle.
Les slides qui suivent s'intéressent au chargement en parallèle des composants. C'est la parallélisation qui permet d'utiliser au maximum la bande passante pour transmettre un maximum d'informations en même temps.
IE6 est capable de paralléliser les téléchargements en lançant deux fichiers parallèles en même temps.
Les nouveaux slides s'intéressent aux sprites, c'est-à-dire l'art de composer une grande image composée de plusieurs petites images. Grâce à des règles simples de CSS, il suffit de décaler l'image de fond sur la petite image voulue. En effet, les balises HTML agissent comme des fenêtres.
Enfin, Eric nous explique qu'il est important de concaténer les fichiers qui peuvent l'être (CSS / JS...) afin de n'avoir plus qu'un seul fichier à charger plutôt que plusieurs => 1 requête HTTP.
Concernant les images, il faut préférer le format PNG par rapport à GIF qui s'avère plus léger pour une qualité équivalente. Bien entendu, il est recommandé de compression les PNG avec un logiciel comme PNGcrush. Photoshop, en revanche ne compresse pas correctement les PNG. A éviter.
Une autre bonne pratique est de retirer toutes les méta data présentes dans les images qui occupent un poids non négligeable du poids total de l'image.
Enfin, pensez à utiliser des PNG8 plutôt que des PNG16 ou PNG24.
Un outil sympa proposé par Eric : Smush.it (http://www.smush.it) qui est un utilitaire pour firefox de compression des images sans trop de perte de qualité.
