¿Cómo puedo analizar el rendimiento con Unlighthouse?

¿Qué es Unlighthouse?

Unlighthouse es una herramienta de análisis de sitios web de código abierto que utiliza Lighthouse (una herramienta de auditoría de sitios web desarrollada por Google) para generar informes detallados sobre el rendimiento de su sitio web. Estas son algunas de las principales características y ventajas de la herramienta:

Características

• Gratuita y de código abierto
• Utiliza Lighthouse para generar informes detallados
• Analiza la velocidad de carga, el SEO, la accesibilidad y las mejores prácticas
• Permite personalizar las auditorías para adaptarlas a sus necesidades
• Puede ejecutarse desde la línea de comandos o mediante una interfaz gráfica de usuario

Ventajas

• Fácil de utilizar
• Proporciona informes detallados y fáciles de entender
• Ayuda a identificar problemas de rendimiento y a rectificarlos rápidamente
• Ayuda a mejorar la experiencia del usuario y el SEO de su sitio web
• Puede utilizarse para analizar cualquier sitio web, independientemente de su tamaño o complejidad

Con Unlighthouse puede identificar fácilmente los problemas de rendimiento de su sitio web y solucionarlos rápidamente. Esto puede ayudarle a mejorar la experiencia de usuario y el SEO de su sitio web, lo que puede traducirse en un aumento del tráfico y las conversiones.

¿Cómo se instala y configura Unlighthouse?

Para utilizar Unlighthouse, primero tiene que instalarlo y configurarlo. Aquí tienes una guía paso a paso para instalarlo y configurarlo:

1. Instalar Node.js: Unlighthouse se basa en Node.js, por lo que debe instalarlo en su ordenador antes de poder utilizar Unlighthouse. Puedes descargar Node.js desde https://nodejs.org/en/download/.
2. Instalar Chrome: Por defecto, Unlighthouse intentará utilizar la instalación de Chrome / Chromium de tu sistema. Si no hay ninguna, se instalará un binario de Chromium en tu sistema, pero esta última opción no funciona en todos los casos. Puedes descargar Chrome desde https://www.google.com/intl/fr_fr/chrome/.
3. Instalación de Unlighthouse: Una vez que hayas instalado Node.js, puedes instalar Unlighthouse utilizando npm (el gestor de paquetes de Node.js) y npx. Abra un símbolo del sistema y escriba los siguientes comandos:

npm install -g npx
npx unlighthouse --site <URL>Lenguaje del código: Shell Session (shell)

Si la última versión no funciona, prueba con una versión anterior, la lista está disponible en el repositorio de Github https://github.com/harlan-zw/unlighthouse/releases, por ejemplo:

npx unlighthouse@0.11.6 --site <URL>Lenguaje del código: Shell Session (shell)

Configuración de Unlighthouse

Por defecto, la herramienta funciona con opciones de línea de comandos, pero puede utilizar un archivo de configuración unlighthouse.config.ts ubicado en el directorio raíz.
Puede cambiar el nombre del archivo de configuración utilizando la opción configFile o la opción --config en la línea de comandos.

Unlighthouse puede configurarse mediante un archivo de configuración. Puede crear un archivo de configuración utilizando un editor de texto y guardando el archivo en formato JavaScript. He aquí un ejemplo de archivo de configuración:

export default {
  site: 'example.com',
  scanner: {
    exclude: ['/wp-admin/*']
  },
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttlingMethod: 'simulated'
  },
  debug: true,
}Lenguaje del código: JavaScript (javascript)

En este ejemplo, hemos configurado Unlighthouse para que excluya las URL basadas en /wp-admin/, analice únicamente las categorías «performance» y «accessibility» y utilice el método de limitación «simulado». Puede personalizar estos ajustes para adaptarlos a sus necesidades.

La lista de opciones disponibles se encuentra en la documentación oficial https://unlighthouse.dev/integrations/cli#configuration.

Ejecutar Unlighthouse con un archivo de configuración

Una vez configurado Unlighthouse, puede ejecutarlo con el siguiente comando:

npx unlighthouse --site <URL> --config-path <PATH_TO_CONFIG_FILE>Lenguaje del código: Shell Session (shell)

Sustituya <URL> por la URL de su sitio web y <PATH_TO_CONFIG_FILE> por la ruta a su archivo de configuración.

¿Cómo se utiliza Unlighthouse?

Unlighthouse se instala y se ejecuta desde con el comando en tu terminal:

npx unlighthouse --site <URL>Lenguaje del código: Shell Session (shell)

Puede añadir la opción --debug al final para ver los detalles de la ejecución. Este comando permitirá a Unlighthouse analizar el rendimiento de su sitio web en función de los siguientes criterios:

Velocidad de carga

Unlighthouse medirá la velocidad de carga de su sitio web simulando un usuario que accede a su sitio desde un dispositivo móvil y una red 3G. Se evaluarán las siguientes métricas:

• First Contentful Paint (FCP): el tiempo que tarda en aparecer el primer contenido en pantalla.
• Speed Index (SI): el tiempo que tarda el contenido visible en aparecer en pantalla.
• Time to Interactive (TTI): el tiempo necesario para que el sitio web sea interactivo y responda a las acciones del usuario.

Optimización SEO

Unlighthouse evaluará la optimización SEO de su sitio web según los siguientes criterios:

