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 type="x-smartling-placeholder">![Section "Budgets" du rapport Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Sortie Webpack avec mise en surbrillance de bundle.js](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Avertissement concernant la taille du bundle Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Recommandation d'optimisation des performances Webpack](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Échec du test de la CLI bundlesize](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=19&hl=fr)
![Réussir le test de la CLI bundlesize](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![État de la vérification de Bundlesize sur GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=19&hl=fr)
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
![Bot Lighthouse](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Notes Lighthouse ⌥](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![État de la vérification du bot Lighthouse sur GitHub](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=19&hl=fr)
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 type="x-smartling-placeholder">![Scores de reporting Lighthouse sur demande d'extraction](https://web.dev/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=19&hl=fr)
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é
Outil | CLI | CI | Résumé |
---|---|---|---|
Phare | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
taille du lot | ✔️ | ✔️ |
|
Bot Lighthouse | ❌ | ✔️ |
|