Si je n'attire pas votre attention dans les cinq prochaines secondes, vous ne lirez pas cet article!
De nos jours, les humains ont une durée d'attention extrêmement courte, à cause du nombre pratiquement illimité de moyens d'obtenir une gratification instantanée et du plaisir. Et c'est pourquoi les développeurs Web doivent être obsédés par les performances de chargement initial des pages. Si votre site Web est lent, il perdra de l'argent car les visiteurs n'obtiendront pas leur gratification instantanée et partiront.
Atteindre des performances optimales est complexe. Comprenez-vous réellement des éléments tels que Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS) ? À la fin de cet article, vous comprendrez ce que sont ces signaux web, mais surtout comment les mesurer et les optimiser dans votre propre projet.
Et je ne parle pas seulement de Lighthouse ici. Je vous montrerai comment utiliser des outils que vous n'avez jamais entendus parler, comme Unlike House et la nouvelle extension Chrome Web Vitals. Nous les utiliserons pour analyser des sites Web populaires dans le monde réel, comme Amazon et Google.
Que sont les signaux web essentiels?
Mais avant d'aborder ces outils, nous devons d'abord comprendre les indicateurs de performance essentiels. Commençons par Largest Contentful Paint (LCP).
Largest Contentful Paint (LCP)
En termes simples, cet indicateur est le plus important pour mesurer les performances de chargement. Lorsqu'un site Web se charge, il doit récupérer un ensemble de ressources sur Internet, comme des feuilles de style CSS, du code HTML, du JavaScript, des images et des vidéos.
Au départ, vous obtenez le Largest Contentful Paint, puis progressivement, la page Web chargera toutes les images et vidéos, qui représenteront le LCP. Pour obtenir de bonnes performances, Google recommande d'atteindre un LCP dans les 2,5 secondes.Tout ce qui dépasse 4 secondes est mauvais et aura probablement un impact sur des éléments tels que l'optimisation pour les moteurs de recherche.
La façon la plus élémentaire d'analyser le LCP est d'ouvrir l'onglet réseau de votre navigateur et d'examiner le déroulement du chargement des ressources. Cela vous montrera comment chaque ressource est chargée et vous pourrez identifier les goulots d'étranglement car ils apparaîtront sous forme d'une barre large dans le graphique. Et une fois que vous avez identifié un problème, optimisez le LCP!
Comment réellement optimiser le LCP ?
Eh bien, il y a plusieurs choses que vous pouvez faire. La première et la plus évidente est de réduire le temps de chargement des ressources. Si vous avez des images et des ressources massives, elles prendront plus de temps à se charger. Veillez à compresser vos images et privilégiez les formats modernes comme WebP. La même chose s'applique aux polices. Utilisez uniquement le minimum nécessaire de polices pour rendre la page. C'est la première étape.
En production, vous devez également vous assurer que vos ressources sont servies par un réseau de diffusion de contenu (CDN). Si vous déployez votre site sur des plateformes telles qu'O2switch, elle gérera automatiquement toute la magie du CDN pour vous.
L'autre problème potentiel majeur concerne le JavaScript bloquant le rendu. Par exemple, il se peut que vous deviez exécuter du JavaScript avant d'afficher l'image réelle sur la page, ce qui retardera le LCP. Vous devez essayer d'éviter cela à tout prix.
C'est l'une des raisons pour lesquelles les frameworks côté serveur comme Next.js sont préférés aux applications monopages comme React. Lors du chargement initial de la page, les applications monopages doivent exécuter beaucoup de JavaScript avant de pouvoir afficher le contenu principal.
Mais ce n'est pas tout. Il existe au moins une autre optimisation intéressante que nous pouvons réaliser dans les navigateurs modernes. Vous pouvez optimiser la priorité des ressources en utilisant des liens de préchargement (preload) pour vous assurer que les ressources importantes sont découvertes en premier.
De plus, vous pouvez modifier la priorité de récupération des images en haute ou basse pour que les images de basse priorité, en bas de la page, ne se chargent pas avant les images plus importantes.
Malheureusement, le LCD n'est pas le seul élément dont nous devons nous préoccuper. Nous avons également le First Input Delay (FID), qui mesure l'interactivité.
First Input Delay (FID)
Un site Web doit avoir un First Input Delay de 100 millisecondes maximum, et à partir de 300 millisecondes, cela devient mauvais. Ce que cet indicateur mesure, c'est le temps écoulé entre le moment où un utilisateur interagit avec la page, comme lorsqu'il clique sur un bouton, et le moment où le navigateur traite les gestionnaires d'événements correspondants. Fondamentalement, vous ne voulez pas que la page se rende si les éléments réels qu'elle contient ne fonctionnent pas.
Comment optimiser le FID?
Mesurer le FID est un peu plus complexe, mais je vais vous montrer comment le faire dans une minute avec le nouveau plugin Web Vitals. Et fondamentalement, la seule façon d'optimiser le FID est de réduire le temps d'exécution de votre JavaScript.
Mais on ne se débarrasse pas simplement de son JavaScript. Vous pouvez utiliser des outils tels que les web workers et Party Town pour déplacer une partie de votre JavaScript dans un worker. La plupart des frameworks JavaScript proposent une option de chargement paresseux, comme React Lazy, par exemple. Ou il existe des frameworks comme Quick qui sont optimisés pour une interactivité instantanée grâce à un chargement paresseux très agressif.
Et cela nous amène à notre dernier indicateur, le Cumulative Layout Shift (CLS).
Cumulative Layout Shift (CLS).
Il mesure la stabilité visuelle, autrement dit, les éléments de la page ne doivent pas se déplacer de manière inattendue. Vous pouvez le mesurer en générant un rapport Lighthouse dans les outils de développement de Chrome ou avec l'extension Web Vitals, comme nous le verrons dans un instant.
Comment optimiser le CLS?
L'une des façons les plus simples d'obtenir un mauvais CLS est d'utiliser des images sans dimensions.
Lorsque vous utilisez des images, elles doivent toujours avoir une largeur et une hauteur définies, ou utilisez la propriété de ratio d'aspect CSS. C'est généralement une correction facile, sauf si vous avez des images adaptatives dont le ratio d'aspect doit changer en fonction de la taille de la fenêtre d'affichage.
Dans ce cas, vous voudrez probablement utiliser "srcset" pour utiliser des images différentes selon les conditions. De plus, un mauvais CLS peut être causé par des publicités injectées sur le site ou par des animations mal conçues qui en font trop.
Nous pourrions parler de performance toute la journée, mais je pense que ces trois indicateurs sont les plus importants à comprendre.
Maintenant que vous savez comment ils fonctionnent, faisons une analyse du monde réel.
Quels outils pour analyser les signaux web essentiels?
Extension – Web Vitals
L'équipe Chrome de Google vient de publier une nouvelle extension Web Vitals. Installez-la et activez la journalisation de la console dans les paramètres. Ensuite, rendez-vous sur votre site Web préféré, grainesdereferenceur.com, et ouvrez la console.
Vous remarquerez que nous obtenons maintenant des journaux de console pour le CLS et le LCP. En ce qui concerne le Largest Contentful Paint, il nous indiquera précisément quel élément affecte cet indicateur, ce qui est extrêmement important, car c'est ce que vous voulez optimiser.
De plus, il détaillera le temps pour ses sous-parties, comme le temps de la première réponse du serveur et le délai de rendu de l'élément. Ensuite, en ce qui concerne le décalage de disposition, il nous donnera les éléments dans le DOM qui affectent cet indicateur, nous pourrons donc les examiner et voir si nous pouvons les optimiser.
Si nous cliquons ensuite sur quelque chose, nous obtiendrons également un journal pour le FID, ainsi que des mesures pour toute interaction ultérieure. Cela vous permettra d'identifier les goulots d'étranglement en termes d'interactivité.
J'utilise cette extension depuis seulement quelques jours, mais elle a révolutionné l'analyse des performances sur mon propre site Web, principalement parce qu'elle est si précise pour identifier les éléments à corriger.
Cependant, lorsque vous avez un site Web comportant des centaines ou des milliers de pages différentes, il est impossible d'analyser les performances sur chaque page individuellement. C'est pourquoi vous devriez connaître cet autre outil appelé Unlighthouse
Unlighthouse
Unlighthouse est un outil open-source qui exécute un rapport Google Lighthouse sur chaque page de votre site Web, et il fait tout cela en parallèle. Ainsi, il ne faut que quelques minutes pour analyser des centaines de pages. Pour l'exécuter, créez simplement un nouveau répertoire, puis exécutez npx sur Lighthouse avec l'adresse de votre site Web.
Il affichera une interface utilisateur pour vous montrer en temps réel à quel point les performances de votre site Web sont mauvaises. Et bien que je sois heureux de constater que la plupart des pages ont d'excellentes performances, certaines pages inattendues ont des performances très médiocres, ce que je n'aurais jamais su autrement. J'ai trouvé cela assez intéressant.
Je l'ai donc utilisé sur plusieurs sites Web populaires. D'abord, j'ai essayé Amazon.com. Je m'attendais à ce qu'il ait des performances relativement médiocres simplement parce qu'il est relativement complexe avec de nombreuses images. Mais en réalité, il s'est très bien comporté. Bien que, lorsque j'utilisais le plugin Web Vitals, j'ai remarqué de nombreux problèmes de décalage de disposition cumulatif sur Amazon.
Google, comme prévu, a obtenu de très bonnes performances, car ce sont eux qui établissent toutes ces règles de performance en premier lieu. Et presque tous les principaux sites Web que j'ai analysés, y compris Reddit et easy-links, ont obtenu d'excellentes performances avec un score moyen d'environ 90…
Laisser un commentaire