Comment optimiser les performances Web et le résultat net

La patience n'est pas une vertu pour les visiteurs du site Web et les acheteurs en ligne. Chaque fraction de seconde compte lorsqu'il s'agit de garder – ou de perdre – un visiteur sur votre site web.

Selon Kissmetrics, le temps de chargement est un facteur majeur contribuant à l'abandon de page. Étant donné que le visiteur Web moyen n'a aucune patience pour une page qui prend trop de temps à charger, l'abandon augmente en pourcentage à chaque seconde de temps de chargement. Près de 40% des utilisateurs abandonneront une page après 10 secondes, note le blog. Les utilisateurs d'Internet mobile sont probablement les plus frustrés par ce problème : 73 % ont indiqué qu'ils avaient rencontré un site Web beaucoup trop lent à charger.

Le problème de chargement des pages a un impact direct sur le comportement d'achat des visiteurs du site Web. Le Kissmetrics a également noté que 79% des acheteurs qui n'étaient pas satisfaits des performances du site Web sont moins susceptibles d'acheter à nouveau sur le même site. Près de la moitié des consommateurs s'attendent à ce que les pages se chargent en 2 secondes ou moins, et un délai d'une seconde réduira la satisfaction client de 16 %.

Les conséquences de ces retards se traduisent en argent réel. Le géant du commerce électronique Amazon a révélé qu'un ralentissement du chargement des pages de seulement 1 seconde lui coûterait 1,6 milliard de dollars de chiffre d'affaires. De même, Google a noté qu'un ralentissement de seulement quatre dixièmes de seconde dans ses résultats de recherche entraînerait une perte de 8 millions de recherches par jour, ce qui se traduirait par des millions de moins dans la publicité en ligne.

Aller au cœur du problème

Les principaux facteurs ayant un impact sur le temps de chargement sont les images, les vidéos et les graphiques. Les sites Web d'aujourd'hui intègrent plus de visuels et moins de texte pour attirer les visiteurs. Selon HTTP Archive, près de 64 % du poids moyen d'un site Web sont des images, tandis que la vidéo représente 8 % supplémentaires.

Étant donné que ces types de médias représentent près des trois quarts de la taille du site Web, il est important pour vous de gérer plus efficacement les images et les vidéos sur votre site afin d'améliorer les performances et les taux de conversion. Examinons quelques mesures que vous pouvez prendre pour réduire l'impact des images et des vidéos sur les performances de votre site Web.

Utilisez des formats d'image plus efficaces et modernes

Google a ajouté la prise en charge de son format d'image WebP aux navigateurs Chrome, et Microsoft a fait de même pour JPEG-XR dans la plupart de ses navigateurs Internet Explorer et Edge. Mais de nombreux développeurs n'ont toujours pas adopté ces changements, s'en tenant aux mêmes formats JPG et PNG, plutôt que de profiter de la façon dont les formats modernes peuvent optimiser leurs sites.

Idéalement, vous devez convertir les images au format WebP et JPEG-XR, le cas échéant, et ajuster la qualité de compression pour équilibrer les formats. Il est également important de détecter le navigateur spécifique qui accède à chaque image et de fournir une version de l'image optimisée pour le navigateur respectif. Cela vous permettra de vous assurer que les utilisateurs reçoivent les meilleures images possibles, en termes de qualité visuelle et d'optimisation de la taille des fichiers, sans ralentir votre site.

Éliminer le redimensionnement inutile côté navigateur

Les développeurs utilisent souvent le redimensionnement des images côté navigateur comme raccourci, plutôt que de redimensionner les images côté serveur. Bien que le résultat final soit exactement le même sur les navigateurs modernes, l'impact sur la bande passante est assez différent. Avec le redimensionnement côté navigateur, les visiteurs du site Web perdent un temps précieux à télécharger une image inutilement grande et vous gaspillez de la bande passante pour la leur fournir.

Pour les navigateurs plus anciens, le problème est encore plus prononcé car leurs algorithmes de redimensionnement sont généralement inférieurs à la normale. Vous devez vous assurer que vos images correspondent parfaitement aux dimensions requises pour le site Web. Cela vaut la peine de créer différentes vignettes de la même image plutôt que de fournir une grande image et de compter sur le navigateur pour la redimensionner. Certains outils disponibles peuvent vous aider, comme un redimensionneur d'image open source comme ImageMagick ou une solution basée sur le cloud comme Cloudinary.

Utiliser les types de fichiers image corrects

JPEG, PNG et GIF sont les formats de fichiers les plus couramment utilisés sur les sites Web aujourd'hui, mais chacun a des rôles très différents. Utilisez le mauvais format et vous faites perdre le temps de vos visiteurs et votre propre argent. Une erreur fréquente consiste à utiliser des PNG pour fournir des photographies. Il y a une idée fausse commune selon laquelle les PNG, en tant que formats sans perte, donneront la meilleure reproduction possible pour les photos.

