Notre guide détaillé pour améliorer la vitesse de chargement des pages. Tactiques éprouvées

À quelle fréquence quittez-vous une page avant qu'elle ne se charge ? Selon Google, jusqu'à 53 % des utilisateurs mobiles décident de quitter un site s'il met plus de trois secondes à se charger. Qu'est-ce qui cause la lenteur de chargement d'une page, et comment y remédier ? Dans notre article, nous aborderons ces sujets en détail.

Qu'est-ce que la vitesse de chargement d'une page, et qu'est-ce qui l'affecte ?

La vitesse de chargement d'une page web est le temps entre le clic sur un lien donné et le moment où la page donnée se charge (ou commence à répondre à notre interaction). Cette question est très importante en termes de UX (Expérience Utilisateur) – après tout, personne ne souhaite attendre qu'un site lent se charge.

Il est également important de noter qu'aujourd'hui, la vitesse de chargement des pages sur les appareils mobiles est aussi importante, voire parfois plus, que sur les ordinateurs de bureau et les portables. Il est judicieux de commencer à réfléchir à cet aspect dès le processus de conception de l'application. Lors du stylage de notre site web, l'approche mobile-first (créer d'abord des versions mobiles des applications) réduira généralement la taille des fichiers d'une dizaine de pour cent, ce qui à long terme peut faire une différence notable.

Nombre et taille des fichiers supplémentaires

La grande majorité des sites web que vous pouvez voir sur Internet utilisent souvent diverses images ou scripts pour, par exemple, refléter ce qu'ils souhaitent présenter, améliorer l'expérience utilisateur ou les inciter à entreprendre une action.

Les jours des pages web avec de longs murs de texte sont révolus, mais ce changement a entraîné une quantité de données beaucoup plus importante que le navigateur doit gérer. Nous pouvons vérifier à tout moment ce que notre navigateur télécharge exactement après être entré sur n'importe quelle page. Pour cela, il suffit d'ouvrir l'onglet Réseau dans les outils de développement (nous recommandons d'utiliser le raccourci clavier Ctrl+Shift+I pour cela). La page doit alors être actualisée, et la liste complète des fichiers téléchargés peut être consultée.

Un exemple du site https://youtube.com.

Polices de caractères

Bien qu'elles paraissent discrètes car ce ne sont que le style et la typographie des lettres, les polices de caractères peuvent contribuer au temps total de chargement du site web. Ce problème concerne principalement les concepteurs, bien que certaines responsabilités reposent également sur les épaules des développeurs car nous devons répondre à quelques questions ici :

• Notre site web a-t-il besoin de tant de polices différentes ?
• Les polices que nous avons téléchargées sur le serveur contiennent-elles uniquement les styles que nous utilisons ?
• Utilisons-nous la substitution de polices pour limiter le Cumulative Layout Shift (CLS) ?
• Envoyons-nous les polices dans le format le plus optimal ?

Éléments invisibles

Il se passe plus de choses sur un site web que ce que nous pouvons voir à un moment donné. Certains sites peuvent être richement couverts d'éléments divers qui, bien qu'actuellement invisibles, peuvent constituer une charge supplémentaire pour notre navigateur.

Supposons que nous voulions visiter une page vraiment longue. Plus le site est long, plus il contient de choses, ce qui signifie plus de données à télécharger. Le navigateur téléchargera la page entière et tout ce qui a été préparé pour être disponible "pour commencer", même si ce que nous voyons n'est qu'une fraction du tout.

Code sous-optimal

Si vous avez déjà rencontré une situation où il semblait que la page était déjà chargée, mais que vous ne pouviez pas interagir avec elle, par exemple en cliquant ou en faisant défiler, le coupable pourrait être un code inefficace.

Le plus souvent, l'effet que nous voulons obtenir sur le site peut être écrit de mille façons différentes. Cependant, toutes ne feront pas que le code s'exécute avec le résultat que nous espérons.

Le script qui suit le défilement de la page par l'utilisateur n'a généralement pas besoin de s'exécuter à chaque fois, mais seulement lorsque le visiteur a cessé de faire défiler la page. Cependant, envoyer une douzaine ou plusieurs dizaines de requêtes à l'API par seconde n'est définitivement pas une bonne solution.

Comment faire un test de vitesse d'un site web ?

