Sur internet chaque milliseconde compte. La performance de votre site web ou application mobile peut avoir un impact significatif sur l'engagement des utilisateurs, le taux de conversion, votre référencement et finalement, le succès de votre entreprise. Dans ce guide de performance web, nous allons explorer les trois "core web vitals" - des métriques essentielles définies par Google - qui peuvent faire ou défaire l'expérience de vos utilisateurs. Vous découvrirez non seulement ce qu'ils sont, mais aussi des techniques d'optimisation et des outils que vous pouvez utiliser pour améliorer ces indicateurs. Préparez-vous à naviguer à vitesse maximale !

Largest Contentful Paint (LCP)

Le Largest Contentful Paint, ou LCP, est une métrique de performance web qui mesure le temps qu'il faut pour charger le plus grand élément visible dans la fenêtre de visualisation d'un utilisateur lors de sa première visite sur une page. Google recommande un LCP de 2,5 secondes ou moins pour une bonne expérience utilisateur.

Comprendre le LCP

Pour optimiser le LCP, il faut comprendre comment il fonctionne. LCP mesure le temps entre le moment où la navigation est déclenchée et le moment où le plus grand élément de contenu est entièrement visible à l'écran. Cela peut être une image, un bloc de texte, ou une vidéo - essentiellement, le plus gros "bloc" de contenu que l'utilisateur verra lors du chargement de la page.

Optimiser le LCP

Il existe plusieurs façons d'optimiser le LCP, mais voici quelques-unes des plus efficaces :

• Réduire le temps de chargement des ressources : Cela peut être accompli en compressant les images et en utilisant des formats modernes comme WebP qui offrent une meilleure qualité pour un poids de fichier plus faible.
• Utiliser des CDN (Content Delivery Networks) : Les CDN peuvent aider à servir vos assets plus rapidement en les stockant sur un réseau de serveurs répartis dans le monde entier, ce qui permet de réduire le temps de latence.
• Éviter le JavaScript qui bloque le rendu : Le JavaScript qui doit être chargé et analysé avant que la page ne puisse être rendue peut ralentir le LCP. Il est donc préférable d'éviter cela autant que possible, par exemple en rendant l'exécution du code asynchrone 
• Prioriser le chargement des ressources : Cela signifie que les ressources nécessaires pour le plus grand élément de contenu doivent être chargées en premier, en utilisant par exemple le préchargement pour donner la priorité à certaines ressources.

First Input Delay (FID)

Le First Input Delay, ou FID, est une métrique qui mesure le temps entre la première interaction de l'utilisateur avec une page (par exemple, quand ils cliquent sur un lien, tapent sur un bouton, ou utilisent une fonctionnalité JavaScript qui nécessite du temps pour s'exécuter) et le moment où le navigateur est capable de répondre à cette interaction. Google recommande un FID de 100 millisecondes ou moins pour une bonne expérience utilisateur.

Comprendre le FID

Le FID est indispensable pour comprendre comment les utilisateurs interagissent avec votre site. Si le FID est élevé, cela signifie qu'il y a un délai perceptible entre le moment où l'utilisateur tente d'interagir avec votre site et le moment où le site répond réellement à cette interaction. Cela peut entraîner une expérience utilisateur frustrante et avoir un impact négatif sur l'engagement et les conversions.

Optimiser le FID

Voici quelques stratégies pour optimiser le FID sur votre site ou application :

• Réduire le temps d'exécution du JavaScript : Plus votre site prend de temps pour exécuter le JavaScript, plus le FID sera élevé. Cela peut être réalisé en minimisant ou en différant le JavaScript inutile, ou en utilisant des techniques de fractionnement du code pour ne charger que le JavaScript nécessaire pour l'interaction initiale de l'utilisateur.
• Utilisation des web workers : Les web workers permettent d'exécuter le JavaScript sur un thread de travail séparé, ce qui signifie que le thread principal (qui gère les interactions de l'utilisateur) est moins susceptible d'être bloqué.
• Mise en œuvre du chargement différé (lazy loading) : Le lazy loading est une technique qui permet de charger le contenu uniquement lorsqu'il est nécessaire. Cela signifie que le navigateur n'a pas à passer du temps à charger du contenu qui n'est pas immédiatement nécessaire pour l'interaction initiale de l'utilisateur, ce qui peut aider à réduire le FID.
• Utilisation de frameworks comme Svelte : Svelte est un framework JavaScript qui compile votre code en JavaScript vanilla (du javascript pure, sans framework) lors de la construction, plutôt que d'exécuter beaucoup de JavaScript côté client. Cela peut aider à réduire considérablement le temps d'exécution du JavaScript et, par conséquent, le FID.

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) est une mesure de la stabilité visuelle de votre site web. Il quantifie à quel point les éléments de la page se déplacent pendant le chargement. Un score CLS faible (0,1 ou moins) est essentiel pour garantir que les utilisateurs ne subissent pas de mouvements inattendus sur votre site web, ce qui pourrait les perturber ou leur faire faire des erreurs.

