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

Milica Mihajlija

Une fois que vous avez défini un budget de performances, vous devez configurer le processus de création pour en garder la trace. Plusieurs outils vous permettent de définir des seuils pour les métriques de performances sélectionnées et vous avertit si vous dépassez votre budget. Découvrez-le sans attendre. comment choisir celui 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 différents domaines clés : performances, accessibilité, bonnes pratiques et performances de votre site en tant que progressive web app.

La version en ligne de commande de Lighthouse (v5+) 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 les 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 définis, les budgets sont définis dans la nouvelle colonne "Over Budget" (Hors budget). indique si vous dépassez des limites.

</ph> <ph type="x-smartling-placeholder">

Indices de performances 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 assets.

Activez les indices de performance dans webpack.config.js pour obtenir des avertissements ou des erreurs de ligne de commande lorsque la taille de votre bundle dépasse la limite. C'est un excellent moyen d'être attentif à la taille des assets tout au long du développement.

Après l'étape de compilation, webpack génère une liste d'éléments avec un code couleur et leur taille. Tout dépassement du budget est surligné en jaune.

</ph> <ph type="x-smartling-placeholder">

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

</ph> <ph type="x-smartling-placeholder">

Les budgets sont comparés à des tailles d'assets non compressées. 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.

</ph> <ph type="x-smartling-placeholder">

Taille du bundle

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 à tester.

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

Bundlesize génère les résultats du test avec un code couleur sur une ligne.

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Taille du bundle pour l'intégration continue

Vous tirerez pleinement parti de la taille de bundle si vous l'intégrez à une intégration continue afin d'appliquer automatiquement les limites de taille aux demandes d'extraction. Si le test bundlesize échoue, la demande d'extraction n'est pas fusionnée. Il fonctionne pour les demandes d'extraction sur GitHub avec Travis CI, CircleCI, Wercker et Drone.

</ph> <ph type="x-smartling-placeholder">

Votre application est peut-être rapide aujourd'hui, mais l'ajout de code peut souvent changer cela. Vérifier les demandes d'extraction avec bundlesize vous permet d'éviter les régressions de performances. Bootstrap, Tinder, Trivago et bien d'autres l'utilisent pour maîtriser leurs budgets.

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

Par défaut, il teste les tailles d'éléments compressées avec gzip. Vous pouvez utiliser l'option de compression pour activer la compression brotli ou la désactiver complètement.

Bot Lighthouse

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 garder un œil sur un seul chiffre que les budgets d'assets individuels. Les scores Lighthouse tiennent compte de nombreux facteurs.

</ph> <ph type="x-smartling-placeholder">

Le bot Lighthouse exécute 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 passent en dessous du seuil que vous avez défini, le bot Lighthouse peut empêcher la fusion d'une demande d'extraction. ⛔

</ph> <ph type="x-smartling-placeholder">

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 en cas de modifications du code.

</ph> <ph type="x-smartling-placeholder">

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 détails sur les goulots d'étranglement et des conseils pour des optimisations simples.

Résumé