Optimisation des performances web : Introduction

Dans le monde du Web aussi bien sur l’e-commerce que les médias, les utilisateurs sont impatients et les attentes en matière de vitesse et de performance sont très élevées, l’optimisation des performances web est un élément crucial pour le succès d’un site web.

Les utilisateurs souhaitent des sites web qui se chargent très rapidement et offrent une expérience utilisateur le plus smooth possible. C’est pourquoi il est important pour des équipes produits (les développeurs, PO, PM, QA) de comprendre les meilleures pratiques et les outils nécessaires pour optimiser la performance des sites Web.

De quoi parle-t-on quand parle de Webperf : Core Web Vitals principalement. C’est ce qui permet de mesurer la qualité de l’expérience utilisateur sur une page web

Les Core Web Vitals se concentrent sur trois aspects principaux de la performance web :

• le temps de chargement (TTBF,LCP)
• l’interactivité (FID)
• la stabilité visuelle (CLS/TBT)

Je ne vais pas détailler ici car un simple google search permet de trouver précisément que se cache dernière ces termes. Ces mesures sont essentielles pour assurer une expérience utilisateur fluide et satisfaisante sur les sites web, qui est un enjeu majeur pour les sites web à fort traffic et à fort audience.

Il y a des outils clés en main qui permettent de mesurer ces perfs :

• Checkly
• Speedcurve
• Calibre
• Dareboost

Et il existe également des solutions Opensource, mais à héberger soi-meme si on n’a pas assez de budget pour investir sur ces mesures. Il est important de noter que dès la phase de développement on est en capacité de faire ces mesures.

• WebPageTest
• Lighthouse

Des outils tels que Webpage Test et Chrome Dev Tools sont utiles pour mesurer la performance d’un site web. Ils permettent de mesurer les KPI tels que le temps de première réponse (TTFB), le Largest Contentful Paint (LCP), la première interaction (FID) et la stabilité visuelle (TBT). Il est également important de savoir lire un waterfall, qui montre le temps d’exécution du code JavaScript.

Les outils c’est bien mais après ? Il faut savoir interpréter et optimiser le code pour avoir les meilleurs performances. Pour cela en fonction des outils on a plus ou moins de pistes et surtout il faut sans cesse voir les différentes types d’optimisations et les meilleures pratiques.

Ex :

• le lazy-loading (le plus connus)
• defer
• chargement des polices font-display: swap

En conclusion, l’optimisation des performances web est un élément crucial pour le succès d’un site web. En utilisant les outils et les meilleures pratiques appropriées, les développeurs peuvent garantir une expérience utilisateur smooth et améliorer les performances des sites web.

C’est dans le cadre de cette amélioration continue qu’au Parisien nous avons souhaité participer cette année à l’évènement “We Love Speed”. Nous vous partageons nos trouvailles dans d’autres articles!