Lighthouse ahora admite presupuestos de rendimiento. Esta función, conocida como LightWallet, se puede configurar en menos de cinco minutos y proporciona comentarios sobre las métricas de rendimiento y el tamaño y la cantidad de los recursos de la página.
Instalar Lighthouse
LightWallet está disponible en la versión de línea de comandos de Lighthouse v5+.
Para comenzar, instala Lighthouse:
npm install -g lighthouse
Crea un presupuesto
Crea un archivo llamado budget.json. En este archivo, agrega el siguiente JSON:
[
{
"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
}
]
}
]
En este archivo budget.json de ejemplo, se establecen cinco presupuestos independientes:
- Un presupuesto de 3,000 ms de tiempo de carga.
- Un presupuesto de 1000 ms para una primera pintura significativa
- Un presupuesto de 125 KB por la cantidad total de JavaScript en la página.
- Un presupuesto de 300 KB para el tamaño general de la página
- Un presupuesto de 10 solicitudes para el número de solicitudes realizadas a orígenes externos.
Para obtener una lista completa de las métricas de rendimiento y los tipos de recursos admitidos, consulta la sección Presupuestos de rendimiento de los documentos de Lighthouse.
Ejecutar Lighthouse
Ejecuta Lighthouse con la marca --budget-path. Esta marca le indica a Lighthouse la ubicación de tu archivo de presupuesto.
lighthouse https://example.com --budget-path=./budget.json
Ver los resultados
Si LightWallet se configuró correctamente, el informe de Lighthouse contendrá una sección Presupuestos dentro de la categoría Rendimiento.
En la versión JSON del informe de Lighthouse, los resultados de Lighthouse se pueden encontrar en los resultados de la auditoría de performance-budget.