Optimisation de pages web

Temps de lecture : 4 minutes

Google tient maintenant compte de la vitesse de chargement des pages pour leur moteur de recherche. Les pages rapides ont tendances remonter dans la liste des résultats, tandis que les autres se perdent dans les fins fonds des listes de résultats… 😛

Tout d’abord, revenons aux fondamentaux. Une page web c’est un texte structuré qui est compris et afficher d’une certaine manière par notre navigateur. Le visiteur demande une page, par le biais de requête HTTP et le serveur construit la page et l’envoie au client.
On remarque que nous pouvons agir sur la construction de la page, en optimisant nos codes PHP, JSP ou autre et sur le temps de transfert de la page au client.
En effet le temps de transfert de la page et dépend entre autre taille de celle-ci, donc au nombre de caractères qu’elle contient. Nous allons donc mener une chasse aux caractères 😛

Minification de code

Pour réduire la taille de nos pages nous pouvons minifier nos codes CSS et JavaScript (faites une sauvegarde avant). Pour cela nous pouvons utiliser le minifieur de css suivant. Celui-ci enlèvera tous les commentaires et les retours la ligne. Ceux-ci ne sont utiles qu’aux développeurs. De mme pour le JavaScript grâce au compresseur JavaScript/ (cocher Shrink variables, mais pas base62 encode).
En moyenne, nous avons gagner 40 50% sur la taille de nos fichiers tout en ayant le mme comportement.

Regroupement du code

Afin de limiter le nombre d’accès des fichiers différents pour afficher une page, il est préférable, dans la limite du possible de limiter le nombre de fichier JavaScript et CSS quitte avoir de plus gros fichiers.

Les images

Tout d’abord, il ne faut jamais redimensionner une image lors de son affichage. Ceci ralentit le temps d’affichage et peu nuire la qualité de celle-ci. Il vaut mieux stocker l’image sous la taille voulue, quitte la stocker plusieurs fois sous plusieurs tailles différentes.

Pour toutes les images que vous utilisez plusieurs fois par pages, le mieux est de créer une classe CSS du type :

.icone-nomimage{
               background:url(images/monimage.png) center right no-repeat;
               padding:0 16px 0 0;
              white-space:nowrap;
}

Pour appliquer l’icone votre span, div ,a il suffit de lui ajouter la classe css icone-nomimage.
Contrairement la balise img le css ne chargera qu’une seule fois l’image depuis le fichier, par conséquent tous les éléments de la classe icone-nomimage verront leur image s’afficher au mme moment et non les un aprs les autres.
Au niveau de l’interface graphique, de plus en plus d’images sont utilises. Le rendu est beau mais plus lent charger. Le logiciel suivant : caesium/ (uniquement pour windows pour le moment) permet de les compresser jusqu’à 80% sans perte visible de qualité. Méfiance toutefois sur la gestion de la transparence.
Voici un exemple sur une photographie :

Le gain sur une interface complète peut être assez intéressant.
Et enfin voici une des nouvelles librairies donc nous avons parlé en début d’article.
jQuery image Preloader Plus Callbacks est un plugin JQuery qui permet de faire du pres-caching des images de l’application. Son fonctionnement est simple comprendre; Une fois que le visiteur a entièrement chargé la page qu’il visite on va commencer charger les images présentes sur les autres pages du site sans les afficher. Cette action permet de mettre les images dans le cache du navigateur et de les afficher instantanément quand le visiteur en aura besoin. Pour les images hors css il faut préciser lesquelles on veux charger, pour celle du css une fonction permet de toutes les charger.

Chargement différé du JavaScript

Lors du chargement d’une page web les fichiers javascript sont chargés en mme temps que le code HTML, dans l’ordre d’apparition. Par conséquent si vous avez énormément de code JavaScript dans votre header la page va rester blanche pendant un petit moment. La librairie Head js permet de pallier au problème en chargeant le JavaScript en différé, comme une image. Cela permet d’afficher la page avec le style css, et donc de faire croire l’utilisateur que le site est prêt, alors qu’il ne le sera réellement que quelques secondes aprs. (mentir c’est mal :P)
Vous pourrez la tester par vous mme l’adresse suivante http://headjs.com/test/script.html. Pour avoir des résultats concluant actualisez en faisant ctrl+F5 (vide le cache avant d’actualiser).

Compression des pages la volée

Afin de gagner encore un peu sur la taille de vos pages web, si vous utilisez PHP vous pouvez ajouter au début de votre/vos point(s) d’entre la ligne suivante :

          ob_start("ob_gzhandler");

Ceci permet de compresser entre 15 et 30% votre page web. Malheureusement IE 6 sous windows XP SP1 ne comprendra rien, mais bon comme le support est fini on peut imaginer qu’il tend disparaitre