Pour vérifier la vitesse de chargement d'une page, ainsi que sa performance globale, vous pouvez utiliser un outil intégré aux navigateurs de la famille Chromium (par exemple, Chrome, Brave). Pour cela, nous lançons à nouveau les outils de développement, plus précisément, l'onglet Lighthouse. Avec cet outil, nous pouvons auditer la page sur laquelle nous nous trouvons. Bien sûr, nous pouvons également le faire avec d'autres navigateurs en utilisant les outils PageSpeed Insights.

Un exemple d'audit de page effectué avec PageSpeed Insights.

Après l'inspection effectuée, nous recevrons un ensemble de données sur divers problèmes liés au chargement de la page et plus encore. L'outil fournit diverses statistiques et graphiques. Le grand avantage de l'utilisation de cette application est le fait que, en plus des problèmes trouvés, nous obtenons également une explication de pourquoi une chose donnée est défavorable et comment la corriger.

Il serait judicieux de faire un tel test pour les versions mobile et de bureau car les résultats peuvent différer de manière significative. Cela est dû au fait que différentes versions de scripts ou de styles peuvent être envoyées à différents appareils. Pour les appareils mobiles, d'autres aspects sont pris en compte plus ou moins, selon les normes adoptées.

Il est également important de noter qu'en améliorant les facteurs de la section Core Web Vitals , nous améliorerons à la fois l'expérience utilisateur sur le site et les aspects liés au SEO. Google (ou d'autres moteurs de recherche) sera plus susceptible d'afficher un tel site sur les premières pages des résultats de recherche.

Une aide supplémentaire dans la lutte pour optimiser l'opération de notre site web est l'onglet Performance dans les outils de développement. En l'utilisant, nous pouvons enregistrer le fonctionnement de la page puis analyser pourquoi cette page a pris un certain temps à se charger et ce qui l'a causé. On nous fournira la hiérarchie exacte des requêtes de code, accompagnée de captures d'écran de la page lors de son enregistrement. Nous y vérifierons également les animations affichées sur la page, les fuites de mémoire potentielles, ou, par exemple, l'utilisation de la charge de la carte graphique.

Comment améliorer la vitesse de chargement d'une page ?

Nous savons déjà ce qui affecte le chargement de la page et comment le vérifier. Maintenant, la question la plus importante est comment mettre en œuvre ces nouvelles connaissances et améliorer les performances de notre site web. Qui est responsable de la vitesse de chargement cependant ? Développeurs, spécialistes du marketing de contenu, ou peut-être la personne s'occupant du serveur d'hébergement et des implémentations ? Il s'avère que tout le monde peut contribuer à un chargement plus rapide d'un site web donné.

Optimisation des images

Les graphiques non optimisés peuvent considérablement alourdir notre navigateur avec leur poids. Une attention particulière doit être accordée aux endroits où les utilisateurs peuvent télécharger leurs propres images. Le plus souvent, les images que nous ajoutons à une page web ne sont pas plus grandes qu'environ 500x500px (sans compter celles utilisées pour créer des designs originaux), donc vous devez vous assurer que la taille réelle d'un élément graphique ne dépasse pas la taille affichée dans le navigateur.

En utilisant Drupal, le module Responsive Image sera parfait pour cela, car il nous permet de préparer une image correctement mise à l'échelle, en fonction de la largeur de l'écran de notre appareil, en combinaison avec un puissant mécanisme de navigateur – une balise image. Dans celui-ci, nous pouvons librement définir la taille de l'image à télécharger à partir du serveur vers le navigateur de l'utilisateur, en fonction de plusieurs facteurs :

• largeur d'affichage,
• densité de pixels (les appareils Apple et les téléphones plus récents offrent une densité plus élevée que les moniteurs ordinaires),
• prise en charge de divers formats de fichiers image.

De plus, nous pouvons également "alléger" nos photos en utilisant la compression. Divers outils ont été développés à cet effet, comme Image Compressor. Une telle compression permettra de réduire la taille de plusieurs dizaines de kilooctets, et parfois même plus.

L'aspect clé lors de l'optimisation des éléments graphiques est également leur format de fichier. Bien que .jpg et .png nous aient bien servis pendant des années, dans le cas des navigateurs, il vaut la peine de considérer l'utilisation de solutions plus récentes et plus optimales. Les images au format .webp ou .avif peuvent occuper jusqu'à 10x moins d'espace que leurs homologues plus anciens. Cependant, ils doivent être correctement implémentés. Une implémentation incorrecte de cette solution, en plus des coûts supplémentaires, peut se traduire par l'effet inverse de celui escompté.

Optimisation des ressources

D'autres fichiers qui sont généralement envoyés avec une page web sont ceux définissant le style et le comportement du site (fichiers CSS et JS, respectivement). Comme pour les éléments graphiques, nous pouvons faire quelques optimisations ici.

Tout d'abord, ces fichiers doivent être minimisés, c'est-à-dire mis sous le processus de suppression des caractères inutiles (tels que les espaces, les sauts de ligne ou les commentaires des développeurs). Ceux-ci n'interfèrent pas avec le fonctionnement de ces fichiers mais augmentent leur taille.

Ensuite, en utilisant des bundlers ou d'autres outils, nous pouvons combiner une douzaine ou plusieurs dizaines de petits fichiers en un seul plus grand. Cette procédure réduira le nombre de requêtes envoyées au serveur, ce qui affectera également positivement la vitesse de chargement de la page.

Source : Webpack

CDN

Content Delivery Network est une solution qui nous permet de placer nos fichiers sur différents serveurs dans différentes parties du monde afin que chaque personne de n'importe où dans le monde ait accès à ces fichiers via la connexion la plus rapide actuellement disponible pour elle.

Actuellement, l'utilisation d'un CDN n'est pas aussi efficace qu'elle ne l'était il y a quelques années parce que les fichiers téléchargés à partir de celui-ci pouvaient être mis en cache dans la mémoire du navigateur, même s'ils étaient téléchargés à partir d'autres sites web. Cependant, cette méthode a été abandonnée en raison de préoccupations concernant la sécurité et la confidentialité des utilisateurs.

Malgré cela, l'utilisation de cette solution nous aidera à délivrer nos fichiers plus rapidement, surtout lorsque nous avons des utilisateurs partout dans le monde.

Lazy load

Le lazy loading des images, déjà pris en charge nativement dans les derniers navigateurs, économise également plusieurs dizaines de millisecondes lors du chargement d'une page. C'est un processus qui permet de charger uniquement les ressources nécessaires à l'utilisateur à un moment donné. Chaque fichier supplémentaire est chargé à la demande lorsque le navigateur juge qu'il est déjà nécessaire.

Un exemple simple de l'utilité de ce mécanisme peut être quelques images en bas de page d'un site. Lors du chargement d'une page, nous n'avons pas besoin de les télécharger tout de suite car lorsque la page est prête, nous ne verrons que sa partie supérieure. Ce n'est que lorsque nous la défilons vers le bas que le navigateur commencera à calculer si le contenu en bas de page doit déjà être téléchargé.

Nous avons décrit le fonctionnement de ce mécanisme plus en détail à l'exemple du module Lazy-load sous Drupal.

Prefetching

Le prefetching est un mécanisme qui nous permet de commencer à charger une page avant même de cliquer dessus. Cette méthode fonctionne de deux manières :

• commencer le chargement de la page en survolant le lien,
• quand la page se charge, le script scanne l'ensemble du site web pour tous les liens disponibles et charge ensuite les pages de ces liens.

Dans les deux cas, nous ne subirons aucune conséquence négative du téléchargement de données supplémentaires (provenant d'autres pages) car ces données seront téléchargées en arrière-plan lorsque la charge du navigateur n'est pas trop grande.

Par conséquent, nous avons une autre méthode qui peut nous faire gagner des dizaines de millisecondes. Cependant, cette technique ne fonctionnera généralement que dans le cas de l'interlinking interne sur notre site web, où nous avons tous les liens vers nos autres pages.

Comment augmenter la vitesse de chargement d'une page ? Résumé

Se concentrer sur l'optimisation de la vitesse de chargement du site web apportera un certain nombre d'avantages. Les clients potentiels ne seront pas irrités par des temps de chargement longs, nous améliorerons l'UX, et en améliorant le SEO, nous pourrons attirer de nouveaux visiteurs.

En utilisant les outils disponibles, même une personne non technique peut facilement auditer n'importe quelle page et sur la base de ses résultats, prendre des mesures pour accélérer le temps de chargement de son site web.

Lors de l'optimisation, nous recommandons vivement de commencer par les méthodes mentionnées ci-dessus, ainsi que d'utiliser les conseils que Lighthouse fournira. Notre équipe de développement web sera également ravie de vous soutenir et d'aider à résoudre même les problèmes de chargement de pages les plus compliqués.