Critère des moteurs de recherche et important dans l’expérience utilisateur, le chargement des pages d’un site demande une optimisation.

Travailler le poids des pages de son site est quelque chose d’important pour plusieurs raisons. La première est pour les visiteurs. Plus la page est lourde, plus elle mettra de temps à se charger. Ce qui pénalisera tous ceux possédant une faible connexion et les connexions mobiles. Quant aux visiteurs possédant une bonne connexion, habitués à des temps de chargements rapides, une différence de quelques secondes voire quelques dixièmes de secondes ne leur passera pas inaperçue. Rendre le temps de chargement des pages le plus court possible est donc utile pour leur expérience.

Cependant cela n’est pas seulement important pour vos visiteurs, mais aussi pour les moteurs de recherches, car le poids de la page est un critère pris en compte dans le référencement. Ce tutorial va donner quelques moyens simples pour alléger un site.

 

I – Les images :

Elles sont les principales responsables de l’alourdissement d’une page et il faut travailler ce point là avec soin.

Optimiser les images en JPEG : format le plus utilisé dans le web, il est celui que l’on peut optimiser le plus facilement. Pour cause, la plupart des logiciels de graphisme et certaines visionneuses d’images permettent un enregistrement de l’image pour le web. Par ce biais, on peut réduire le poids de l’image de manière conséquente. Généralement des logiciels font l’optimisation à hauteur de 25 %, soit réduisant la qualité de l’image à 75 %. Une bonne optimisation se situe à une qualité réduite entre 50 % et 75 %. Tout dépend de l’image, il faut allier optimisation tout en gardant une bonne qualité de l’image et quelle ne pixelise pas trop. Evidemment dans le cas où le site se doit de présenter des images de hautes qualités (par exemple un site de photographe), il faut garder la qualité maximale pour les images concernées.

Le piège du PNG : ce format d’image permet une grande qualité et surtout gérer la transparence. Un atout indéniable certes mais le PNG devient très vite lourd. Cependant dans le cas où l’image PNG est placée sur un fond uniforme ou un dégradé, mieux vaut reproduire cet arrière-plan dans son image (donc dans son calque de fond) et l’enregistrer sous JPEG. Le poids de l’image sera nettement réduit et le résultat visuel sera identique.

Le GIF : autre format du web, il ne faut pas l’oublier. En plus de lui aussi gérer la transparence, il permet aussi de gérer les animations (mais attention les gifs animés peuvent devenir lourds). S’il vaut mieux l’éviter pour des images de grandes tailles, il peut se révéler bien plus rentable que le JPEG pour de petites images telles que des icônes et des boutons, grâce à ses enregistrements en différents nombres de couleurs possibles.

 

A noter : certains CMS comme WordPress possèdent des extensions qui permettent d’optimiser les images lorsqu’elles sont uploadées. Ce qui permet un gain de temps en évitant de devoir préparer ses images avant.

 

II – Les fonctionnalités en javascript :

Le javascript est un langage de programmation très prisé sur le net car il permet de nombreuses choses, y compris des animations simples grâce à des frameworks tels que jQuery qui augmentent considérablement ses possibilités. Cependant lui aussi entraîne des conséquences sur le temps de chargement de la page. Il faut donc l’utiliser avec parcimonie et donc mieux vaut l’utiliser pour des fonctionnalités ergonomiques et utiles, plutôt que pour des effets n’étant que visuels et alourdissant la page.

D’un point de vue programmation, il faut veiller à ce que le code se lance uniquement où il doit être utilisé. Inutile que le script javascript soit présent sur toutes les pages, alors qu’il ne s’active que sur une d’entre-elles. Car même s’il n’est pas utilisé, il est chargé par le navigateur et donc pour rien.

 

III – Les applications flash :

Pour les animations, il est bien meilleur que le javascript et offre bien plus de possibilités. Mais là où le javascript est un langage faisant partie intégrante d’internet (étant utilisé dans le fonctionnement des navigateurs), le flash est une extension, un plugin. Bien plus lourd, très mal pris en charge par les moteurs de recherche (pour ne pas dire pas du tout), son utilisation doit avoir une justification bien plus importante que le javascript.