Comprendre le CLS

Le CLS est calculé en mesurant l'impact de chaque mouvement de layout inattendu sur la page et en ajoutant ces impacts pour obtenir un score total. Un mouvement de layout est considéré comme inattendu s'il se produit après que le contenu de la page a commencé à se charger et si l'utilisateur n'a pas déclenché ce mouvement.

Optimiser le CLS

Voici quelques stratégies pour réduire le CLS sur votre site ou application :

• Spécifier des dimensions pour les images ou utiliser la propriété d'aspect ratio CSS : Lorsque les dimensions des images ne sont pas spécifiées, le navigateur doit recalculer le layout de la page lorsque l'image est finalement chargée, ce qui entraîne un déplacement. En spécifiant les dimensions de l'image ou en utilisant la propriété d'aspect ratio CSS, vous pouvez éviter cela.
• Utiliser des images adaptatives avec l'attribut 'source set' : En utilisant l'attribut 'source set', vous pouvez dire au navigateur quelles images charger en fonction de la taille de l'écran de l'utilisateur et de la résolution du périphérique. Cela signifie que vous pouvez éviter de charger une grande image sur un petit écran, ce qui pourrait causer un déplacement.
• Éviter les problèmes liés aux publicités injectées ou aux animations mal conçues : Les publicités qui sont injectées dans la page après le chargement initial peuvent provoquer des déplacements. De même, les animations qui déplacent les éléments autour de la page peuvent également causer des problèmes. Assurez-vous de concevoir ces éléments de manière à éviter les mouvements inattendus.

Outils pour analyser et optimiser la performance de votre site web

L'optimisation de la performance web est un processus itératif qui nécessite des tests continus et des ajustements. Pour vous aider à analyser les performances de votre site ou application et à déterminer où des améliorations peuvent être apportées, nous recommandons les outils suivants

L'extension Web Vitals Chrome

L'extension Web Vitals pour Chrome est un outil essentiel pour tous ceux qui cherchent à améliorer la performance de leur site ou application. Elle vous permet de voir en temps réel comment votre site ou application se comporte en termes de LCP, FID et CLS. Cela peut vous aider à identifier les problèmes de performance à mesure qu'ils surviennent et à prendre des mesures pour les résoudre.

L'outil "unLitehouse" pour les rapports Google Lighthouse

Google Lighthouse est un outil d'analyse de performance automatisé très populaire et directement intégré dans la console des navigateurs. Il aide à comprendre comment votre site ou application se comporte, cependant, l'exécution de rapports Lighthouse sur plusieurs pages peut être un processus fastidieux. C'est là qu'intervient unLitehouse. Il vous permet d'exécuter des rapports Lighthouse sur plusieurs pages à la fois, ce qui  permet de gagner du temps et aide à comprendre comment la performance varie d'une page à l'autre.

Comment utiliser ces outils pour améliorer votre site ou application

Utilisez l'extension Web Vitals Chrome pour surveiller les performances de votre site en temps réel. Si vous remarquez un problème avec l'une de vos métriques vitales, utilisez Google Lighthouse et "unLitehouse" pour obtenir un rapport détaillé sur les performances de la page et des conseils sur la façon de résoudre le problème.

Devenez un pro de la performance web

Maintenant que vous avez une compréhension approfondie de l'importance de la performance web et des Core Web Vitals, ainsi que des outils et des techniques pour améliorer la performance de votre site ou application, vous êtes bien équipé pour prendre des mesures. Mais n'oubliez pas que l'optimisation des performances est un processus continu qui nécessite une surveillance constante et des ajustements pour garantir que vous offrez la meilleure expérience utilisateur possible...

... ou bien, confiez la réalisation de votre projet à des professionnels. Chez Onicorn nous développons votre site ou application, web ou mobile en respectant les meilleures pratiques en terme de performance !