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 de la page.
Installer Lighthouse
LightWallet est disponible dans la version de ligne de commande de Lighthouse v5 et versions ultérieures.
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é (Time to Interactive).
- 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 demandes correspondant au nombre de requêtes adressé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'indicateur --budget-path. Cet indicateur indique à Lighthouse l'emplacement de votre fichier de budget.
lighthouse https://example.com --budget-path=./budget.json
Voir les résultats
Si LightWallet a été correctement configuré, le rapport Lighthouse comportera une section Budgets dans la catégorie Performances.
Dans la version JSON du rapport Lighthouse, les résultats de Lightwallet figurent dans les résultats de l'audit performance-budget.