Intégrer des budgets de performances dans votre processus de création

Une fois que vous avez défini un budget de performances, il est temps de configurer le processus de compilation pour en assurer le suivi. Plusieurs outils vous permettent de définir des seuils pour les métriques de performances choisies et de vous avertir si vous dépassez votre budget. Découvrez comment choisir celle qui correspond le mieux à vos besoins et à votre configuration actuelle. 🕵️‍♀️

Budgets de performances Lighthouse

Lighthouse est un outil d'audit qui teste les sites dans plusieurs domaines clés : performances, accessibilité, bonnes pratiques et performances de votre site en tant qu'application Web progressive.

La version de ligne de commande de Lighthouse (version 5 et ultérieures) permet de définir des budgets de performances en fonction des éléments suivants :

  • taille de la ressource
  • nombre de ressources

Vous pouvez définir des budgets pour l'un des types de ressources suivants :

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

Les budgets sont définis dans un fichier JSON. Une fois que vous les avez définis, la nouvelle colonne "Dépassement du budget" vous indique si vous dépassez des limites.

Section "Budgets" du rapport Lighthouse
Section "Budgets" du rapport Lighthouse

Conseils sur les performances de Webpack

Webpack est un outil de création puissant qui permet d'optimiser la façon dont votre code est transmis aux utilisateurs. Il permet également de définir des budgets de performances en fonction de la taille des composants.

Activez les conseils de performances dans webpack.config.js pour recevoir des avertissements ou des erreurs de ligne de commande lorsque la taille de votre bundle dépasse la limite. C'est un excellent moyen de rester attentif aux tailles des éléments tout au long du développement.

Après l'étape de compilation, webpack génère une liste de composants et de leurs tailles, codée par couleur. Tout dépassement est mis en surbrillance jaune.

Sortie Webpack mettant en évidence bundle.js
Le fichier bundle.js en surbrillance dépasse votre budget

La limite par défaut pour les composants et les points d'entrée est de 250 ko. Vous pouvez définir vos propres cibles dans le fichier de configuration.

Avertissement concernant la taille du bundle Webpack
Avertissement concernant la taille du bundle Webpack ⚠️

Les budgets sont comparés aux tailles des éléments non compressés. La taille du code JavaScript non compressé est liée au temps d'exécution. L'exécution de fichiers volumineux peut prendre beaucoup de temps, en particulier sur les appareils mobiles.

Recommandation d'optimisation des performances Webpack
Bonus : webpack ne vous avertit pas seulement, il vous donne également des recommandations pour réduire la taille de vos bundles. 💁

Bundlesize

Bundlesize est un package npm simple qui teste la taille des éléments par rapport à un seuil que vous avez défini. Il peut s'exécuter localement et s'intégrer à votre CI.

CLI Bundlesize

Exécutez la CLI bundlesize en spécifiant un seuil et le fichier que vous souhaitez tester.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize affiche les résultats des tests en code couleur sur une seule ligne.

Échec du test de la CLI bundlesize
Le test de la CLI bundlesize échoue ❌
Réussir le test de la CLI bundlesize
Le test de la CLI bundlesize réussit ✔️

Taille du bundle pour l'intégration continue

Vous tirerez le meilleur parti de bundlesize si vous l'intégrez à une CI pour appliquer automatiquement des limites de taille aux requêtes pull. Si le test de taille de bundle échoue, la demande de tirage n'est pas fusionnée. Il fonctionne pour les demandes de tirage sur GitHub avec Travis CI, CircleCI, Wercker et Drone.

État de la vérification de la taille du bundle sur GitHub
État de la vérification de la taille du bundle sur GitHub

Vous avez peut-être une application rapide aujourd'hui, mais l'ajout de nouveau code peut souvent changer la donne. Vérifier les requêtes pull avec bundlesize vous aidera à éviter les régressions de performances. Bootstrap, Tinder, Trivago et de nombreuses autres entreprises l'utilisent pour contrôler leurs budgets.

Avec bundlesize, vous pouvez définir des seuils pour chaque fichier séparément. Cela est particulièrement utile si vous divisez un bundle dans votre application.

Par défaut, il teste les tailles des composants compressés avec gzip. Vous pouvez utiliser l'option de compression pour passer à la compression Brotli ou la désactiver complètement.

Bot Lighthouse

Lighthouse Bot

Lighthouse Bot s'intègre à Travis CI et applique des budgets en fonction de l'une des cinq catégories d'audit Lighthouse. Par exemple, un budget de 100 pour votre score de performances Lighthouse. Il est parfois plus simple de surveiller un seul chiffre que les budgets des composants individuels, et les scores Lighthouse prennent en compte de nombreux éléments.

Scores Lighthouse 💯
Scores Lighthouse 💯

Lighthouse Bot effectue un audit après le déploiement d'un site sur un serveur de préproduction. Dans .travis.yml, définissez des budgets pour des catégories Lighthouse spécifiques avec les options --perf, --a11y, --bp, --seo ou --pwa. Essayez de rester dans la zone verte avec des scores d'au moins 90.

after_success:
 
- ./deploy.sh # Deploy the PR changes to staging server
 
- npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Si les scores d'une demande d'extraction sur GitHub sont inférieurs au seuil que vous avez défini, Lighthouse Bot peut empêcher la fusion de la demande d'extraction. ⛔

État de la vérification du bot Lighthouse sur GitHub
État de la vérification du robot Lighthouse sur GitHub

Le bot Lighthouse commente ensuite votre demande d'extraction avec les scores mis à jour. Il s'agit d'une fonctionnalité intéressante qui encourage les discussions sur les performances à mesure que le code change.

Scores des rapports Lighthouse sur les demandes d'extraction
Scores des rapports Lighthouse sur la demande d'extraction 💬

Si votre demande d'extraction est bloquée par un mauvais score Lighthouse, effectuez un audit avec la CLI Lighthouse ou dans les outils de développement. Il génère un rapport contenant des informations détaillées sur les goulots d'étranglement et des conseils pour des optimisations simples.

Résumé

Outil CLI CI Résumé
Phare ✔️
  • Budgets pour différents types de ressources en fonction de leur taille ou de leur nombre
webpack ✔️
  • Budgets basés sur les tailles des composants générés par webpack.
  • Vérifie les tailles non compressées.
bundlesize ✔️ ✔️
  • Budgets basés sur les tailles de ressources spécifiques.
  • Vérifie les tailles compressées ou non compressées.
Bot Lighthouse ✔️
  • Budgets basés sur les scores Lighthouse