Lighthouse es una herramienta de código abierto que se utiliza para generar el rendimiento de cualquier página web. Podemos usar CLI o la extensión de Chrome para generar una puntuación de Lighthouse para una página web, pero aquí está la descripción de cómo generar una puntuación de Lighthouse de varias URL presentes en un archivo CSV y generar un archivo CSV que consta de puntuaciones de rendimiento, accesibilidad y mejores prácticas . y SEO para vistas móviles y de escritorio .
Usamos el paquete lighthouse proporcionado por npm y también usamos el lanzador de Chrome para generar decenas de sitios web. Podemos descargar el paquete y usarlos de la siguiente manera:
-
npm install --save lighthouse
-
const lighthouse = require("lighthouse")
Después de importar este paquete de terceros, estamos listos para continuar con la importación del archivo URL utilizando el método readFileSync del paquete fs predeterminado proporcionado por NodeJS y almacenamos estas URL en una array desde la cual recorreremos todas las URL y generaremos puntajes para estrategias móviles y de escritorio.
Enfoque:
siga los pasos a continuación para lograr la solución:
- Lea el archivo csv usando el paquete fs npm predeterminado.
- Convierta los datos a String y divídalos en una array.
- Empuje las columnas de encabezado en la array.
- Inicie Chrome usando el método chromeLauncher.launch().
- Cree un objeto de opciones para especificar los detalles del formato de salida, las categorías, las auditorías y otras personalizaciones, si desea tener alguna en su salida.
- Recorra todas las URL que tenemos en nuestra array y haga lo siguiente para cada una de ellas:
- Ejecute dos bucles: uno para dispositivos móviles y otro para computadoras de escritorio especificando options.strategy=mobile u options.strategy=desktop.
- Llame a la función del faro con url ie array[i] como el primer parámetro y el objeto de opciones como el segundo parámetro.
- El objeto devuelto almacenaría los detalles recibidos después de llamar a la función de faro.
- Podemos acceder a los puntajes de este objeto y dado que los puntajes están en decimales, debemos multiplicarlo por 100 para obtenerlo como porcentaje.
- Empuje las puntuaciones en el resultado.
- Agregue el resultado en un archivo csv y finalice el programa.
Nombre de archivo: app.js
// Import the required npm packages
const fs = require("fs");
const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");
// Read the csv file and store the
// urls in an array
var array = fs.readFileSync("URLs.csv")
.toString().split("\n");
// Declare a resultant array to store
// the generated scores and initialize
// it with headings
let result = [];
result.push(
", URL, Mobile_Performance, Mobile_Accessibility,
Mobile_Best_Practices, Mobile_SEO,
Desktop_Performance, Desktop_Accessibility,
Desktop_Best_Practices, Desktop_SEO"
);
// The async await is used to ensure
// non-blocking code execution
(async () => {
const chrome = await chromeLauncher
.launch({ chromeFlags: ["--headless"] })
// Declaring an object to specify score
// for what audits, categories and type
// of output that needs to be generated
const options = {
logLevel: "info",
output: "csv",
onlyCategories: ["performance",
"accessibility", "best-practices", "seo"],
audits: [
"first-meaningful-paint",
"first-cpu-idle",
"byte-efficiency/uses-optimized-images",
],
port: chrome.port,
};
// Traversing through each URL
for (i in array) {
// Separate strategy for Mobile
// and Desktop view
for (let x = 0; x < 2; x++) {
let configuration = "";
if (x == 0) options.strategy = "mobile";
else options.strategy = "desktop";
const runnerResult =
await lighthouse(array[i], options);
// Current report
const reportCsv = runnerResult.report;
// URL to be put only for first iteration
// (mobile and not separately for desktop)
if (x == 0) {
result.push("\n");
result.push(runnerResult.lhr.finalUrl);
}
// If score can't be determined, NA is
// put in the corresponding field.
if (runnerResult.lhr.categories.performance.score) {
result.push(runnerResult.lhr
.categories.performance.score * 100)
} else {
result.push("NA")
}
if (runnerResult.lhr.categories.accessibility.score) {
result.push(runnerResult.lhr
.categories.accessibility.score * 100)
} else {
result.push("NA");
}
if (runnerResult.lhr.categories["best-practices"].score) {
result.push(runnerResult.lhr
.categories["best-practices"].score * 100)
} else {
result.push("NA");
}
if (runnerResult.lhr.categories.seo.score) {
result.push(runnerResult.lhr
.categories.seo.score * 100)
} else {
result.push("NA");
}
}
}
// Append the result in a report.csv
// file and end the program
fs.appendFileSync("lhreport.csv", result);
await chrome.kill();
})();
Aporte:
Ejecutar el archivo app.js después de instalar el paquete lighthouse.
Producción:
El archivo de informe de Lighthouse (lhreport.csv) se genera después de ejecutar el programa