(Français)  INTERNET : LA REFONTE WEB EN QUELQUES POINTS…

Sorry, this entry is only available in French. For the sake of viewer convenience, the content is shown below in the alternative language. You may click the link to switch the active language.

Soigner le design et optimiser les images, Monitorer et manager les scripts tiers… une refonte peut entraîner d’importants investissements.

Selon des études menées par Google, la vitesse est le critère UX le plus important pour les internautes. Loin devant les qualités esthétiques, ou encore la facilité à trouver les informations recherchées. En outre,  si au bout de 3 secondes le contenu d’une page ne s’affiche pas sur mobile, 53% des internautes quittent le site pour toujours.

De même, les difficultés de navigation font partie des raisons principales pour lesquelles les visiteurs interrompent leurs achats. En résumé, la vitesse n’est pas seulement une question de confort, c’est un enjeu pour les taux de transformation et le CA.

La vitesse devient également un critère pour le SEO puisque Google intègre 3 indicateurs de vitesse à son algorithme de classement. Ils sont regroupés sous le nom de Core Web Vitals, permettant de mesurer la qualité de l’UX en prenant en compte la vitesse de chargement. Particulièrement l’affichage, l’interactivité et la stabilité visuelle.

Vu que les frontières entre la web performance, le SEO et l’UX sont de plus en plus perméables, penser « webperf by design » lors d’un projet de refonte. C’est l’assurance d’un site qui propose une expérience d’une qualité incomparable.

1- Soigner le design et optimiser les images

Une refonte est bien évidemment l’occasion de revoir le design graphique d’un site ainsi que son interface. Pour y arriver, les images ont un rôle important à jouer. C’est pourquoi, elles prennent de plus en plus de place et sont même nécessaires pour illustrer des produits ou apporter des informations. Elles représentent en moyenne 50% du poids des pages, apprend-on.

Pour conserver des pages rapides malgré la présence d’images, des techniques d’optimisation sont à portée de main: La compression : elle permet de réduire le poids des images tout en préservant leur qualité visuelle ; le Progressive JPEG : cette technique permet d’afficher vite les images, d’abord en basse qualité, ensuite en qualité optimale.

Le Lazyloading, quant à lui,  consiste à charger seulement ce qui est visible dans le viewport, plutôt que l’ensemble de la page. Les formats d’image de nouvelle génération : par exemple WebP, ou encore plus récemment AVIF qui offre de bien meilleures performances pour les temps de chargement avec des fichiers plus légers mais aussi de meilleure qualité.

2- Nettoyer et optimiser le code

Il faut profiter d’une refonte pour faire le ménage. A l’instar des images, les fichiers CSS, JavaScript et HTML qui composent une page doivent être aussi légers que possible pour permettre un chargement rapide.

3- Monitorer et manager les scripts tiers

94% des sites web comportent des scripts tiers : pubs, trackers, web analytics, test A/B, modules de chat… Ils apportent de la valeur, cependant ils peuvent également multiplier par deux ou trois le temps d’accès à une fonctionnalité.

En termes d’impact sur la vitesse des pages, tous les scripts tiers ne se valent pas. Ils ne sont pas non plus automatiquement responsables des lenteurs. Aussi, il peut absorber facilement les millisecondes nécessaires aux tiers pour se charger et s’exécuter.

4-Soigner la version mobile

La version mobile des pages d’un site web doit aussi être une priorité. L’usage du mobile ne cesse d’augmenter. Suivant une étude Statista, entre 2011 et 2018, la part des Français disposant d’un Smartphone est passée de 17 à 75%. Il faut savoir que la vitesse est plus difficile à optimiser sur les devices mobiles car les conditions de navigation sont plus incertaines (qualité du réseau, puissance du téléphone…).

La vitesse des pages sur mobile doit être examinée avec la plus grande attention pour offrir une expérience optimale à tous les utilisateurs. C’est d’autant plus important que Google est passé à un mode d’indexation Mobile First, c’est-à-dire qu’il crawle d’abord les pages comme s’il était un mobile.

Pour finir, tester la vitesse sur des mobiles d’entrée de gamme est indispensable car tous les utilisateurs ne sont pas forcément équipés des modèles les plus récents. Un conseil : si ce n’est pas déjà fait, observez les devices les plus utilisés par vos visiteurs.

5- Définir une stratégie de cache et adopter un système de cache intelligent

Une stratégie de cache consiste notamment à définir quel cache conserve quelles données pour combien de temps et comment ces caches sont mis à jour. Dans la pratique, un site comporte entre autres : des contenus statiques, qui restent similaires pour tous les utilisateurs et qui peuvent donc être mis en cache.

Des contenus dynamiques : paniers d’achat, contenus personnalisés en fonction de la zone géographique, des préférences enregistrées… Ces données sont différentes d’un utilisateur à l’autre et peuvent évoluer en cours de navigation.

PCN

Source : Journal du Net