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, 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.

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.

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.

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.

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.

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.

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

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. ⛔

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.

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é