OPTIMISATION DE SITE INTERNET, DÉTAILS ET UTILITÉ

Différents outils sont à la disposition d’un webmaster pour analyser les performances d’un site internet. Notre agence utilise systématiquement GTMetrix, outil complet et relativement exhaustif. Nous utiliserons en exemple notre dernière réalisation, le site du Taxi de l’Hergaraï, et nous regrouperons les différents items à optimiser par catégories.

Optimiser les images

En moyenne, les images représentent le plus gros facteur influençant le temps de chargement d’une page. Dans notre exemple, un score de 100% est atteint dans presque tous les items liés aux images :

• Serve scaled images : consiste à mettre l’image directement aux bonnes dimensions sans que le navigateur ait besoin de le faire (par HTML ou CSS). Notons toutefois qu’en utilisant une image plus grande que prévue et en laissant le navigateur la redimensionner, le rendu visuel est plus net.
• Optimize images : il s’agit essentiellement de compresser les images et de leur donner des dimensions acceptables. En ce qui nous concerne, nous utilisons un logiciel spécifique qui nous permet de réduire la taille des images sans perte de qualité.
• Specify image dimensions : un navigateur peut commencer à afficher une page avant même que les images soient chargées. Pour cela, il faut que les dimensions soient spécifiées dans le code, tout simplement.

Optimiser le code

C’est le deuxième plus gros facteur ayant un impact sur le temps de chargement des pages d’un site. Notre exemple montre un score de 100% dans chaque catégorie, mais gardons à l’esprit que très peu de scripts sont utilisés sur la page en exemple.

• Defer parsing of JavaScript : pour charger une page, votre navigateur doit analyser tous les scripts s’y trouvant. Réduire l’utilisation des scripts ou retarder leur analyse jusqu’à ce qu’ils soient requis (pour un script situé en bas de page par exemple), voilà un moyen efficace de charger vos pages plus rapidement.
• Minimize request size : pendant le chargement d’une page, des requêtes sont envoyées au serveur (les cookies, par exemple). En réduisant leur taille et leur nombre, le temps de chargement diminue.
• Optimize the order of styles and scripts : le style CSS et les scripts JavaScript conditionnent en partie le rendu définitif d’une page et peuvent bloquer son affichage jusqu’à ce qu’ils soient entièrement chargés. En les appelant dans un ordre logique ou en les parallélisant, la page se charge plus rapidement.
• Avoid bad requests : l’exemple le plus connu est la fameuse erreur 404, qui survient lorsqu’une page n’est pas trouvée (car déplacée ou supprimée). Si cette erreur est renvoyée par un fichier qui était nécessaire au bon fonctionnement de la page, bonjour les dégâts et le gaspillage de ressources serveur !

Réduire la taille du code

Encore un élément susceptible d’impacter le temps de chargement de vos pages. Il concerne notamment le HTML (structure), le CSS (style) et le JavaScript (scripts).

• Minify HTML : pas forcément l’item le plus notable en terme d’efficacité, mais compresser un fichier HTML permet de grappiller quelques précieux octets. Toujours bon à prendre.
• Minify CSS : que ce soit une feuille de style externe ou du CSS intriqué dans le code HTML, la compression permet généralement de gagner là encore un peu de poids sur le fichier de sortie final.
• Minify JavaScript : une fois rédigé, un script n’a pas vocation à être modifié. Compresser un fichier JavaScript permet, en général, un gain de poids conséquent, surtout si le script est lourd.
• Inline small CSS/JavaScript : pour un besoin ponctuel, il peut être préférable d’appliquer un style ou un script directement dans le corps de la page. Cela permet d’éviter d’appeler un fichier externe, on gagne une étape, et donc en vitesse de chargement.

Côté serveur

En fonction de l’hébergeur, il peut s’avérer compliqué de jouer sur ces paramètres, mais heureusement cela reste possible la plupart du temps. Certains de ces items ont un effet dévastateur sur la vitesse de votre site s’ils sont négligés.

• Enable gzip compression : procédé de compression en amont, permet de réduire la taille des fichiers envoyé à votre navigateur. Nous ne détaillerons pas son fonctionnement, notons toutefois que son activation est très fortement recommandée pour accélérer vos pages.
• Enable Keep-Alive : là encore nous ne détaillerons pas son fonctionnement technique, et nous nous contenterons de signaler que son activation est là encore requise pour une bonne optimisation.
• Leverage browser caching : encore un paramètre relativement complexe pour le néophyte, mais dont l’activation permet des gains significatifs sur le temps de chargement.
• Specify a cache validator : en complément de l’item précédent, permet d’ajouter une date d’expiration au contenu statique servi au visiteur de votre site internet.

Les autres points…

Le reste ne sera pas détaillé car peu impactant ou impossible à contourner sans solution payante. On pense notamment au CDN, outil qui peut être très efficace mais dont l’intérêt est plus que discutable sur un site à faible trafic.