Améliorer les performances Web : un guide pour les développeurs frontend

Salut tout le monde ! Cela fait un moment que je n’ai pas écrit de blog, et j’avoue que ça me rend un peu triste. La réalité est qu’il y a tellement de choses à apprendre, et parfois on a l’impression qu’on n’a jamais assez de temps pour tout approfondir. Mais de qui je me moque ? La vérité est que j’ai beaucoup tergiversé ces derniers temps.

Mais récemment, j'ai exploré les performances Web, un sujet crucial pour tout développeur frontend, et je suis ravi de partager ce que j'ai appris. L'L'optimisation des performances fait partie de ces choses qui, lorsqu'elles sont bien faites, peuvent faire toute la différence dans la façon dont les utilisateurs perçoivent votre site Web ou votre application Web. Non seulement cela améliore l'expérience utilisateur, mais cela stimule également le référencement et peut même avoir un impact sur les taux de conversion.

Alors, plongeons-nous !

Pourquoi les performances Web sont importantes

Dans le monde trépidant d’aujourd’hui, les utilisateurs s’attendent à ce que les sites Web se chargent rapidement et interagissent de manière fluide. Si votre site est lent, les utilisateurs partiront, c'est aussi simple que cela. Des études montrent qu'un retard, même de quelques secondes, peut entraîner des taux de rebond plus élevés et une diminution de l'engagement. En tant que développeurs frontend, nous sommes responsables de garantir que nos applications non seulement sont belles, mais fonctionnent bien dans diverses conditions.

Quand il s'agit de mesurer les performances, Google est souvent considéré comme la référence. Google fournit un ensemble de mesures clés, connues sous le nom de Core Web Vitals, qui aident les développeurs à suivre et à améliorer les performances de leurs sites Web. Décomposons-les :

Selon le seigneur Google ces éléments comptent en termes de performances

• FCP (Première Peinture Contente)
• LCP (la plus grande peinture à contenu)
• CLS (Changement de mise en page cumulatif)
• TTI (Time To Interactive)
• INP (Interaction avec la peinture suivante)

Explorons-les de plus près

FCP (Première Peinture Contente)

Ce qu'il mesure : FCP mesure le temps nécessaire pour que le premier élément de contenu (texte, images, etc.) apparaisse à l'écran après qu'un utilisateur accède à votre page. Il s’agit d’une mesure essentielle car elle indique aux utilisateurs que la page est en cours de chargement. Plus le FCP est rapide, meilleure est l'expérience utilisateur.

Comment améliorer le FCP :

Réduire les ressources bloquant le rendu : Réduisez ou éliminez les ressources qui bloquent le rendu de la page, telles que le JavaScript ou le CSS synchrone. Utilisez pour les ressources critiques.

Différer le JavaScript non critique : Utilisez les attributs defer ou async pour les scripts non essentiels afin de vous assurer qu'ils ne bloquent pas la peinture initiale.

*Utiliser le rendu côté serveur (SSR) : * SSR permet de fournir le HTML initial plus rapidement, en particulier pour le contenu dynamique, afin que les utilisateurs puissent voir un contenu significatif plus tôt.

Optimiser la livraison CSS : Réduisez la taille de votre CSS et de votre CSS critique en ligne, afin que le navigateur puisse restituer le contenu plus rapidement.

Utilisez un réseau de diffusion de contenu (CDN) : Diffusez des ressources statiques à partir d'un CDN pour réduire la latence et accélérer la livraison des ressources.

LCP (la plus grande peinture à contenu)

Ce qu'il mesure : LCP se concentre sur le temps nécessaire au rendu complet du plus grand élément (généralement une image de héros, un grand bloc de texte ou une vidéo) dans la fenêtre d'affichage. C’est un excellent indicateur de la vitesse de chargement perçue, car les utilisateurs considèrent que la page est prête une fois le contenu le plus volumineux chargé. Essayez de maintenir le LCP sous 2,5 secondes pour une expérience rapide.

Comment améliorer le LCP :

Optimiser et compresser les images : Utilisez des formats d'image modernes tels que WebP, compressez les images et assurez-vous que les bonnes tailles d'image sont diffusées à l'aide des attributs srcset et size.

Chargement différé des images au-dessous de la ligne de flottaison : Implémentez le chargement différé pour les images qui ne sont pas immédiatement visibles afin de donner la priorité au chargement du contenu au-dessus de la ligne de flottaison.

Précharger les ressources importantes : Utilisez la balise pour charger plus rapidement des ressources importantes telles que des polices, des images de héros ou des fichiers multimédias volumineux.

Minimisez les CSS bloquant le rendu : Tout comme avec FCP, minimisez l'utilisation de fichiers CSS volumineux qui pourraient bloquer le rendu.

Réduire les scripts tiers : Les publicités, analyses ou autres scripts tiers peuvent ralentir LCP. Différez ou chargez de manière asynchrone les scripts non essentiels.

CLS (décalage cumulatif de mise en page)