Bien que cela soit généralement vrai, il s'agit également d'une optimisation assez inutile. Il est important de garder à l'esprit le format d'image à utiliser pour le contenu affiché. PNG doit être utilisé pour les images générées par ordinateur (graphiques, logos, etc.) ou lorsque vous avez besoin de transparence dans votre image (superpositions d'images) ; JPEG lorsque vous montrez une photo capturée ; et GIF lorsque l'animation est nécessaire (animation de chargement Ajax, etc.).

N'utilisez pas une taille d'image unique sur tous les supports de diffusion

Votre site Web est consulté sur de nombreux appareils différents, d'autant plus que les smartphones, les tablettes et les montres connectées sont devenus les préférés des consommateurs. Souvent, les développeurs proposent les mêmes images sur toutes les résolutions d'appareils, en utilisant le redimensionnement côté client pour les images. Les images peuvent sembler superbes, mais les visiteurs perdent du temps à charger des images inutilement volumineuses sur leurs appareils et vous payez pour une utilisation redondante de la bande passante.

C'est particulièrement injuste pour les utilisateurs 3G et les utilisateurs itinérants qui paient un gros supplément pour télécharger les images inutilement en très haute résolution. Pour éviter ces problèmes, vous devez identifier les appareils mobiles des visiteurs et les résoudre à l'aide de leur agent utilisateur. Avec la bonne résolution en main, récupérez l'image la mieux adaptée à partir de vos serveurs. Cela nécessite que vous mettiez à disposition un ensemble de vignettes pour chacune de vos images originales. Il existe d'excellents packages Javascript disponibles qui automatiseront ce processus.

Tirez parti de la conception réactive

Chaque appareil qu'un visiteur utilise pour accéder à votre site a une résolution différente. Le balisage d'un site Web doit s'adapter pour être parfait sur tous les différents appareils et dans diverses résolutions, densités de pixels et orientations d'appareils mobiles. Gérer, manipuler et diffuser des images est l'un des principaux défis de la conception réactive auxquels les développeurs Web sont confrontés.

En raison de ces défis, de nombreux sites Web sont construits avec les images de la plus haute résolution qui peuvent être nécessaires et sont simplement réduits côté client en fonction du point d'arrêt. Ce processus est inefficace et nuit aux performances. Mais il existe des options, telles que l'outil open source Responsive Breakpoints, qui peut vous aider à générer toutes les tailles d'image dont vous aurez besoin, ainsi que le code HTML approprié.

Utiliser les réseaux de diffusion de contenu (CDN)

CDNS a généralement des serveurs stratégiquement déployés dans le monde entier pour raccourcir les temps d'aller-retour du contenu. Les CDN permettent aux images d'être servies plus rapidement aux utilisateurs et réduisent la probabilité de plantages, améliorent les performances de référencement et améliorent l'expérience utilisateur. Lorsque vous choisissez un CDN, vous devrez tenir compte de son niveau de couverture globale, du taux de mise en cache, de la capacité à exécuter des opérations logiques à la périphérie, des temps de réponse moyens et d'autres mesures, telles que les temps d'invalidation moyens.

L'impact du changement

En utilisant ces meilleures pratiques, vous pouvez vraiment faire une différence dans l'expérience utilisateur, en encourageant les visiteurs à rester plus longtemps, à parcourir plus, à s'engager et à faire des achats. Considérez les résultats de ces entreprises :

Apartment List, une ressource en ligne qui aide les particuliers à rechercher un logement locatif, s'est retrouvée à gérer une variété de formats et de résolutions d'images différents lorsqu'elle récupère des flux de données d'images provenant des différentes communautés d'appartements présentées sur son site. En transformant toutes ces images en images optimales pour une présentation sur des appareils mobiles de différentes tailles, ainsi que sur des ordinateurs de bureau, ainsi qu'en tirant parti des techniques de conception réactive, l'entreprise a vu ses taux de conversion augmenter de près de 20 %.

KartRocket, une plate-forme de commerce électronique basée sur SaaS offrant un écosystème de commerce électronique transparent et complet qui aide les PME à créer rapidement et facilement des boutiques en ligne, avait besoin de trouver un moyen d'assurer la qualité des images sans affecter le temps de chargement ou les performances du site pour son clients. Il a exploité des outils pour contrôler dynamiquement les images, de sorte qu'elles soient optimisées pour les petites vignettes, les grandes images de bannières et les images de produits principaux. Cette approche a permis à KartRocket de multiplier par 100 le temps de réponse pour le chargement des images.

L'essentiel

Lorsque le temps c'est de l'argent, les propriétaires de sites Web ne peuvent pas se permettre de ne pas prendre toutes les mesures nécessaires pour améliorer l'expérience de leurs visiteurs. Même une fraction de seconde de retard dans le chargement d'une page pourrait se traduire par une perte de revenus et de confiance de la part du consommateur.

Considérant que les images et les vidéos sont les plus gros consommateurs de bande passante sur la plupart des sites Web, vous devez examiner sérieusement votre conception Web et vos formats d'image, puis prendre les mesures nécessaires pour vous assurer que les médias sont optimisés pour que votre site - sans parler de vos revenus et les perceptions des clients – n'en souffrent pas.