Augmenter les performances de votre site internet avec les bonnes pratiques Yahoo (1303 lectures)

200915/04

Yahoo définie une liste de 34 bonnes pratiques divisées en 7 catégories, destinées à améliorer les performances et la rapidité de votre site internet.

Yahoo propose même un composant (add-on), YSlow, qui s'intègre à Firebug et vous permet de visualiser rapidement les performances.

Sans passer en revue toutes les bonnes pratiques, nous allons voir dans cet article comment nous avons augmenté les performances de notre logiciel TuttiFrutti de 90% !

Les bonnes pratiques Yahoo

Minimiser les requêtes HTTP

80% du temps total nécessaire pour délivrer une page web est fourni sur le front-end pour délivrer tous les composants d'une page : images, feuilles de style, javascripts, flash, ...
Ca signifie que 80% du temps de chargement d'une page est occupé à la présentation des données.

Minimiser les requêtes HTTP augmente la rapidité de chargement des pages.

Par exemple, au lieu de faire 5 requêtes HTTP en affichant 5 fois la même image en dur dans une page, on réduit à 1 seule requête HTTP en appelant cette image par la feuille de style.

Maintenant, il faut aborder ces bonnes pratiques selon le cas, et parfois préférer une architecture plus classique quitte à perdre un peu sur les performances.
Yahoo recommande par exemple de placer l'ensemble des javascripts (ou l'ensemble des feuilles de style ou autres scripts clients) dans un seul fichier, dans le seul but de réduire les requêtes HTTP. Mais dans ce cas, on va augmenter le risque de confusion sur l'architecture et les problèmes liés à l'évolution du site ou à la maintenance.

Compresser vos requêtes HTTP avec le composant Gzip

Le mode de compression Gzip est actuellement le meilleur mode de compression connu.

En envoyant dans votre entête HTTP les informations nécessaires pour activer le mode de compression Gzip, vous allez réduire les temps de réponse de 70%.

Il vous suffit juste d'envoyer l'entête suivant en php :

<?php
header('Accept-Encoding: gzip, deflate');
?>

Appeler vos feuilles de styles entre les balises HEAD

C'est une pratique très largement répandue qui accélère le temps de chargement des pages.

Alsacreations propose en rapport avec l'appel aux CSS et aux performances un article lié : N'utilisez pas @import.

Placer vos javascripts en fin de document

Le problème posé par les scripts est qu'ils bloquent les téléchargements parallèles. La specification HTTP/1.1 précise ainsi qu'un navigateur ne télécharge pas plus de deux composants en parallèle.
Tant qu'un de vos scripts n'a pas été téléchargé complètement, il bloque tout les chargements des composants suivant.

Il ne s'agit pas tant de gagner plusieurs secondes que d'améliorer l'expérience utilisateur comme le précise Yahoo, pour lui délivrer des pages plus rapidement, plus légères, plus fluides à la présentation.

Minifier les CSS et les Javascripts

Cette bonne pratique, mise en place sur TuttiFrutti, nous a permis de constater une considérable réduction du poids de la page, jusqu'à 89% !

Il existe plusieurs possibilités pour minifier les CSS et les javascripts, JSMin, YUI Compressor (Yahoo). Nous avons utilisé une application écrite en PHP5 et élaborée à partir des travaux de JSMin : Minify.

Avec TuttiFrutti, minifier les scripts javascripts devient aussi simple que cela :

<?php
echo $minify->js(array('jquery-latest.pack','jquery.corner','swfobject','functions','nav'))."\n";
?>

En sortie, ces 5 fichiers javascript se retrouvent minifiés et vont ressembler à ça :

Rendu de la minification des javascripts

Nous n'avons pas passé en revue toutes les bonnes pratiques Yahoo, mais rien que celles décritent ci-dessus devraient vous convaincre de les regarder de plus près.

Au final, voici ce que le composant YSlow renvoie pour la page d'accueil de TuttiFrutti :

Performances YSlow