Ce qu'il mesure : CLS mesure la stabilité visuelle de votre page. Avez-vous déjà lu quelque chose et soudainement la mise en page change, vous faisant perdre votre place ou cliquer sur le mauvais bouton ? C’est un mauvais score CLS. CLS suit le nombre d'éléments de la page qui se déplacent de manière inattendue pendant le processus de chargement. Un CLS faible est essentiel pour une expérience utilisateur fluide, notamment sur mobile.

Comment améliorer CLS :

Définissez les dimensions des images et des vidéos : Incluez toujours les attributs de largeur et de hauteur sur les images, ou utilisez les zones de rapport hauteur/largeur CSS pour réserver de l'espace pour les éléments multimédias avant leur chargement.

Évitez d'insérer du contenu au-dessus du contenu existant : évitez d'ajouter dynamiquement du contenu au-dessus du contenu existant, sauf si cela est absolument nécessaire (par exemple, des publicités).

Utilisez des stratégies de chargement de polices : Lors du chargement de polices personnalisées, utilisez font-display: swap; pour éviter les changements de mise en page causés par le chargement des polices.

Évitez d'injecter de nouvelles annonces ou des fenêtres contextuelles sans espace : assurez-vous que les annonces, bannières ou fenêtres contextuelles chargées dynamiquement sont prises en compte dans l'espace de mise en page pour éviter les déplacements inattendus.

Utilisez des espaces réservés ou des chargeurs d'image avec le même espace que l'image

TTI (Time to Interactive)

Ce qu'il mesure : TTI mesure le temps qu'il faut pour que la page devienne entièrement interactive. Cela signifie que tous les boutons, entrées et liens sont utilisables et que le fil de discussion principal est libre de répondre aux entrées de l'utilisateur. Un TTI rapide garantit que les utilisateurs peuvent interagir rapidement avec votre contenu sans avoir l'impression que le site est lent ou ne répond pas.

Comment améliorer le TTI :

Réduisez le temps d'exécution de JavaScript : Décomposez les gros bundles JavaScript et chargez uniquement les scripts essentiels pour la première interaction. Utilisez le fractionnement de code dans React (avec React.lazy()) ou les importations dynamiques en JavaScript.
Utilisez Web Workers : Déchargez les tâches lourdes et non bloquantes de l'interface utilisateur sur Web Workers pour que le thread principal reste réactif.
Différer les tâches longues : Divisez les tâches JavaScript longues en tâches plus petites pour éviter de bloquer le thread principal pendant trop longtemps.
Précharger les ressources critiques : Assurez-vous que les ressources essentielles nécessaires à l'interactivité (scripts, styles) sont préchargées pour éviter les retards dans TTI.
Optimisez CSS et JavaScript : Réduisez, compressez et hiérarchisez le code essentiel. Utilisez l'arborescence pour éliminer le code mort et garantir une exécution plus rapide des scripts. Utilisez le mécanisme de compression GZIP ou BROTLI

INP (Interaction avec la peinture suivante)

Ce qu'il mesure : Une métrique relativement plus récente, INP suit le temps nécessaire à une page pour répondre aux interactions de l'utilisateur (comme cliquer sur des boutons, faire défiler ou taper) et mettre à jour l'interface utilisateur en conséquence. Il permet de mesurer l'interactivité globale au-delà du chargement initial, garantissant ainsi que votre application reste dynamique tout au long de la session utilisateur.

Comment améliorer l'INP :

Réduisez la latence d'entrée : Assurez-vous que les entrées utilisateur (clics, pressions sur des touches) sont traitées rapidement en évitant les longues tâches JavaScript qui bloquent le thread principal.

Donner la priorité à la réactivité des entrées : Utilisez requestAnimationFrame ou requestIdleCallback pour gérer les travaux non urgents pendant les temps d'inactivité, en laissant le thread principal ouvert pour la gestion des interactions.

Utiliser l'anti-rebond et la limitation : Lors de la gestion d'interactions utilisateur fréquentes (comme le défilement ou la saisie), anti-rebond ou limitation des gestionnaires d'événements pour empêcher l'interface utilisateur de ne plus répondre.

Lazy Load Non-Critical Code : Différez le chargement des fonctionnalités non critiques jusqu'après l'interaction initiale.
Par exemple, vous pouvez charger des composants paresseusement dans React en utilisant React.lazy() et Suspense.

En suivant ces stratégies, vous pouvez améliorer considérablement ces indicateurs clés et offrir une expérience utilisateur plus rapide et plus réactive. Ces optimisations, en particulier lorsqu'elles sont appliquées ensemble, contribuent à garantir que votre site non seulement réussit les tests Core Web Vitals de Google, mais qu'il offre également une expérience exceptionnelle à vos utilisateurs

J'espère que vous avez trouvé ce blog utile et que vous avez pu en tirer des informations clés pour vous aider dans votre prochaine stratégie d'amélioration des performances.

Pour d'autres blogs incroyables sur les performances, la sécurité Web, React, Angular, Vue, continuez à me suivre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!