• Metaetiquetas: comprueba si las metaetiquetas importantes están presentes en su sitio web, como la etiqueta de título, la etiqueta de descripción y la etiqueta viewport.
• Estructura del contenido: comprueba si el contenido de su sitio web está técnicamente optimizado para los motores de búsqueda.
• Enlaces: comprueba si los enlaces de su sitio web son funcionales y están optimizados para los motores de búsqueda.

Accesibilidad

Unlighthouse evaluará la accesibilidad de su sitio web según los siguientes criterios:

• Contraste: comprueba si los colores de su sitio web tienen suficiente contraste para ser legibles por todos los usuarios.
• Navegación: comprueba si su sitio web es fácil de navegar utilizando un teclado y un lector de pantalla.
• Contenido: comprueba si el contenido de su sitio web es accesible para todos los usuarios, incluidos aquellos con necesidades específicas de accesibilidad.

Buenas prácticas

Unlighthouse evaluará si su sitio web sigue buenas prácticas de desarrollo web, como :

• Uso de HTTPS: comprueba si su sitio web utiliza HTTPS para proteger los datos de los usuarios.
• Optimización de imágenes: comprueba si las imágenes de su sitio web están optimizadas para reducir el tiempo de carga.
• Uso de fuentes web: comprueba si su sitio web utiliza fuentes web para mejorar la legibilidad y la velocidad de carga.

El Chrome User Experience Report (CrUX)

Se trata de una base de datos pública que contiene datos sobre el rendimiento real de los sitios web según la experiencia de los usuarios de Chrome. Los datos se recogen de una muestra de usuarios de Chrome que han activado la función «Uso y estadísticas» en su navegador.

CrUX proporciona información sobre métricas clave de la experiencia del usuario, como el tiempo de carga, la estabilidad visual y la interactividad del sitio web. Estos datos pueden ayudar a los desarrolladores web a entender cómo perciben los usuarios su sitio web e identificar áreas de mejora para ofrecer una mejor experiencia de usuario.

CrUX es utilizado por una serie de herramientas de análisis de sitios web, incluido Unlighthouse, para proporcionar información sobre el rendimiento real de los sitios web. Google también utiliza los datos de CrUX para evaluar la calidad de la experiencia de usuario de un sitio web como parte de su algoritmo de clasificación de búsquedas.

En resumen, CrUX es una valiosa fuente de datos para los desarrolladores web que buscan mejorar el rendimiento de su sitio web y ofrecer una mejor experiencia de usuario.

¿Cómo interpreto los resultados de Unlighthouse?

Después de ejecutar las auditorías con Unlighthouse, obtendrás un informe detallado con varias métricas y puntuaciones. A continuación le explicamos cómo interpretar los resultados:

1. Métricas: Unlighthouse genera métricas para cada auditoría, como el tiempo de carga, el tiempo de interacción, la puntuación SEO, la puntuación de accesibilidad y la puntuación de mejores prácticas. Estas métricas le dan una idea del rendimiento de su sitio web en cada área.
2. Puntuaciones: Unlighthouse también asigna puntuaciones a cada auditoría, que van de 0 a 100. Cuanto más alta sea la puntuación, mejor. Cuanto mayor sea la puntuación, mejor. Las puntuaciones le dan una idea de la calidad general de su sitio web en cada área.
3. Oportunidades de mejora: Unlighthouse también ofrece oportunidades de mejora para cada auditoría, como imágenes que deben comprimirse, archivos CSS y JavaScript que deben minimizarse, metaetiquetas que deben añadirse, etcétera. Estas oportunidades le ofrecen formas concretas de mejorar el rendimiento de su sitio web.

Consejos para interpretar los resultados

• Céntrese en las métricas y puntuaciones más importantes para su sitio web.
• Utilice las oportunidades de mejora para identificar las áreas prioritarias de mejora.
• Compare los resultados con los estándares del sector para determinar si su sitio web es competitivo.

¿Cómo puede mejorar su sitio web con Unlighthouse?

He aquí algunos consejos prácticos para mejorar el rendimiento de su sitio web con Unlighthouse :

1. Mejorar la velocidad de carga
   • Comprima las imágenes y los archivos de gran tamaño.
   • Reduzca al mínimo los archivos CSS y JavaScript.
   • Utilice la caché del navegador.
   • Reduzca el tiempo de respuesta del servidor.
2. Mejorar la optimización SEO
   • Añada metaetiquetas y etiquetas de encabezado relevantes.
   • Cree un mapa del sitio XML.
   • Utilice URL compatibles con los motores de búsqueda.
   • Optimice el contenido para palabras clave relevantes.
3. Mejorar la accesibilidad
   • Añada alternativas de texto a las imágenes.
   • Utilice colores con suficiente contraste.
   • Asegúrese de que se puede navegar por el sitio con el teclado.
   • Utilice etiquetas y leyendas adecuadas para los formularios.
4. Utilice las mejores prácticas
   • Utilice HTTPS para proteger el sitio web.
   • Evite redireccionamientos innecesarios.
   • Utilice fuentes web optimizadas.
   • Asegúrese de que el sitio web es compatible con distintos navegadores y dispositivos.

Conclusión

Unlighthouse es una potente herramienta para medir y mejorar el rendimiento de varias páginas de un sitio web. Al utilizar esta herramienta para identificar problemas y oportunidades de mejora, puede optimizar la experiencia del usuario y el SEO de su sitio web. Le recomendamos que utilice Unlighthouse con regularidad para supervisar el rendimiento de su sitio web y realizar mejoras continuas.

Preguntas frecuentes