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 informations sur les métriques de performances, ainsi que sur la taille et la quantité des ressources des pages.
Installer Lighthouse
LightWallet est disponible dans la version en ligne de commande de Lighthouse v5+.
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 interactivité.
- Un budget de 1 000 ms pour "First Meaningful Paint"
- Un budget de 125 Ko pour la quantité totale de 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 acceptés, 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é configuré correctement, le rapport Lighthouse comportera une section Budgets dans la catégorie Performances.
Dans la version JSON du rapport Lighthouse, les résultats de Lightwallet sont disponibles dans les résultats de l'audit performance-budget.