Performance et vitesse Web : les meilleures techniques
Publié: 2021-08-30Vitesse de chargement et performance web sont sur toutes les lèvres dans les communautés SEO et webperf, et plus largement dans l'E-marketing et l'E-commerce.
Comme le rappelle Andy Davies, consultant et référence en performance web :
« Le contexte influence l'expérience,
l'expérience influence le comportement,
le comportement influence les revenus des entreprises.
Ainsi, que vous essayiez d'augmenter vos revenus, votre référencement ou les deux, vous devez savoir que des pages rapides sont essentielles à la qualité de votre expérience utilisateur. La vitesse permet également d'envoyer les bons signaux à Google, qui tient compte de la vitesse depuis la mise à jour de Page Experience.
Vous le savez également, un site doit répondre aux attentes des internautes avant de répondre à celles des moteurs de recherche. Ainsi, vitesse d'affichage et interactivité font partie des pré-requis pour une expérience utilisateur de qualité, avant tout pour favoriser l'engagement et les conversions ! A noter par exemple que, selon une étude de Google, 77% des internautes sont plus enclins à commander sur un site ou une application qui leur permet de finaliser rapidement leur achat.
Mais quelles techniques ont l'impact le plus visible sur vos visiteurs, afin de leur offrir une expérience de navigation fluide et une réelle sensation de rapidité ?
Voici une check-list organisée par leviers d'optimisation, pour une meilleure rapidité d'affichage et une meilleure interactivité.
Optimiser la vitesse d'affichage d'un site
Plus une page est claire, moins elle met de temps à s'afficher.
En plus de l'optimisation des ressources, vous pouvez définir le taux d'affichage et les dimensions des différents éléments qui composent une page pour améliorer la sensation de rapidité et de convivialité. Voici quelques techniques essentielles :
- Compresser les images aux formats les plus efficaces
Les formats nouvelle génération WebP (recommandé par Google) et AVIF (qui offre des résultats encore meilleurs) permettent de réduire jusqu'à 50% le poids des images par rapport au JPEG, tout en conservant une qualité visuelle optimale. Sachant que le poids des images représente environ 50% du poids des pages, c'est un levier indispensable pour rendre vos pages rapides. - Adapter l'affichage des médias et des images aux différents écrans
Redimensionnez et définissez la taille des médias et des images selon que l'internaute visite votre site depuis un mobile ou un ordinateur. - Réduire le poids des ressources de la page
Optimisez votre code : la minification (suppression des caractères inutiles) des fichiers HTML, JS et CSS, et la compression des ressources (formats Gzip et Brotli), et dans certains cas la concaténation, sont autant de bonnes pratiques pour réduire le poids des pages, et donc accélérer l'affichage dans le navigateur. - Chargement paresseux
Cette technique consiste à ne charger que ce qui est visible à l'écran, au lieu de charger toute la page. En d'autres termes, le navigateur ne fournit que l'effort strictement nécessaire par rapport à ce que le visiteur a besoin de voir sur son écran. - Optimiser les polices
Vous pouvez optimiser le format de vos polices (ex. WOFF2, qui fait gagner 30 à 50% sur la taille du fichier), et aussi choisir d'afficher du texte même si la police n'est pas encore chargée par le navigateur, pour accélérer le rendu. - Éliminer les ressources bloquantes et les charger de manière asynchrone
Evitez de bloquer le rendu de vos pages : préférez charger les ressources de manière asynchrone, notamment pour les CSS (CSS critique), JS (async et defer) et les polices (display:swap).
Bien sûr, si vous n'avez pas le choix car certaines ressources sont indispensables au début du chargement de la page, ces ressources doivent être les plus légères possibles. - Adoptez la bonne stratégie de mise en cache
Afin que les pages s'affichent le plus rapidement possible pour vos utilisateurs, mettez en cache les éléments statiques.
Pour cela, il faut au préalable identifier les contenus dynamiques et les contenus statiques, et définir les règles de mise en cache des contenus statiques : pendant combien de temps, et sur quel cache (navigateur, origine ou CDN).
[Étude de cas] Gérer le bot crawling de Google
Lire l'étude de casAméliorez l'interactivité : des pages réactives instantanément
Outre la rapidité d'affichage des éléments dans le navigateur, la capacité d'interaction est essentielle pour apporter une totale satisfaction à vos utilisateurs.
Sinon, vous les exposez à une frustration qui se traduit par des comportements tels que des clics de rage, la souris se déplaçant frénétiquement sur la page ou un défilement aléatoire pour vérifier que la page fonctionne.
Dans le pire des cas, vos visiteurs reviennent sur la page précédente, ou quittent définitivement votre site pour faire une nouvelle recherche sur Google, ou se dirigent vers vos concurrents.
Rappelons qu'en cas d'expérience négative, 43% des internautes iront sur le site d'un concurrent pour leur prochain achat. Vous devez donc vous donner les moyens d'attirer mais aussi de fidéliser vos visiteurs.
Le plus souvent, ce sont les scripts tiers et Javascript qui peuvent être responsables d'une mauvaise interactivité. En effet, tant que le navigateur est occupé à récupérer, analyser et exécuter du JavaScript, il ne peut pas répondre aux interactions de l'utilisateur.
Là encore, il existe des techniques pour optimiser votre code et vos Tiers, et permettre à vos visiteurs de profiter d'une expérience optimale :
- Réduire l'impact des Tiers en retardant leur chargement
Vous pouvez commencer à charger et à exécuter des scripts une fois que les éléments de contenu prioritaires sont affichés sur votre page. Mais attention : gardez à l'esprit que différer le chargement de JavaScript ne le rend pas gratuit en termes de performances !
Il peut s'agir de différer le chargement de certaines fonctionnalités (chat, widgets, tracking…) après l'affichage des principaux éléments pour rassurer l'utilisateur, mais cela n'annule pas le temps nécessaire au navigateur pour traiter le code, il ne fait que le décaler dans le temps. - Réduire le temps d'exécution de JavaScript
Répartissez les tâches qui prennent du temps à votre navigateur (Tâches Longues), et veillez également à privilégier les traitements courts en réponse aux interactions de l'utilisateur (par exemple, évitez d'écouter activement certains événements comme le défilement ; et profitez des moments où le navigateur a temps libre pour exécuter certains traitements JavaScript). - Réduire le travail du fil principal
Le navigateur pourra répondre plus rapidement aux interactions en réduisant le nombre de requêtes et la taille des échanges.
Gagnez aussi du temps : automatisez les techniques d'optimisation de votre site
Nous venons d'aborder deux aspects très importants de l'expérience utilisateur : la vitesse d'affichage et l'interactivité. La bonne nouvelle, c'est que toutes les optimisations que nous venons d'évoquer dans cette checklist peuvent être automatisées !
En outre, vous avez peut-être lié à deux des Core Web VItals de Google qui vous permettent d'évaluer ces aspects, respectivement : la plus grande peinture de contenu et le premier délai d'entrée.
Bien sûr, vous devez également penser à améliorer la stabilité visuelle de vos pages pour une expérience utilisateur optimale, en travaillant sur votre score Cumulative Layout Shift.
Il faut savoir que ces 3 métriques (LCP, CLS et Total Blocking Time, ou TBT, un équivalent du FID) représentent 70% du score attribué par PageSpeed Insights.
Donc, logiquement, tout ce que vous ferez pour accélérer vos pages et optimiser ces métriques aura un impact positif sur vos utilisateurs, ainsi que sur vos scores de performance.
En bref, vous pouvez appliquer la même approche à votre UX qu'en SEO : un contenu et une expérience de qualité garantissent la satisfaction des utilisateurs, et contribuent à être mieux indexés par Google.
Aussi, comme en SEO, les optimisations webperf doivent être maintenues dans le temps.
Cela demande du temps et de l'expertise car les techniques et les métriques évoluent rapidement. De plus, même dans les grandes équipes, les ressources techniques n'ont pas toujours le temps ni les connaissances pour maintenir efficacement la vitesse d'un site ; et déployer des ressources et de l'énergie pour une opération commando qui tombe comme un souffle est très frustrant et même décourageant.
Alors, plutôt que de perdre du temps en maintenance, redouter les effets de bord à chaque évolution du site, et multiplier les plugins au risque de le surcharger, mieux vaut automatiser l'application de toutes les techniques d'optimisation frontend avec un seul outil !
Il faut savoir que dans la plupart des cas, pour les sites e-commerce à fort trafic, le ROI d'une solution d'optimisation webperf est facile à mesurer.
En effet, Google a estimé que -0,1 seconde de temps de chargement peut entraîner +8% de conversions, ce qu'une solution d'optimisation frontend peut réaliser très facilement.
Chez Fasterize, nous avons constaté que souvent, même une augmentation des taux de conversion inférieure à 1 point suffit à assurer le ROI de notre solution SaaS ; sans compter le temps gagné par les équipes techniques.
Les affaires étant le nerf de la guerre, vous pouvez faire le calcul par vous-même, et c'est facile à faire ! Il vous permet de comprendre l'intérêt d'automatiser l'optimisation des performances, et de convaincre et impliquer vos équipes internes.
Gagnez du temps sur tous les fronts !