Article rédigé dans le cadre de la Hacker’s Challenge et sponsorisé par Radware
C’est un article que je souhaite écrire depuis longtemps et j’en ai enfin l’occasion. L’objectif ici est de vous donner toutes les pistes pour optimiser au maximum les temps de chargement de votre site. C’est quelque chose de très important, d’abord pour l’internaute, car si le chargement de vos pages est trop lent, celui-ci fermera vite l’onglet de son navigateur (on estime par exemple à 3 secondes maximum la patience de l’utilisateur d’un site e-commerce). Mais c’est aussi quelque chose de primordial pour le référencement, car les moteurs de recherche ont tendance à favoriser les sites qui répondent vite.
Je vais donc passer en revue tous les points à regarder lorsqu’on souhaite optimiser son site. Je vais partir du principe que votre hébergeur est correct et je ne vais pas forcement entrer dans tous les détails techniques, car ce serait trop long, mais je vous mettrais tous les liens.
Avant d’attaquer le vif du sujet, ce que je vous propose c’est d’abord de benchmarker votre site. C’est-à-dire de savoir exactement en combien de temps vos pages s’affichent. Pour cela, je peux vous recommander d’utiliser l’un des outils suivants :
Tous donnent des notes, des détails et plein de conseils et mon préféré est Webpagetest.
Les premiers éléments qui sont évalués sur ce genre de services sont :
- Le TTFB (Time To First Byte) : C’est le temps que le serveur prend pour renvoyer sa première réponse.
- Le Start Render : C’est le temps pour que quelque chose soit affiché sur l’écran. Avant ça, l’écran de l’internaute est blanc.
- Le Fully Loaded Time : C’est le temps pris pour que la page et tous ses éléments soient chargés totalement.
- Le Byte in : C’est la quantité de données que doit récupérer le navigateur pour afficher entièrement la page et tous ses éléments.
Les sites que je vous ai mentionnés vous expliquent bien sûr tout cela et vous indiquent quelques conseils pour tenter d’obtenir de meilleures notes.
En gros, vous allez devoir agir à 4 endroits différents : Au niveau de vos pages HTML, au niveau de votre base de données, au niveau de votre serveur et au niveau des fichiers tiers appelés par vos pages.
Avant toute chose, ce que je vous recommande de faire, c’est d’utiliser un système de mise en cache côté serveur. Cela a pour effet de rendre statiques des pages qui sont dynamiques. L’idée c’est d’économiser les ressources du serveur et lui éviter de travailler inutilement. Je pense par exemple à Varnish, Memcached ou encore APC qui font ça très bien. Si vous utilisez aussi un CMS, il est possible d’installer aussi des plugins spécifiques pour mettre les pages en cache. Par exemple pour WordPress, je vous conseille fortement WP-Rocket (payant, mais de loin le meilleur) ou WP Total Cache ou WP Super Cache. Ce genre de plugins possèdent aussi d’autres fonctionnalités qui permettent de grappiller quelques secondes sur le chargement.
- Memcached
- Varnish
- Mise en cache Apache
- WP Super Cache
- Total Cache
- Et mon préféré, WP-Rocket
L’autre grosse étape dans l’optimisation du chargement de votre site, c’est la « minification« . Ce concept au terme anglophone signifie réduire la taille de certains fichiers en y supprimant par exemple les espaces, en réduisant la taille des variables ou en refactorisant le code.
Vous pouvez d’abord « minifier » vos pages HTML puis passer aux fichiers CSS et enfin aux fichiers JavaScript. Attention, parfois ça passe mal, donc testez bien l’affichage et le fonctionnement de votre site après un passage dans la moulinette. Il existe des outils en ligne pour faire ça, mais Notepad++ propose aussi cette possibilité, sans oublier de nombreux plugins WordPress.
Ensuite, il faut compresser vos contenus. En effet, les navigateurs et les serveurs web comme Apache ou Nginx savent gérer un petit niveau de compression. Dans Apache, pouvez activer cela grâce au fichier .htaccess présent à la racine de votre site.
Toujours via le .htaccess, il est aussi possible d’ajouter des marqueurs Expire Headers pour indiquer au navigateur combien de temps il doit garder un fichier dans son cache. Par exemple si la home de votre site est régulièrement modifiée, vous pouvez spécifier une entête d’expiration (expire header) très courte. Par contre pour des fichiers un peu plus statiques comme les images ou les CSS, vous pouvez rallonger cette durée à plusieurs mois. Notez aussi que la désactivation des Etags permet de gagner du temps de chargement et de la bande passante.
- Comment ajouter des Expires Headers
- Configuration des Expires Headers
- Comment configurer ou désactiver les Etags
Ce qu’il faut bien comprendre aussi c’est que dans un process de chargement classique, l’affichage d’une page se fait de manière séquentielle… Header (entête), corps de la page puis footer (pied de page). Malheureusement, certains fichiers JavaScript (ou autres comme les images, les CSS…etc.) peuvent prendre du temps à charger, ce qui bloque les autres éléments à charger derrière. À vous de faire le tri entre les ressources indispensables à l’affichage de votre page et les ressources plus secondaires. En fonction de ce que vous aurez déterminé, vous pourrez alors appeler ces ressources dans le footer au lieu de les appeler dans le header. Ainsi vous éliminerez l’effet de blocage visuel et vos visiteurs auront l’impression que le contenu leur est affiché rapidement alors que tous les éléments de la page ne sont pas encore totalement chargés.
L’autre gros poids lourd de vos pages sont les images. Vous pouvez les compresser avec des outils ou utiliser des plugins pour votre CMS qui feront ce travail automatiquement. Sur les images qui constituent l’habillage de votre site, vous pouvez mettre en place des « maps » ou utiliser des images vectorielles au format SVG. Même chose pour les polices que vous utilisez (fonts).
- Compressor pour optimiser vos images en ligne
- ezGif pour optimiser les Gifs animés
- Compresser des JPEG à la volée
- Des plugins WordPress pour optimiser vos images
- Et sous Mac, j’aime bien celui-là
- Bien choisir et optimiser ses fonts (polices de caractère)
- Même chose, mais pour les images
- Un plugin WordPress pour retailler vos images
Un plugin ou un code type LazyLoad permet aussi de décaler dans le temps le chargement des images en les faisant apparaitre lorsque l’utilisateur scrolle vos pages. Ainsi, aucune image non visible à l’écran est chargée inutilement.
Si vous utilisez un CMS, supprimez tous les plugins inutiles. Ensuite, avec ce qui vous reste de plugins, faites des mesures de chargement (comme avec le plugin P3 pour WordPress) afin de déterminer les plugins les plus gourmands. Si vraiment certains posent problème, vous devez envisager de les recoder ou de les remplacer par des équivalents moins consommateurs de ressources.
Concernant la base de données, je vous recommande aussi d’en faire une bonne analyse pour voir si vous n’avez pas quelques goulots d’étranglement. Vous pouvez activer le log des requêtes « lentes » (Slow Query) dans les paramètres de MySQL et ensuite optimiser vos tables (en y ajoutant par exemple des clés) afin de les rendre plus rapides.
- 15 astuces pour optimiser MySQL / MariaDB
- Optimiser MySQL
- Optimiser la base SQL de WordPress
- Un script pour tuner MySQL
Évidemment, il existe tellement d’astuces d’optimisations que je n’ai pas pu tout vous passer en revue… Mais vous avez déjà là une bonne base de départ. Dans tout ce que je viens de vous décrire, il y a des choses techniques et des choses un peu plus faciles, mais globalement, si vous voulez être tranquille avec la vitesse d’affichage de vos pages web, vous pouvez aussi opter pour des services payants comme Cloudflare, Cedexis ou encore le Cloud Web Acceleration Service de Radware qui s’intercale entre vos visiteurs et votre serveur et qui permet en toute transparence la mise en place d’un CDN, d’optimiser les ressources de votre site et de gagner ainsi plus de 40% sur les temps de chargement de vos pages.
