Via High Scalability, j'ai découvert cette présentation intitulée Real World Web: Performance & Scalability donnée lors de la MySQL conference 2008 par Ask Bjørn Hansen. Cette longue présentation (189 pages !) est une excellente compilation de la plupart des conseils que l'on peut trouver un peu partout pour améliorer les performances et l'extensibilité (au niveau de l'architecture) d'une application web par exemple à base de MySQL et du langage de votre choix (PHP, Perl, Ruby, ...)
On peut y trouver également quelques petites phrases assez amusantes du type (traduction libre) :
N'hésitez pas à dé-normaliser les données; [...] appelez cela des summary tables, votre DBA n'y prêtera même pas attention.
où encore une jolie manière d'expliquer les concepts de MVC et d'API
Model : parle le SQL
View : parle le HTML
Controller : parle le HTTP
API : fait des trucs
Bref, ce document mérite de s'y attarder quelques minutes :
La gestion des caches « standards » est un point important pour les performances. La vue full (zone entourée de jaune dans la capture d'écran ci-dessus) est assez logiquement l'affichage de la liste des articles, elle est automatiquement mise en cache (cache de vue ou cache de contenu). Pour que la page d'accueil et les pages Blogs et Planétarium soient à jour sans opération manuelle, il m'a fallu ajouter deux règles dans une surcharge du fichier viewcache.ini pour que le cache de vue soit vidé lors de l'ajout d'un objet de la classe Post ou de la classe Site.
Les menus (menu horizontal, liste des blogs, liste des planets) sont chacun entourés d'une instruction cache-block (cadres rouge) expirant avec la partie de l'arborescence qu'ils affichent. Et pour aller encore un peu plus loin, chaque article est lui-même individuellement mis en cache par un cache-block. Cela permet de limiter le nombre de requêtes SQL nécessaires à la re-génération de la vue full lors de l'ajout ou de la mise à jour d'un article ainsi que sur l'affichage des résultats de recherche.
Le temps de génération (ou de distribution) des pages n'est qu'une petite partie du temps total d'affichage de la page. Les Yahoo! Performances Rules ou le livre High Performances Web Sites listent les principales recommandations pour améliorer ce point.
Limiter le nombre de requêtes HTTP est la première règle (la plus efficace) pour l'optimisation d'un site bien avant la configuration de l'entête d'expiration et la compression gzip des contenus textuels, mais il peut aussi s'agir de la plus complexe à mettre en place. Si il est assez simple de rassembler les feuilles de style CSS et les fichiers Javascript pour limiter le nombre de téléchargements, le cas des images est un peu plus complexe. On peut appliquer la technique dite des CSS Sprites sur les images utilisées pour la décoration via la propriété CSS background. Cette technique consiste à rassembler les images en un seul fichier et à jouer avec la position pour n'afficher que la zone voulue. En effet un navigateur mettra moins de temps à télécharger 1 fichier que 6 petits fichiers de taille totale équivalente et en plus le fichier réunissant les 6 premiers est généralement plus petit, double bénéfice donc. Au niveau montage, il faut par contre savoir qu'une dimension doit nécessairement être fixée ou au moins contrôlée (par exemple le texte contenu est toujours le même), il ne me semble pas possible de remplacer des images qui se répètent sur les axes X et Y à la fois.
J'ai donc expérimenté cela sur ce site dont le design est suffisamment simple. Le design utilise 8 images via la feuille de style, mais 2 restent un peu à part :
le logo RSS est un PNG 24 bit pour que les arrondis soit vraiment arrondis, il restera donc seul
l'image utilisée en fond des citations est assez large alors que toutes les autres le sont beaucoup moins ou sont répètées sur l'axe horizontale, elle reste intacte également.
Les 6 images restantes sont à l'origine des GIF, j'en ai profité pour les convertir en PNG pour comparer les tailles des différents agencements, ce qui donne le tableau récapitulatif suivant (les tailles sont en octets) :
Je suis très étonné par la taille du GIF rassemblant les 6 images d'origine. Pour le reste, le PNG est légèrement plus efficace presque partout et le CSS Sprites à base de PNG est 11% plus petit que les 6 GIF originaux (et presque autant avec les 6 PNG), j'ai aussi l'impression que l'affichage du site est un peu plus rapide avec ou sans cache navigateur. Il faut quand même noter que cette technique fait légèrement grossir la feuille de style mais comme celle-ci est compressée l'augmentation est plus que faible (1 octet !) et en m'y replongeant j'ai trouvé quelques optimisations qui ont largement compensées cet écart et je n'ai pas encore réellement minifié la feuille de style...
Finalement sur ce site rien de très compliqué, la mise en page est très simple, le plus dur étant d'ordonner correctement les images pour ne pas se retrouver avec une belle mosaïque. Pour voir un exemple un peu plus complexe, on peut étudier le montage du site Yahoo.fr par exemple même si il ne s'agit pas non plus de la page la plus complexe du monde...
Only 10-20% of the end user response time is spent downloading the HTML document. The other 80-90% is spent downloading all the components in the page.
Traduction libre :
Seulement 10 à 20% du temps de réponse ressenti par l'utilisateur provient du téléchargement du document HTML. Les 80 à 90% restant viennent du téléchargement des autres composantes de la page.
Voila la Performance Golden Rule qui sert de base à ce court mais excellent bouquin High Performances Web Sites de Steve Souders (employé chez Yahoo!) expliquant 14 règles pour améliorer la rapidité d'affichage d'un site web. En fait ce livre reprend les 14 premières bonnes pratiques listées par Yahoo! pour améliorer les performances générales d'un site web. Ces points sont applicables à quasiment tous les sites (à part peut être l'utilisation d'un Content Delivery Network qui est hors de porté du commun des mortels...) quelque soit la technologie employée puisqu'il s'agit essentiellement de configuration au niveau du serveur web ou dans la construction des pages.
En plus de ces règles, le livre explique succintement quelques concepts du protocole HTTP liés aux performances et propose une analyse des 10 plus gros sites américains (MSN, Google, Yahoo!, CNN, Wikipedia, MySpace...). Si ces règles sont assez connues (et pour certaines de l'ordre du bon sens), l'intérêt principal du livre réside dans la quantification des gains éventuels ainsi que dans les explications amenant à ces règles sur le fonctionnement des navigateurs sur la construction d'une page, la parallélisation des téléchargements ou le cache DNS.
Bref, il s'agit vraiment d'un très bon livre pour tout développeur ou administrateur où la plupart des recettes sont applicables en quelques minutes seulement pour un résultat immédiat et assez spectaculaire.