De plus beaucoup de choses peuvent être désormais faites en HTML5 qui est monté en puissance. La majorité des navigateurs a d’ailleurs annoncé ne plus prendre en charge Flash dans l’avenir et sa fin a été également annoncée par Adobe.

 

IV – Un codage propre :

Ce point sera traité brièvement, mais quelque soit le langage utilisé, que cela soit le html, le php, le javascript, une page bien structurée, un code propre et rigoureux, respectant les normes, dont les fonctions s’exécutent avec des méthodes les plus rapides possibles entraîne un code moins lourd et plus efficace. Mieux c’est codé, plus léger et rapide sera le site.

 

V – Les feuilles de style (CSS) :

Concernant celles-ci, on peut facilement gagner quelques octets sur le poids de son ou ses fichiers CSS. Ceci peut sembler négligeable, mais quelques octets plus quelques octet et on peut gagner des dixièmes de secondes de temps de chargement.

Le nombre de feuilles de styles :

C’est la première règle et la plus simple : n’avoir qu’une seule feuille de style si possible. Plus il y a de feuilles, plus cela demandera de travail au navigateur. Ce qui est en somme logique. Cependant si cela est facilement réalisable pour certains sites pour d’autres cela est bien compliqué. Les forums reposant sur le CMS phpbb en sont par exemple un bon exemple par leurs structures complexes. Ils possèdent une dizaine de feuille de styles, chacune étant sur un aspect précis (structure, couleurs, liens, formulaires,…). Une nécessité pour travailler facilement ses styles et s’y retrouver facilement.

Nb : On peut trouver dans certains codages la fonction php @import. Elle permet d’appeler plusieurs feuilles CSS dans un fichier php facilement. Très pratique, elle entraîne cependant appel des feuilles de style plus long, qu’un appel classique classique. Si elle n’entraîne pas un poids plus élevé de la page, elle augmente le temps de chargement tout de même. A éviter donc si possible.

Bien établir ses attributs :

Petit rappel : une feuille de style se compose d’attributs donnés à une balise html, une classe (.classe) ou division (div) placée dans son code HTML. Une feuille de style bien structurée va allier souplesse et clarté.

Pour commencer éviter les répétitions. Inutile par exemple de répéter une taille de police, une couleur quand un élément qui englobe les autres permet de leur attribuer à tous.

Ne pas oublier les classes. Grâce à elles ont peut facilement créer des ensembles d’attributs génériques, que l’on peut réutiliser facilement où l’on veut dans son site. Donc quand on a quelque chose qui se répète dans un design, une seule classe pour le faire permet d’alléger le code, plutôt que de répéter les attributs x nombre de fois.

Les codes couleurs :

On touche là la recherche de l’octet près. C’est quelque chose de tout bête mais quand on a une couleur dont le code est composé de lettres ou chiffres identiques, on peut l’écrire simplement avec trois fois sa lettre ou son chiffre.

Ex : #000000 => #000 pour le noir
#FFFFFF => #FFF pour le blanc

Certes, on ne gagne que 3 misérables octets à chaque fois. Mais répété un certain nombre de fois, le gain n’est pas négligeable au final.

 

VI – La compression :

Voici encore une méthode pour réduire le poids des fichiers. La compression consiste à condenser le code du fichier, le mettant sur une ligne. Le poids gagné est conséquent et c’est une solution facile et rapide à mettre en place. Dans la pratique, on la réserve principalement pour les fichiers javascript et CSS, car le gain est le plus grand avec eux. De plus, une fois le projet en ligne et installé on est souvent amenés à moins les retoucher par la suite.

Attention cependant à des sites créés sur des services en ligne. Si les effets sont bien là sur le site, selon le service et le navigateur, un code compressé peut-être mal pris en charge et causer des soucis dans le panneau d’administration.

 

VII – Pour aller plus loin :

Si l’on désire réduire encore plus le temps de chargement de ses pages, et que l’on a la main sur l’hébergement et/ou le serveur directement, on peut pousser encore plus les choses en mettant en place des solutions avancées. Celles-ci sont liées à d’autres composantes d’un site web, les principales d’entre elles étant liées au cache et au serveur. Mise en cache temporaire de certains éléments du site comme les images (faisant que lorsque le visiteur revient, il n’a pas à charger à nouveau ces éléments), compression Gzip sont les deux principales.