artwaï accompagne Leocare sur sa webperf
Depuis 2016, artwaï est partenaire de Leocare, l’assurance communautaire connectée et personnalisée. Notre agence web à Rennes réalise le site internet et la maintenance de leocare.eu.
Il y a quelques semaines, on vous parlait du succès de la levée de fonds de 15 millions d’euros de Leocare pour devenir la référence de l’assurance digitale. Depuis, Leocare enfonce le clou et reçoit le label FT120 du gouvernement français consacré aux start-ups en phase d’hyper-croissance pour un développement à l’échelle globale.
Afin d’offrir une expérience utilisateur L'expérience utilisateur (UX) désigne la qualité de l'interaction d'un utilisateur avec un produit ou service, en termes de satisfaction, facilité d'utilisation et efficacité. optimale, Leocare a mandaté artwaï pour auditer la performance web de son espace client.
Le poids des images
Une fois n’est pas coutume, l’audit a remonté que le poids de la page est le premier levier à actionner pour améliorer la webperf La Webperf désigne l'optimisation des performances d'un site web pour accélérer son chargement et améliorer l'expérience utilisateur, grâce à des techniques comme le caching, la compression, et la réduction des fichiers. . La moyenne internationale d’une page web se situe autour de 1,75 Mo Mo (Mégaoctet) est une unité de mesure informatique équivalente à 1 024 Ko ou 1 048 576 octets. Il est utilisé pour mesurer la taille des fichiers ou la quantité de données dans un système numérique. , quand les recommandations d’une page bien webperfée situe un poids idéal sous la barre de 1Mo.
Les premiers coupables sont généralement les images, trop grandes, trop lourdes, et souvent chargées trop tôt. Un petit rappel des bonnes pratiques pour la gestion des images pour le web :
- On charge une image dont les dimensions réelles sont proches de l’affichage sur le site (inutile de charger une image de 1500x1000px lorsqu’elle est affichée en 300x200px). Les méthodes d’images adaptatives telles que srcset ou picture permettent de charger les images selon les résolutions d’écrans.
- On réduit le poids des images pour gagner en temps de chargement.
- On optimise le format d’image en utilisant le webp Le WebP est un format d'image moderne développé par Google, qui permet de compresser des images tout en conservant une bonne qualité, avec des tailles de fichiers plus petites que les formats JPEG ou PNG, améliorant ainsi les performances des pages web. si possible.
- Enfin, on ne charge au démarrage que les images au-dessus de la ligne de flottaison La ligne de flottaison, sur une page web, correspond à la partie visible du contenu sans avoir à faire défiler. Elle joue un rôle clé en capturant l'attention de l'utilisateur dès l'arrivée sur le site. en utilisant le lazyloading.
La taille des fonts
L’audit a également pointé du doigt la gestion des fonts Une font (police de caractères) est un ensemble de caractères typographiques ayant un style et une taille spécifiques. Elle détermine l'apparence du texte sur un site web ou dans un document. . Celle-ci fait souvent mal à la webperf également. Nous trouvons sur encore beaucoup de sites web des fonts au format .ttf (et qui pèsent très, très lourd) alors que le woff2 est aujourd’hui très largement supporté par les navigateurs.
D’autre part, de plus en plus de fonts sont disponibles en mode variable, cela permet de n’appeler qu’un seul fichier au lieu de 2 (ou 3, ou 4… pour les adeptes de jeux de graisses), et donc moins de requêtes. Mais en plus, le poids d’une font variable Une font variable est une police unique qui permet de moduler plusieurs propriétés, comme le poids, la largeur ou l'italique, au sein d'un seul fichier, offrant flexibilité et performance par rapport aux fonts traditionnelles. est moins important que celui de deux font additionnées ! (Et encore plus avec 3 ou 4…)
Pour Leocare, il s’agit de travailler sur les polices d’icônes. Sur le site, deux fonts d’icônes de Font Awesome sont utilisées pour avoir deux graisses différentes. De plus, ces fonts appellent des icônes qui ne sont pas utilisées. Leur poids peut donc être réduit en n’utilisant qu’une seule font variable et en incluant uniquement les icônes utiles au site. Bonus, cela va également jouer sur la CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. !
On rappelle également la méthode utilisant les ligatures dans la font d’icône afin de se passer de toute la CSS liée à une font d’icône.
Ces deux leviers ne sont que quelques points d’amélioration vers un site web performant, ce qui joue, en plus, inévitablement sur l’impact environnemental du site.
Pour vous en convaincre : confiez un audit webperf à artwaï ou UX à l’agence POLUX.
