92% des foyers français sont équipés d’un accès à Internet en 2020, et chaque mois, environ 53 millions d’individus s’y connectent (source Médiamétrie). Internet est devenu incontournable pour s’informer, se divertir et consommer. L’offre est pléthorique et les utilisateurs privilégient naturellement les services et les sites web qui répondent le mieux à leurs besoins, et qui offrent l’expérience la plus agréable. Mais comment sortir du lot et proposer un contenu et un design qui se distinguent de la concurrence ? Voici des astuces et des leviers essentiels pour des visiteurs conquis dès le premier regard.
Un visiteur juge la qualité d’un site web en seulement quelques millisecondes. Images, polices, interface, style des boutons, vitesse de chargement… Tous ces éléments réunis doivent contribuer à affirmer la qualité de votre offre, et cette qualité doit se retrouver sur tous les appareils : mobile et ordinateur. Les internautes sont intransigeants : sachez que 88% ne reviennent pas sur un site qui a proposé une mauvaise expérience utilisateur. Alors, prenez soin de votre site web car c’est votre meilleur atout marketing et commercial ! Tout ce qui fait fuir vos visiteurs se traduit malheureusement par un manque à gagner sur votre chiffre d’affaires. Et comme vous ne voulez évidemment pas que vos efforts marketing, commerciaux et SEO tombent à l’eau...
Soignez le design de votre site web
Veillez à la cohérence de votre design d’interface (UI)
Votre design doit être identique sur toutes les pages de votre site. L’incohérence visuelle entre les pages donne l’impression d’un service de qualité médiocre et incite à la méfiance.
Pensez ainsi à définir et à respecter une charte graphique pour maintenir une unité de code couleur, polices de caractère, mise en page, qualité des images… Bref, créez les repères visuels qui font votre identité !
Pensez également à favoriser les contrastes sur vos pages, notamment en utilisant des fonts de couleur foncée sur un fond clair et inversement. Les contrastes aident à la lecture, et c’est un critère important pour l’accessibilité.
Mettez en valeur les informations essentielles
Faites ressortir les informations les plus importantes en les organisant sous forme de liste à puces (bullet points en VO). Cette présentation fait gagner du temps lors de la lecture et permet à vos visiteurs de repérer plus vite les points clés.
Ce format peut aussi être repris par Google en position 0 (mise en avant en tête des résultats de recherche), c’est donc un bon point pour votre SEO !
Vous avez besoin de mettre des éléments en valeur ? Illustrez-les avec des images ! Privilégiez les photos qui apportent une information et qui valorisent vos produits et votre image de marque. Un exemple vous vient sûrement naturellement en tête : illustrer une page produit avec la photo dudit produit sur un site Ecommerce.
Pour refléter la qualité de votre offre, veillez à diffuser des images de qualité, tout en vous assurant que leur poids ne va pas alourdir vos pages et donc ralentir leur chargement. Pour cela, vous devez impérativement compresser vos images (les formats nouvelle génération WebP ou AVIF offrent les meilleures performances). C’est une optimisation que vous pouvez très facilement automatiser pour l’ensemble de vos pages grâce au moteur de Fasterize.
Sachez que vous pouvez optimiser votre code pour définir l’ordre d’apparition des éléments sur vos pages, et donner la priorité aux contenus les plus importants. Par exemple, pour prioriser un visuel ou un texte qui seront plus utiles à vos visiteurs qu’une fonctionnalité de recherche, un module de chat, ou une publicité - nous y reviendrons un peu plus tard à propos des scripts tiers.
Rendez vos liens et vos CTA visibles
Le design d’interface de votre site web contribue à la fluidité du parcours de vos utilisateurs, alors, guidez-les pour qu’ils sachent où cliquer.
Utilisez des couleurs et une mise en forme spécifique pour vos liens et vos Call-To-Action (CTA) : privilégiez le texte souligné pour les liens, et les couleurs qui ressortent par rapport au reste de votre page pour les CTA.
Peu visibles ou mal placés, ils risquent de ne pas être cliqués, et vous perdrez l’occasion de garder vos visiteurs sur votre site en les amenant là où vous souhaitez : au bout du parcours d’achat !
Petite astuce au passage : comme nous avons vu un peu plus tôt qu’il est possible d’organiser l’ordre d’apparition des éléments dans le navigateur, notez que vous pouvez décider de donner la priorité à un bouton ou un CTA, par exemple. C’est une technique facile à mettre en place à l’aide de notre moteur d’optimisation du frontend.
Enfin, choisissez des mots clés percutants. Exit le basique “Cliquez ici” ou “Lire la suite”, soyez créatifs, donnez réellement envie de cliquer et de lire la suite !
UX : guidez vos utilisateurs sur des parcours clairs et fluides
Concevez des pages avec des rubriques claires et pensez au maillage interne.
Votre site comporte un grand volume de pages et une profondeur dans la navigation ? Affichez un fil d’ariane pour que votre visiteur sache toujours où il se trouve.
Privilégiez aussi les intitulés de rubrique ou de catégorie explicites afin d’aider vos utilisateurs à trouver rapidement ce qu’ils cherchent, et pensez au maillage interne (utile pour vos visiteurs et pour les moteurs de recherche).
Vous allez ainsi faciliter l’exploration de votre site entre pages d’une même catégorie, d’une catégorie à l’autre... Pour cela, prévoyez des suggestions de liens vers des articles ou des contenus connexes, et des CTA pour inviter à poursuivre la visite.
Notez que la vitesse de chargement doit impérativement soutenir votre démarche : si vos pages ne sont pas optimisées et qu’elles sont lentes, vos visiteurs réfléchiront à deux fois avant de cliquer sur une nouvelle page, parce qu’ils vont craindre de devoir patienter pour qu’elle se charge. A l’inverse, avec des pages rapides, naviguer de contenu en contenu à la vitesse de l’éclair rend l’expérience naturelle et agréable, et favorise l’engagement.
Voici quelques données chiffrées pour vous montrer l’impact de la vitesse de chargement sur l’engagement : les sites dont les pages se chargent en 5 secondes enregistrent des sessions moyennes 70% plus longues que les sites dont les pages se chargent en 19 secondes.
Par ailleurs, gardez en tête que plus de la moitié des internautes quitte une page si elle met plus de 3 secondes à se charger, et que -0,1 seconde de chargement peut entraîner +8% de conversions (données Google).
Vous l’aurez compris : la vitesse de chargement est un atout indispensable pour augmenter l’engagement et le taux de conversion sur votre site !
Abordons maintenant l’épineuse question du JavaScript, parfois indispensable pour améliorer la qualité de l’expérience utilisateur, mais qui peut être à double tranchant pour vos temps de chargement.
Implémentez intelligemment vos scripts tiers et services à valeur ajoutée
Outre le design d’interface et les images, la perception de qualité est également influencée par les services à valeur ajoutée que vous proposez à vos clients.
Personnalisation, support client via un service de chat en direct, géolocalisation, solutions de test A/B et tracking pour améliorer la qualité de l’expérience utilisateur… Tous ces services contribuent à satisfaire et fidéliser vos clients, mais ils peuvent impacter la vitesse de votre site. En effet, mal implémentés, des services tiers (ou Third Parties) peuvent ralentir le chargement de vos pages et dégrader l’interactivité.
Heureusement, vous pouvez anticiper et limiter ce problème. Comme nous l’évoquions plus tôt, vous pouvez définir à quel moment vous souhaitez que la page charge les différents éléments, notamment les scripts tiers.
Pour donner la priorité aux contenus les plus importants pour vos visiteurs et faire en sorte qu’ils s’affichent en premier, vous pouvez charger les JavaScript de façon asynchrone (attention toutefois, décaler le chargement des scripts tiers dans le temps ne veut pas dire qu’ils ne pèsent plus rien sur la page, il s’agit simplement de les charger à un moment plus opportun pour l’utilisateur).
Ainsi, le traitement de ces scripts tiers par le navigateur interviendra plus tard dans le chargement de la page, pour donner la sensation à l’utilisateur que la page s’affiche rapidement et qu’il peut interagir sans être frustré que le site ne réponde pas.
Autre bonne nouvelle : vous pouvez automatiser cette optimisation ! C’est le rôle de l’une des fonctionnalités de notre moteur d’optimisation du frontend appelée DeferJS.
Notez enfin que plus vos pages sont légères et rapides à charger, plus vous pourrez absorber le poids supplémentaire du JavaScript. C’est la conclusion d’une étude que nous avons menée auprès d’une sélection de sites Ecommerce à consulter ici. En effet, ce n’est pas forcément le nombre de Third Parties qui est responsable du ralentissement du chargement des pages, mais plutôt la façon dont ils sont implémentés.
Optimiser la vitesse de votre site avec des pages légères
Vous l’aurez compris, la qualité de l’expérience utilisateur et votre capacité à convertir passe par le design de vos pages, mais aussi et avant tout par leur vitesse de chargement. La vitesse est même le critère UX n°1 !
Fun fact, un utilisateur dont le site web est ralenti ressent le même niveau de stress que s’il regardait un film d’horreur seul - et vous ne voulez certainement pas imposer ça à vos clients !
Alors, pour des pages légères qui se chargent vite, voici quelques bonnes pratiques essentielles à appliquer à votre frontend :
- compressez vos images aux formats nouvelle génération et redimensionnez-les pour qu’elles s’adaptent à la taille de l’écran ;
- optimisez vos fonts ;
- utilisez un CDN (Content Delivery Network) pour rapprocher le contenu de vos utilisateurs ;
- adoptez une stratégie de cache pour accélérer le chargement de vos pages et optimiser même celles qui contiennent du contenu dynamique (nous avons une fonctionnalité prévue pour cela : le SmartCache) ;
- priorisez et hiérarchisez votre JavaScript ;
- optimisez vos ressources HTML, CSS, JS (compression, concaténation, minification)...
Cette liste est un aperçu de bonnes pratiques incontournables, il en existe beaucoup d’autres pour rendre vos pages rapides. Commencez à creuser sans plus tarder en parcourant cet article et découvrez toutes nos fonctionnalités d'automatisation de l’optimisation de votre frontend !
L’ensemble de ces techniques peut en effet être appliqué automatiquement sur toutes vos pages pour gagner du temps et être plus efficace.
Notez également qu’une solution d’automatisation vous permet de maintenir ces optimisations dans la durée, sans avoir besoin de recommencer le même travail à chaque fois que votre site évolue.
Bref, vous pouvez accélérer vos pages et booster vos conversions tout en soulageant vos équipes techniques. Pas mal, non ?
Envie d’en savoir plus sur les meilleures techniques d’optimisation
de votre frontend ? Abonnez-vous à notre newsletter !
Chaque mois, un concentré d’actualités métier et techniques
à ne pas manquer pour optimiser vos performances :
