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 compilation pour en effectuer le suivi. Plusieurs outils vous permettent de définir des seuils pour les métriques de performances sélectionnées et d'être averti si vous dépassez votre budget. Découvrez 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 plusieurs 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 (version 5 ou ultérieure) 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. Après les avoir définis, la nouvelle colonne "Over Budget" (Hors budget) vous indique si vous dépassez l'une ou l'autre des limites.

Conseils pour améliorer les performances du Webpack

Webpack est un puissant outil de création qui vous permet d'optimiser la diffusion de votre code auprès des utilisateurs. Il est également possible de définir des budgets de performances en fonction de la taille des assets.

Activez les indicateurs 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 à la taille des assets tout au long du développement.

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

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.

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

Taille du bundle

Bundlesize est un package npm simple qui teste la taille de l'élément 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 renvoie les résultats de test avec un code couleur sur une ligne.

Taille de bundle pour CI

Pour exploiter pleinement le bundlesize, intégrez-le à un CI pour appliquer automatiquement des limites de taille aux demandes d'extraction. Si le test bundlesize échoue, cette demande d'extraction n'est pas fusionnée. Cette solution fonctionne pour les requêtes d'extraction sur GitHub avec Travis CI, CircleCI, Wercker et Drone.

Vous disposez peut-être déjà d'une application rapide, mais l'ajout d'un nouveau code peut souvent changer la donne. La vérification des demandes d'extraction avec bundlesize vous permet d'éviter les régressions de performances. Bootstrap, Tinder, Trivago et bien d'autres l'utilisent pour contrôler 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 passer à la compression Brotli ou pour la désactiver complètement.

Lighthouse Bot

Lighthouse Bot s'intègre à Travis CI et applique les 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'éléments individuels et que les scores Lighthouse tiennent compte de nombreux éléments.

Le bot Lighthouse 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 à l'aide des 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, le bot Lighthouse peut empêcher la fusion de la demande d'extraction. ⛔

Lighthouse Bot commente ensuite votre demande d'extraction avec les scores mis à jour. Il s'agit d'une fonctionnalité intéressante qui favorise les discussions sur les performances lors des modifications du code.

Si votre demande d'extraction est bloquée par un faible score Lighthouse, exécutez un audit avec la CLI Lighthouse ou dans les Outils de développement. Elle génère un rapport contenant des informations détaillées sur les goulots d'étranglement et des suggestions d'optimisations simples.

Résumé