Utiliser Lighthouse pour les budgets de performances

Katie Hempenius
Katie Hempenius

Lighthouse est désormais compatible avec les budgets de performances. Cette fonctionnalité, appelée LightWallet, peut être configurée en moins de cinq minutes. Elle fournit des commentaires sur les métriques de performances, ainsi que sur la taille et la quantité des ressources de la page.

Installer Lighthouse

LightWallet est disponible dans la version de ligne de commande de Lighthouse 5 ou version ultérieure.

Pour commencer, installez Lighthouse:

npm install -g lighthouse

Créer un budget

Créez un fichier nommé budget.json. Dans ce fichier, ajoutez le code JSON suivant:

[
 
{
   
"path": "/*",
   
"timings": [
     
{
       
"metric": "interactive",
       
"budget": 3000
     
},
     
{
       
"metric": "first-meaningful-paint",
       
"budget": 1000
     
}
   
],
   
"resourceSizes": [
     
{
       
"resourceType": "script",
       
"budget": 125
     
},
     
{
       
"resourceType": "total",
       
"budget": 300
     
}
   
],
   
"resourceCounts": [
     
{
       
"resourceType": "third-party",
       
"budget": 10
     
}
   
]
 
}
]

Cet exemple de fichier budget.json définit cinq budgets distincts:

  • Un budget de 3 000 ms pour le délai avant l'interactivité.
  • Un budget de 1 000 ms pour First Meaningful Paint
  • Un budget de 125 Ko pour la quantité totale de code JavaScript sur la page.
  • Un budget de 300 Ko pour la taille globale de la page.
  • Un budget de 10 requêtes pour le nombre de requêtes envoyées à des origines tierces.

Pour obtenir la liste complète des métriques de performances et des types de ressources compatibles, consultez la section Budgets de performances de la documentation Lighthouse.

Exécuter Lighthouse

Exécutez Lighthouse à l'aide de l'option --budget-path. Cet indicateur indique à Lighthouse l'emplacement de votre fichier de budget.

lighthouse https://example.com --budget-path=./budget.json

Afficher les résultats

Si LightWallet a été correctement configuré, le rapport Lighthouse contient une section Budgets dans la catégorie Performances.

Section "Budgets" du rapport Lighthouse

Dans la version JSON du rapport Lighthouse, les résultats Lightwallet se trouvent dans les conclusions de l'audit performance-budget.