Auditorías de desempeño para sitios web con Lighthouse

El desempeño (performance) de un sitio web es un elemento clave en su diseño de experiencia de usuario, pero su medición y optimización depende de muchos factores. Lighthouse es una herramienta para automatizar la medición y diagnóstico de los indicadores de desempeño de un sitio.

El concepto de desempeño (performance) de un sitio web se refiere a la percepción de muchos elementos y factores en la interacción entre un usuario y el sitio. Entre estos elementos están el tiempo de carga del sitio, su usabilidad percibida, su accesibilidad, la facilidad para encontrarlo en un buscador, entre muchos otros.

En el proceso de diseño de la experiencia de usuario, es importante poder convertir los elementos de desempeño en objetivos cuantitativos (métricas) que describan la implementación del desempeño y que sobre las que se puedan definir metas para poder hacer trabajo de optimización y mejora.

Lighthouse para medición de desempeño

Lighthouse es una herramienta opensource para mejorar la calidad del desempeño de una página web. Se puede utilizar en cualquier página web, pública o en proceso de desarrollo, y ofrece auditorías de desempeño, accesibilidad, buenas prácticas de diseño, posicionamiento en buscadores y otras más.

Lighthouse puede ejecutarse directo desde Google Chrome o desde la línea de comandos en una consola como un módulo de node.js.

Cómo realizar una auditoría con Lighthouse desde Chrome

En sus primeras versiones Lighthouse se instalaba en Chrome como una extensión. Más recientemente ya viene incluido en las herramientas para desarrolladores (developer tools) de Chrome:

**Lighthouse** se puede encontrar en la opción «**Herramientas del desarrollador**» en Google Chrome

Al abrir las herramientas de desarrollador en Chrome (también con el shortcut Ctrl+Shift+i) hay que buscar la pestaña de Auditorías (audits) en la parte superior:

Las auditorías de Lighthouse se encuentran en las opciones de navegación en la parte superior (audits)

En la pestaña de Auditorías (audits) se encuentran las diferentes auditorías que se pueden realizar sobre la página web. Se puede elegir realizarlas en modo para dispositivos móviles o para escritorio, así como simular un ancho de banda reducido para la prueba o no:

Las opciones para realizar auditorías en una página web con Lighthouse, para desktop o móvles, y con diferentes anchos de banda.

Con la página que se quiere evaluar abierta en el navegador, se seleccionan las auditorías que se quieren ejecutar (desempeño, progressive web app, mejores prácticas, accesibilidad y/o optimización para buscadores) y se ejecutan las auditorías.

El análisis tomará algunos minutos, dependiendo del tamaño y complejidad de la página:

Lighthouse ejecutando auditorías de desempeño sobre una página web

Terminada la revisión, Lighthouse genera un informe sobre el desempeño de la página, con indicadores que van de 0 a 100. A partir de ahí, se utiliza la información en las auditorías fallidas como indicadores de desempeño de la página.

Reporte de las auditorías de Lighthouse sobre una página web, con los indicadores numéricos y el análisis sobre lo que funciona y lo que se puede mejorar.

Cada auditoría tiene información y enlaces de referencia que explican por qué la auditoría es importante y cómo resolver los problemas que se encontraron para mejorar su desempeño.

Reporte de auditoría de desempeño de una página web en Lighthouse, con indicadores cuantitativos de velocidad de carga, tiempo de renderizado, indexación, etc. y recomendaciones sobre qué es necesario mejorar y por qué.

Cómo realizar una auditoría con Lighthouse desde la línea de comandos

Las auditorías de Lighthouse pueden ejecutarse desde la línea de comandos en una consola con node.js. Para hacerlo, es necesario:

Tener instalada una versión actualizada de Chrome.
Tener instalada una versión estable de node.js
Instalar el módulo de Lighthouse para node.js:

npm install -g lighthouse

Para correr las auditorías se utiliza el siguiente comando, sustituyendo <url> por la dirección de la página que se quiere evaluar:

lighthouse <url>

Para ver las opciones que se pueden configurar en esta modalidad, se escribe:

lighthouse --help

Esta opción es muy útil para analizar muchas páginas de forma automatizada, en lugar de revisarlas manualmente una por una con Chrome. La opción de Lighthouse CLI (Command Line Interface) se puede usar en combinación con el Sitemap de un sitio web para auditar todas sus páginas en una sola sesión.

Gestión de reportes de Lighthouse

Descarga de reportes de Lighthouse, junto al símbolo de «+»

Lighthouse genera los reportes de sus auditorías en de texto archivos con formato JSON. Para obtenerlos, se pueden descargar dando clic en la la flecha de «Download report» en la esquina superior derecha de la herramienta.

Para hacerlo desde la consola, se utiliza este comando:

lighthouse --output json --nombre-del-archivo

Para compartir los reportes, se puede utilizar Lighthouse Viewer, una herramienta que genera una URL para compartir el reporte:

Lighthouse Viewer, una herramienta para analizar y compartir los resultados de las auditorías

Ejemplo de un reporte de auditoría en Lighthouse Viewer

Conclusión

Como herramienta, Lighthouse realiza un análisis automatizado y cuantitativo de muchos factores que afectan el desempeño de un sitio web. El reporte que genera puede utilizarse como base para tomar medidas de optimización tanto en diseño, contenido y desarrollo, y por consecuencia, mejorar la experiencia de sus usuarios.

Hay que tener en cuenta que Lighthouse no cubre todos los factores de análisis de desempeño y que no es la única evaluación que debe realizarse. Hay otros métodos de evaluación de factores cualitativos como las heurísticas de usabilidad que deben realizarse para complementar los resultados de una auditoría de Lighthouse.