Lighthouse es una herramienta automatizada de código abierto de Google que está integrada en las DevTools de Chrome, Opera, Arc, Edge, etc. (lista no exhaustiva). Está diseñado para ayudar a los desarrolladores a mejorar la calidad de sus páginas web mediante auditorías de rendimiento, accesibilidad, buenas prácticas, SEO y compatibilidad con las Aplicaciones Web Progresivas. En este artículo le explicaremos cómo utilizar Lighthouse para analizar y optimizar su tienda PrestaShop.

Paso 1 Acceda a Lighthouse a través de Chrome DevTools

Para iniciar su análisis con Lighthouse, siga estos sencillos pasos:

• Abra Google Chrome (u otro navegador con Lighthouse). Si aún no lo ha instalado, descárguelo de la página oficial de Google Chrome e instálelo en su ordenador.
• Acceda a su tienda PrestaShop introduciendo la URL en la barra de direcciones de Chrome.
• Abra las herramientas de desarrollo de Chrome pulsandoCtrl+Shift+I (oCmd+Option+I en Mac), o haga clic con el botón derecho en cualquier página de su sitio y seleccione 'Inspeccionar'.

Paso 2 Utilice Lighthouse para analizar su sitio web

Una vez que haya abierto DevTools, siga estos pasos para lanzar un análisis con Lighthouse :

• Haga clic en la pestaña "Lighthouse" de la barra superior de Chrome DevTools. Si no ve esta pestaña, haga clic en las dos flechitas de la derecha para desplazarse por las pestañas disponibles.

  

• Configure su auditoría seleccionando las categorías que desea analizar (Rendimiento, Accesibilidad, Prácticas recomendadas, SEO y PWA).

• También puede configurar las condiciones de la simulación, como el tipo de conexión (3 G 4 G) y si desea ejecutar la auditoría en modo móvil o de escritorio.

• Haga clic en "Analizar la carga de la página" para iniciar la auditoría. Lighthouse analizará su página y generará un informe detallado.

Paso 3 Interpretar los resultados de Lighthouse

El informe generado por Lighthouse le dará una puntuación para cada categoría comprobada, así como recomendaciones detalladas para mejorar su sitio:

• Rendimiento: Optimice el tiempo de carga y la interactividad de su sitio web.
• Accesibilidad: Asegúrese de que su sitio es utilizable por todos los usuarios, incluidos los discapacitados.
• Prácticas recomendadas: Compruebe la seguridad y otras buenas prácticas de desarrollo web.
• SEO: Mejore la visibilidad de su sitio en los motores de búsqueda.
• PWA: Asegúrese de que su sitio web puede utilizarse como una aplicación web progresiva.

Haga clic en una categoría para ver un informe detallado de la misma:

Y si baja un poco, encontrará recomendaciones para optimizar su sitio:

Al hacer clic en uno de los elementos, obtendrá explicaciones que le ayudarán a comprender y resolver el problema identificado:

Paso 4 Comprender los iconos de color de los informes Lighthouse

En los informes generados por Lighthouse, encontrará iconos de colores que le ayudarán a identificar rápidamente el tipo de recomendación o problema del que se informa. Estos iconos facilitan la priorización de las acciones que debe emprender para mejorar su sitio. He aquí lo que significa cada color:

• Rojo (Error): Estos iconos indican errores críticos que requieren atención inmediata. A menudo indican problemas que pueden tener un impacto directo y significativo en la experiencia del usuario o en el rendimiento del sitio.
• Naranja (Advertencia): Los iconos naranjas identifican las advertencias, que son menos críticas que los errores pero que aún así merece la pena examinar. Estos problemas pueden afectar a la optimización del sitio o provocar incoherencias en la experiencia del usuario.
• Verde (Pasado): Los iconos verdes acompañan a los artículos que han superado las pruebas de Lighthouse. Se trata de aspectos destacados de su sitio web que cumplen las normas recomendadas en términos de rendimiento, accesibilidad, prácticas recomendadas y SEO.
• Azul (Información): Los iconos azules proporcionan información adicional que no está directamente relacionada con los problemas, pero que puede ofrecer ideas sobre la configuración del sitio o sugerencias para futuras mejoras.

Cada uno de estos iconos aparece junto a los resultados de las pruebas en el informe Lighthouse, lo que permite a los usuarios comprender rápidamente el estado de cada elemento analizado y determinar las prioridades para optimizar su sitio web.

Preguntas más frecuentes

¿Cómo puedo resolver los problemas señalados por Lighthouse?

Cada sugerencia del informe Lighthouse va acompañada de documentación que explica el problema y propone soluciones prácticas. Haga clic en los enlaces "Más información" para obtener consejos detallados.

¿Puede utilizarse Lighthouse para sitios distintos de los creados con PrestaShop?

Desde luego, Lighthouse es una herramienta versátil que puede utilizarse para analizar cualquier sitio web, independientemente de la tecnología subyacente.

¿Es necesaria una puntuación de 100 para cada categoría?

No, de hecho, muy pocos sitios alcanzan estas puntuaciones. Por ejemplo, las puntuaciones mostradas anteriormente corresponden a la página de descarga de Google Chrome. Lo ideal es obtener las puntuaciones más altas posibles resolviendo el mayor número posible de problemas identificados.