Comment rendre plus rapide mon site web ?

Vous avez certainement déjà rencontré un site web qui mettait une dizaine de secondes à charger. Sur le web l’utilisateur n’a pas d’indulgence face à la lenteur. La conséquence principale d’un site qui prend du temps à charger est la perte de trafic ainsi que le ressenti négatif de l’utilisateur qui aura plus de mal à s’engager et à faire confiance au produit, service ou la marque qui lui est présenté.

Dans cet article nous allons voir quelles sont les causes d’un chargement lent et comment on peut faire pour rendre son site plus performant.

Qu’est ce que la performance

Le terme performance cache plusieurs notions lorsque l’on parle de site web. D’un côté il peut désigner le temps de chargement, qui lui-même peut être divisé entre le temps d’affichage et le délai pour que le site soit totalement interactif. Il peut aussi être associé à la fluidité de l’expérience utilisateur, des sites qui ne saccadent pas, les images qui se chargent rapidement etc…

Dans les deux cas le résultat d’un site non optimisé est soit la fuite du visiteur, soit la baisse drastique de sa confiance et donc de son engagement. De plus il n’y a pas que les utilisateurs qui ne supportent pas les mauvaises performances web, les robots des moteurs de recherche sont programmés pour évaluer ces performances via les Web Core Vitals et pour noter votre site internet en fonction des scores obtenus. Votre référencement peut donc se voir gravement rétrogradé si les performances du site ne sont pas optimales.

Chez Ronce bleue les performances de nos sites web font l’objet d’un soin particulier pour permettre à nos client de bénéficier d’un bon score SEO et la meilleure expérience utilisateur possible.

Qu’est-ce qui cause des temps de chargement long ?

Plusieurs facteurs peuvent expliquer qu’un site web mette du temps à charger.

Une des principales causes est la taille des fichiers que le navigateur doit télécharger pour que le site soit affiché. Cela regroupe le code source, les polices et les médias. Si ces fichiers ne sont pas optimisés alors le chargement sera plus long pour un résultat équivalent.

Une deuxième cause peut être le recours à des librairies annexes ou des plugins qui vont devoir se connecter à un serveur distant pour télécharger les fichiers nécessaires. Là encore il faudra charger des fichiers, ce qui prendra un certain temps, mais en plus la connexion au serveur en elle-même peut prendre de cruciales secondes.

On pourra aussi citer une mauvaise configuration du serveur ou tout simplement un serveur qui ne serait pas assez puissant pour retourner les requêtes le plus rapidement possible.

Optimiser ses temps de chargement

Les deux grands facteurs du temps de chargement sont la taille des fichiers que le navigateur va devoir télécharger et la puissance du serveur qui va devoir préparer ces fichiers avant de les envoyer à l’utilisateur.

Limiter les dépendances

Afin de réduire la taille de ses packages une technique efficace est de limiter les librairies tierces que l’on utilise. Il va falloir alors séparer les librairies qui sont des dépendances nécessaires au bon fonctionnement du site des librairies facultatives qui n’ont été sélectionnées que par facilité. Ces librairies sont souvent optimisées, mais comme elle doivent prendre en charge tous les cas utilisateur, une bonne partie de leurs bases de code ne va jamais être utilisée dans notre projet. Il faut alors se poser la question de la pertinence de chaque librairie et remplacer les plus inefficaces nous-même pour ne prendre en charge que ce qui est nécessaire. On notera par exemple les librairies de carrousel, les composants css, les frameworks javascript dépassés (JQuery).

Code-Splitting

La première technique pour optimiser le poids des fichiers téléchargés est de ne télécharger que ce qui est nécessaire pour la page qui va être rendue par le navigateur. Cela peut paraître évident mais ce n’est pas toujours le cas, il est fréquent de générer un package complet de notre code javascript et de le charger sur toutes les pages, même qu’une petite partie va être utile sur la page courante. On va pouvoir par exemple diviser notre base de code javascript en composants et n’appeler que ceux qui vont être utilisés par la page actuelle.

Lazy-loading

On peut aller plus loin et charger une ressource uniquement au moment où elle va être présente sur la page ou requise à l’affichage. C’est ce que l’on appelle le lazy-loading qui est particulièrement utile pour les images qui représentent une part importante de données à télécharger. Nous chargerons donc chaque image au moment où elle apparaîtra à l’écran, en réalité on les charge plutôt 100 à 200 pixels avant afin qu’elles ne soient pas encore visibles le temps du chargement. Cette technique peut aussi être utile pour différer le chargement de scripts tiers, par exemple le reCaptcha de Google et donc éviter que son exécution ne retarde l’affichage initial de la page, et que cela impacte nos Web Core Vitals.

Minification

