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 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 moyenne internationale d’une page web se situe autour de 1,75 Mo, 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 si possible.
- Enfin, on ne charge au démarrage que les images au-dessus de la ligne de flottaison en utilisant le lazyloading.
La taille des fonts
L’audit a également pointé du doigt la gestion des fonts. 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 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 !
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.
