Objectif chargement instantané : la vitesse des pages comme boussole

Véritable chasse aux trésors pour certains, la quête d’un chargement rapide pour les pages de son site peut accroître significativement ses conversions et aider à améliorer sa visibilité dans les résultats de recherche. Petit tour des actions à prendre pour charger le tout en un éclair :

Éliminer le superflu

Les sites qui chargent extrêmement vite ont en général pour point commun de n’offrir au visiteur que le strict nécessaire et, lorsque c’est bien fait, avec style.

Cela signifie que tout ce qui n’est pas absolument nécessaire devrait être retiré, et ce qui reste doit être optimisé au maximum en termes de poids et de taille, ce qui implique :

• Icônes et imagerie
• Scripts
• Fichiers CSS
• Polices
• Librairies

Un bon point de départ est l’utilisation de webpagetest.org, qui décortiquera toutes les ressources et leur ordre de chargement.

Par exemple, si votre image de Une sur votre site WordPress charge avec Slider Revolution, il est préférable de retirer ce module riche en JS lourd pour le remplacer par une simple image compressée en format .webp qui va être 100 fois plus légère. Cela impactera peut-être une chose ou deux, comme des animations qui ne pourront plus être présentes. Cependant, ces fonctionnalités sont souvent surévaluées par rapport à leur réel impact sur l’expérience utilisateur.

Utiliser Chrome et les balises

Une fois les charges inutiles éliminées, il est temps d’utiliser les différentes balises utilisées par notre navigateur préféré pour équilibrer le chargement des ressources restantes.

Que ce soit le préchargement des fichiers situés au-dessus de la ligne de flottaison, la connexion précoce aux hôtes externes ou, plus commun, le chargement différé d’images et de vidéos YouTube, ces balises ne prennent souvent que très peu de temps à être ajoutées pour des résultats immédiats.

Voici quelques balises/attributs à utiliser :

• rel="preload"
• rel="preconnect"
• <script type="speculationrules">
• rel="prefetch“
• loading="lazy"
• loading="eager"

La clé est de tester chaque ajout séparément pour déterminer son impact, car ils ne vont pas toujours offrir un résultat positif.

Une fois fait, re-testez les balises ensemble et vérifiez qu’elles ne rentrent pas en conflit pour une raison X ou Y (et dans ce cas, retirez celle qui offre le moins d’avantages).

Établir un budget de performances

Vous l’avez fait ! Votre vitesse de chargement est désormais bonne sur mobile et bureau. Mais c’est paradoxalement là que le défi est le plus grand : c’est-à-dire conserver la vitesse de chargement optimisée.

De nombreuses équipes peuvent venir ajouter divers éléments sans avoir la moindre idée de l’impact sur les performances, et c’est votre boulot de prévenir ces dérives. Comment ? Avec un budget de performances.

Un budget de performances est un document définissant une limite de vitesse de chargement à respecter en toutes circonstances. Celui-ci devra être accepté par les autres équipes et un processus leur permettant de tester avant chaque mise en production sera établi (par exemple avec Google PageSpeed Insights ou autre outil simple à utiliser et à comprendre).

Ce n’est pas un système parfait mais il a au moins le mérite de mettre cette préoccupation dans les têtes de tout le monde. Le meilleur moyen d’obtenir l’approbation des autres équipes est en général de montrer l’impact sur les conversions avec plusieurs graphiques au cours d’une présentation.

Si vous suivez ce processus simple, la vitesse de chargement ne deviendra presque plus qu’une formalité au fil des ans.