100 sur PageSpeed Insights … ou presque ! PageSpeed Insigths, proposé par Google, est un outil qui analyse la vitesse d’affichage de votre site. Or, de nos jours, avec l’avènement du mobile, cette vitesse n’est plus un atout mais bien une nécessité.
Chez GTI, anciennement MultipleMedia,
nous avons obtenu un score de 99. Comment? Nous avons identifié deux leviers d’action principaux :
- le temps de réponse de votre serveur
- la taille du contenu à télécharger.
»»» Voici ce qu’il faut faire !
Le temps de réponse du serveur.
Ceci représente une partie importante du temps de chargement d’une page web. Il s’agit du délai entre la requête faite par l’utilisateur et le moment où le téléchargement commence.
Contrairement au reste de la page, l’attente de la réponse du serveur ne s’effectue pas avec le cercle de chargement du site. Cela donne donc l’impression « qu’il ne se passe rien », ce qu’il faut éviter à tout prix.
« Nous avons opté pour
WP Super Cache. »
Plusieurs variables peuvent influencer l’équation, mais les solutions requièrent souvent de la modification de code. Étant donné que nous utilisons Wordpress, il nous semblait inapproprié de modifier ce dernier. Pour remédier à ce problème, l’utilisation d’un plugin de cache fut nécessaire. Celui-ci garde en mémoire les pages qui ont été chargées, évitant ainsi la réécriture de la page à chaque fois. Avec
plus de 2 millions de téléchargements, nous avons opté pour
WP Super Cache. Ses fonctionnalités sont efficaces, précises et sa bonne réputation nous assure un support fiable.
Toutefois, il reste un inconvénient de taille lorsque l’on utilise un plugin comme celui-là : les caches expirent après un certain temps. Si personne n’a visité une page depuis un moment, il est possible qu’il n’y ait pas de cache en mémoire. Le prochain utilisateur aura donc une réponse du serveur plus lente.
Autre point : pensez à régénérer le cache lorsque vous effectuez des modifications afin de les voir s’afficher, sinon il faudra attendre son expiration. Il est toutefois possible de configurer le plugin pour qu’il le régénère automatiquement.
Ici, les avantages surpassent largement les inconvénients.
L’impact de l’utilisation d’un plugin de cache sur la vitesse du site
est considérable et le résultat n’en est que plus marquant pour l’utilisateur.
L’Optimisation des images.
Les images d’un site correspondent à une vaste partie du chargement d’une page web. Du thème au carrousel, on les retrouve partout. Point d’orgue de l'esthétique, elles se doivent d’être de bonne qualité. Or,
qui dit qualité dit fichier plus lourd, c’est-à-dire plus de données à télécharger. Il faut donc s’assurer de garder une qualité convenable, tout en réduisant le plus possible leur taille.
« … grâce au plugin
EWWW Image optimizer »
Nous avons décidé de créer des images
en format WebP grâce au plugin
EWWW Image Optimizer. Le choix de ce format est relativement simple puisqu’il s’agit d’un format d’image développé par Google, plus optimisé que le JPEG. Les images sont compressées au maximum, sans perte de qualité visible. Nous avons tout simplement créé des copies de nos images, en format WebP. Si le moteur de recherche ne supporte pas ce dernier, il choisira le JPG/PNG équivalent.
Le problème avec WebP est qu’il n’est supporté que par Chrome et Opéra. Autre inconvénient : deux exemplaires de chaque images (une originale et une WebP) sur notre serveur doublent l’espace de stockage requis.
Les gains offerts par l’optimisation des images vont de 5% à plus de
50% de diminution du volume de données à télécharger.
Optimisation du code source
Les dernières modifications ont eu un impact faible pour l’utilisateur, mais significatif pour l’outil de Google. Nous avons utilisé une approche hybride afin d’optimiser les codes sources du site web. Une partie fut automatisée grâce à l’utilisation du plugin
Autoptimize, tandis que nos fichiers JavaScript et CSS ont été manuellement compressées.
« L’utilisation d’
Autoptimize… »
Une autre optimisation était l’ordre de téléchargement des sources selon une priorité plus appropriée. Nous ne voulions pas laisser le chargement de notre page en suspens pour télécharger des fichiers JavaScript utilisés uniquement après le chargement initial de la page.
Aller plus loin
Une fonctionnalité qui nous a permis d’économiser beaucoup de temps et qui a drastiquement augmenté notre note sur
gtmetrix.com est le
KeepAlive. C’est une fonctionnalité qui garde ouverte la connexion afin de télécharger tout le contenu plutôt que d'ouvrir et fermer les connexions pour chaque requête. Cependant, cette fonctionnalité, comme toutes celles citées dans cet article, peut amener certains désagréments.
Tout d’abord, elle ne s’active pas sur le site, mais sur le serveur. Il n’est pas possible de l’activer uniquement sur le site souhaité si la machine qui l’héberge le fait également pour d’autres sites pour lesquels on ne veut pas cette fonctionnalité. D’ailleurs, cela peut devenir plus demandant en termes de performances si beaucoup d’utilisateurs visitent le site. Notre conseil : prenez le temps d’analyser la charge des connexions avant de prendre une décision.
Toutefois, les avantages surpassent de loin les inconvénients. Cette fonctionnalité nous a permis de sauver en moyenne
1,3 seconde.
En résumé nous avons atteint des résultats quasi parfaits. Sur Google PageSpeed, nous obtenons un score de
99 sur mobile et
95 sur desktop et nous obtenons un
A et un
B sur gtmetrix.com.
Si vous aussi vous voulez améliorer les performances de votre site, contactez notre
agence web.