Une fois que l’on a chargé uniquement ce qui est nécessaire il faut s’intéresser aux fichiers en eux-mêmes. On va essayer de repérer les fonctions coûteuses et de les optimiser une par une, par exemple, utiliser du code asynchrone pour mettre en série plusieurs appels à des API (application programming interface). Nous nous efforcerons également de réduire le nombre de caractères pour les noms de nos fonctions, de nos variables et de notre structure de code sans toutefois rendre notre code trop illisible. Il est important de ne pas tomber dans la suroptimisation qui va être néfaste au projet car le code sera plus dur à comprendre et donc à maintenir. Ici tout est question d’équilibre. On va ensuite compresser nos fichiers, on se sert de scripts pour retirer tous les caractères inutiles de nos fichiers de production. Ces scripts retirent entre autres les commentaires, les espaces inutiles, les retours à la ligne. Ce qui donne un fichier sur une ligne, illisible, mais ce n’est pas grave cette fois car il ne s’agit que d’un rendu de notre base de code et non pas notre code en lui-même.

On va aussi chercher à optimiser nos médias en les convertissant en formats adaptés au web. Pour les images il s’agit du format WebP ou Avif et pour les vidéos du format Webm. Les illustrations vectorielles quant à elles seront chargées en SVG.

Détournement d’attention

Si toutefois le temps de chargement ne pouvait pas être plus réduit, ou plutôt qu’il est trop coûteux en temps ou en argent de le réduire, à cause des fonctionnalités intrinsèques du site, on peut mettre en place un pré-loader, une page simple ayant un contenu charté et animé. Ce loader va agir comme une diversion et rendre compte à l’utilisateur que le site bien qu’inaccessible n’est pas pour autant inactif. C’est aussi l’occasion d’être créatif et de commencer l’expérience utilisateur dès ce loader. On pourra aussi décliner cette technique par exemple en proposant un pré-loader pour les images volumineuses qui pourraient mettre quelques secondes à se charger.

Pré-chargement

Afin d’optimiser encore les temps de chargement nous utilisons le pré-chargement de page. Il s’agit de charger en arrière plan la page suivante pendant que le visiteur est encore sur la page actuelle. Nous ne chargeons pas toutes les pages de la sorte ce qui serait une suroptimisation et pourrait au contraire ralentir ou saccader la navigation. Il s’agit donc de choisir les liens sur la page que nous souhaitons précharger, par exemple les liens vers les pages les plus importantes comme un formulaire de contact, ou bien une page produit.

Optimiser la navigation

Si les temps de chargement sont des valeurs objectives de performance, le ressentit de l’utilisateur lorsqu’il navigue sur votre site est tout aussi important car votre image de marque est liée à votre site internet et donc la confiance qu’il peut mettre en vous dépend de la confiance qu’il porte envers le site.

Optimisation des médias

Un des plus gros impacts que l’on peut avoir sur l’expérience utilisateur est l’optimisation des médias et en particulier les images. En effet le poids d’une image, si elle n’est pas optimisée, peut être supérieur au poids de tout le site. On veillera alors à optimiser la résolution des images en fonction de la taille à laquelle elles vont apparaître à l’écran, inutile de charger une image full-hd si elle n’est visible qu’en 400 x 300 px. On va aussi générer plusieurs versions de la même image en résolutions inférieures pour s’adapter aux mises en page sur des écrans plus petits. En effet sur smartphone en général la taille des images est inférieure à la version desktop, il est alors inutile de charger la même image.

Animations fluides

Chez Ronce bleue on pense que les animations sont un vecteur de sens et d’attention de l’utilisateur. Cependant une animation qui saccade va produire un effet désastreux sur le ressenti utilisateur, nous nous efforcerons donc d’optimiser celles-ci pour qu’elles soient toujours fluides. On peut déjà se limiter à l’animation des propriétés transform et opacity qui ne provoquent pas re-paint du navigateur et donc impactent moins les performances du site.

Plus techniquement on va aussi chercher à utiliser au maximum l’API Request Animation Frame (RAF) du navigateur pour gérer les animations, cependant on veillera à n’exécuter qu’une seule RAF ayant toutes nos requêtes à l’intérieur.

Des outils existent dans le devTool du navigateur pour traquer le nombre d’images par seconde (fps) du site, si cette valeur descend en dessous de 30 il faudra être très vigilant et si elle est en dessous de 24 les animations paraîtrons saccadées. Il faut aussi garder en mémoire que cette valeur dépend fortement du matériel de l’utilisateur qui n’a pas forcément un setup aussi poussé que les professionnels du web.

Transition de pages

Tout comme le pré-loader, la transition de page va opérer une sorte de diversion de l’attention de l’utilisateur afin qu’il ne soit pas focalisé sur le temps que met la page suivante à charger mais plutôt sur ce qui se passe à l’écran.

Conclusion

Les performances d’un site reposent sur de nombreux facteurs, à la fois objectifs et subjectifs qui ne doivent pas être négligés pour que votre site atteigne ses objectifs en termes de référencement mais aussi, et c’est le plus important, pour que les visiteurs soient satisfaits et volontaires pour entrer en interaction avec le site.

Si votre site web vous semble peu performant c’est peut-être l’heure de penser à une refonte de celui-ci pour remplir vos objectifs que ce soit de la vente, faire parler de vous ou renouveler vos services. Contactez-nous pour nous parler de votre projet.