{"id":10910,"date":"2024-05-07T16:52:41","date_gmt":"2024-05-07T16:52:41","guid":{"rendered":"https:\/\/wcanvas.com\/?post_type=resources&p=10910"},"modified":"2024-12-09T17:10:47","modified_gmt":"2024-12-09T17:10:47","slug":"como-simular-pagespeed-insights-con-lighthouse","status":"publish","type":"resources","link":"https:\/\/wcanvas.com\/es\/resource\/como-simular-pagespeed-insights-con-lighthouse\/","title":{"rendered":"C\u00f3mo simular PageSpeed Insights con Lighthouse"},"content":{"rendered":"\n

\u00bfAlguna vez no pudiste usar PageSpeed<\/a> Insights para probar tus sitios cuando trabaj\u00e1s con desarrollos locales o protecciones de autenticaci\u00f3n b\u00e1sica, como las de sitios transferibles de WPEngine<\/a> y otros entornos protegidos? Esta limitaci\u00f3n requiere una soluci\u00f3n que te permita aproximar los resultados de PageSpeed Insights con una herramienta que pueda acceder a entornos protegidos.<\/p>\n\n\n\n

No poder probar el rendimiento, SEO, accesibilidad y mejores pr\u00e1cticas obstaculiza tu capacidad para optimizar y monitorear eficazmente tu sitio durante el desarrollo.<\/p>\n\n\n\n

Para abordar esto, desarrollamos una soluci\u00f3n utilizando la herramienta de c\u00f3digo abierto de Google, Lighthouse<\/a>, para realizar auditor\u00edas de rendimiento local detalladas bajo condiciones similares a las de PageSpeed Insights.<\/p>\n\n\n\n

Con la ayuda de Node.js y Express, utilizaremos Lighthouse para aproximar las auditor\u00edas proporcionadas por PageSpeed Insights y ayudarte a optimizar el rendimiento de tu sitio en cada etapa del desarrollo.<\/p>\n\n\n\n

\u00bfPor qu\u00e9 necesitamos soluciones de prueba de rendimiento local?<\/h2>\n\n\n\n

Usar Lighthouse localmente permite a los desarrolladores personalizar el entorno de prueba seg\u00fan sus necesidades espec\u00edficas, lo cual incluye manejar URLs protegidos por caracter\u00edsticas de autenticaci\u00f3n b\u00e1sica. Dado que PageSpeed Insights no puede auditar sitios protegidos, los desarrolladores que quieran optimizar el rendimiento antes del lanzamiento necesitan idear una soluci\u00f3n local que ofrezca beneficios similares.<\/p>\n\n\n\n

C\u00f3mo configurar un entorno de pruebas local con Node.js y Express<\/h2>\n\n\n\n

Nuestra soluci\u00f3n implica configurar un servidor Node.js usando Express para gestionar las solicitudes de pruebas de rendimiento.<\/p>\n\n\n\n

Esta configuraci\u00f3n te permite aproximar los resultados que obtendr\u00edas de PageSpeed Insights y ofrece la flexibilidad para manejar escenarios que la herramienta en l\u00ednea o el navegador de lighthouse no soportan directamente.<\/p>\n\n\n\n

Paso 1: Instalar Node.js y paquetes requeridos<\/h3>\n\n\n\n

Asegurate de tener Node.js instalado en tu sistema. Luego, cre\u00e1 un nuevo directorio para tu proyecto e instal\u00e1 los paquetes necesarios:<\/p>\n\n\n\n

mkdir lighthouse-server\ncd lighthouse-server\nnpm init -y\nnpm install express lighthouse chrome-launcher<\/code><\/pre>\n\n\n\n
Paso 2: Configurar el servidor Express<\/strong><\/h3>\n\n\n\n
Crea un archivo llamado server.js<\/code> y configur\u00e1 tu servidor Express con el siguiente c\u00f3digo:<\/p>\n\n\n\n
const express = require('express');\nconst fs = require('fs');\nconst { v4: uuidv4 } = require('uuid');\nconst path = require('path');\n\nconst PORT = 3000;\nlet lighthouse;\nlet chromeLauncher;\n\n(async () => {\n    lighthouse = (await import('lighthouse')).default;\n    chromeLauncher = await import('chrome-launcher');\n})();\n\nconst app = express();\napp.use(express.json());\n\nconst resultsDirectory = path.join(__dirname, 'results');\nif (!fs.existsSync(resultsDirectory)){\n    fs.mkdirSync(resultsDirectory, { recursive: true });\n}\n\nconst getSafeFilename = (url) => {\n    return encodeURIComponent(url).replace(\/[%]\/g, '');\n}\n\nconst loadHistory = (url) => {\n    const filePath = path.join(resultsDirectory, `${getSafeFilename(url)}.json`);\n    if (fs.existsSync(filePath)) {\n        return JSON.parse(fs.readFileSync(filePath, 'utf8'));\n    }\n    return [];\n};\n\nconst saveHistory = (url, data) => {\n    const filePath = path.join(resultsDirectory, `${getSafeFilename(url)}.json`);\n    fs.writeFileSync(filePath, JSON.stringify(data, null, 2));\n};\n\nconst runLighthouse = async (url, config, outputFilename) => {\n    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});\n    const options = {\n        logLevel: 'info',\n        output: 'html',\n        onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],\n        port: chrome.port,\n        ...config,\n    };\n\n    try {\n        const runnerResult = await lighthouse(url, options);\n        fs.writeFileSync(outputFilename, runnerResult.report);\n        return {\n            scores: {\n                performance: runnerResult.lhr.categories.performance.score * 100,\n                accessibility: runnerResult.lhr.categories.accessibility.score * 100,\n                bestPractices: runnerResult.lhr.categories['best-practices'].score * 100,\n                seo: runnerResult.lhr.categories.seo.score * 100\n            },\n            reportPath: outputFilename\n        };\n    } finally {\n        await chrome.kill();\n    }\n};\n\napp.post('\/pagespeed-test', async (req, res) => {\n    const { url } = req.body;\n    if (!url) {\n        return res.status(400).json({ error: 'URL is required' });\n    }\n\n    const id = uuidv4();\n    const mobileConfig = {\n        throttling: {\n            rttMs: 150, \/\/ tiempo ida y vuelta en milisegundos\n            throughputKbps: 1638.4, \/\/ rendimiento en kilobits por segundo\n            cpuSlowdownMultiplier: 4 \/\/ cuanto m\u00e1s lento se supone que es el CPU\n        },\n        emulatedFormFactor: 'mobile',\n        channel: 'cli'\n    };\n    \n    const desktopConfig = {\n        throttling: {\n            rttMs: 40, \/\/ tiempo ida y vuelta en milisegundos\n            throughputKbps: 5000, \/\/ rendimiento en kilobits por segundo\n            cpuSlowdownMultiplier: 1 \/\/ sin ralentizaci\u00f3n\n        },\n        emulatedFormFactor: 'desktop',\n        channel: 'cli'\n    };\n\n    try {\n        const mobileResults = await runLighthouse(url, mobileConfig, `reports\/${id}_mobile.html`);\n        const desktopResults = await runLighthouse(url, desktopConfig, `reports\/${id}_desktop.html`);\n\n        const result = {\n            url,\n            timestamp: new Date().toISOString(),\n            mobile: {\n                scores: mobileResults.scores,\n                reportUrl: `http:\/\/localhost:${PORT}\/reports\/${id}_mobile.html`\n            },\n            desktop: {\n                scores: desktopResults.scores,\n                reportUrl: `http:\/\/localhost:${PORT}\/reports\/${id}_desktop.html`\n            }\n        };\n\n        \/\/ Cargar historial existente sin agregar el resultado actual\n        const history = loadHistory(url);\n\n        \/\/ Agregar el resultado actual de la prueba al historial para futuras solicitudes\n        const updatedHistory = [...history, result];\n        saveHistory(url, updatedHistory);\n\n        \/\/ Devolver el resultado actual y el historial (excluyendo la prueba actual)\n        res.json({\n            currentResult: result,\n            history: history\n        });\n    } catch (error) {\n        res.status(500).json({ error: 'Error al ejecutar las pruebas de Lighthouse' });\n    }\n});\n\napp.use('\/reports', express.static('reports'));\napp.listen(PORT, () => {\n    console.log(`Servidor corriendo en :${PORT}`);\n});<\/code><\/pre>\n\n\n\n
Configuraciones<\/h4>\n\n\n\n
Configuraciones para M\u00f3viles<\/h5>\n\n\n\n
Aceleraci\u00f3n<\/strong>. Las pruebas m\u00f3viles est\u00e1n configuradas con una aceleraci\u00f3n significativa en la red y la CPU. La aceleraci\u00f3n deliberada simula las condiciones de un dispositivo m\u00f3vil accediendo al sitio a trav\u00e9s de una t\u00edpica red 3G o 4G, que es m\u00e1s lenta que la mayor\u00eda de las conexiones por cable o Wi-Fi.<\/p>\n\n\n\n
La aceleraci\u00f3n incluye:<\/p>\n\n\n\n