Présentation de Lighthouse

Comme nous l'avons vu dans la section précédente, les Core Web Vitals se concentrent sur les aspects de l'expérience utilisateur via les performances de chargement (Largest Contentful Paint), l'interactivité (First Input Delay) et la stabilité visuelle (Cumulative Layout Shift).

Dans cette leçon, nous nous concentrerons sur la manière de mesurer les Core Web Vitals en utilisant un environnement simulé appelé Lighthouse.

Remarque : Pour cette leçon, nous utiliserons Chrome Dev Tools. Cependant, il existe plusieurs méthodes pour exécuter Lighthouse.

Lighthouse fonctionne en exécutant une série d'audits sur une URL fournie. Sur la base de ces audits, il génère un rapport sur les performances de la page. S'il y a des domaines à améliorer, le rapport fournira des conseils sur la manière de les optimiser.

Examinons deux exemples de rapport Lighthouse pour voir la différence entre un site ayant des Core Web Vitals sains et un site qui n'en a pas.

Exemple optimisé

Pour voir un exemple de fonctionnement de Lighthouse, nous utiliserons notre page d'accueil.

• Ouvrez Chrome.
• Dans une fenêtre de navigation privée, accédez à https://nextjs.org.
• Ouvrez DevTools et cliquez sur l'onglet Lighthouse.
• Cliquez sur Générer un rapport.

Cette action exécutera un rapport qui devrait prendre moins de 60 secondes.

Remarque : Il est important d'exécuter les rapports dans une fenêtre de navigation privée, car les plugins tiers peuvent affecter vos résultats.

De plus, les bloqueurs de publicité peuvent empêcher le chargement de scripts, ce qui donnerait un audit incomplet. Pensez à configurer un profil persona propre pour mesurer les performances.

Voici un exemple de rapport :

Exemple non optimisé

Pour les besoins de ce tutoriel, nous avons créé une application sans aucune optimisation.

Configuration du projet

Il s'agit d'une application basique non optimisée qui permet aux visiteurs de faire deux choses : rechercher un pays pour obtenir sa population et cliquer sur un bouton pour lire une fenêtre modale. Cette application est conçue pour imiter la réalité du travail sur des applications volumineuses où l'utilisation de bibliothèques tierces ne peut être évitée.

Télécharger le code de départ

npx create-next-app@latest nextjs-lighthouse --use-npm --example "https://github.com/vercel/next-learn/tree/main/seo"

Exécuter une build de production

Pour obtenir des rapports précis de Lighthouse, votre application doit toujours être testée avec une build de production. Pour exécuter une build de production, accédez au répertoire du projet :

cd nextjs-lighthouse

Construisez votre application en exécutant next build et démarrez le serveur en mode production en exécutant next start.

npm run build && npm run start

Exécutons un rapport Lighthouse avec Chrome DevTools. Une fois le rapport terminé, commençons à optimiser le site et à améliorer les vitals.

Pour aller plus loin

• Google Chrome : Calculateur de score Lighthouse