Lighthouse es una herramienta que te ayuda a medir y encontrar formas de mejorar el rendimiento de una página. Este es el flujo de trabajo general para usar Lighthouse:
- Le indicas a Lighthouse qué página auditar.
- Lighthouse carga esa página y registra cuánto tarda la página en alcanzar varios objetivos de rendimiento. Estos eventos importantes se denominan metrics.
- Lighthouse te informa cómo le fue a la página. El informe proporciona una puntuación para cada métrica y una lista de oportunidades que, si las implementas, deberían hacer que la página se cargue más rápido.
Tu misión es mejorar las puntuaciones de las métricas con el tiempo o, al menos, asegurarte de que no empeoren. Sin embargo, no hay forma de trabajar directamente en las métricas. En cambio, debes seguir las oportunidades que proporciona Lighthouse. Trabajar en esas oportunidades tiende a mejorar las puntuaciones de tus métricas.
Ejecutar Lighthouse desde la página de tu perfil
Ejecuta Lighthouse desde la página de tu perfil de web.dev:
Proporciona cualquier URL y Lighthouse ejecutará una serie de auditorías que generará un informe sobre el rendimiento de la página.
Revisa el informe de auditorías para identificar las áreas en las que puedes mejorar tu página.
Para cada auditoría, encontrará orientación e inmediatamente pasos para mejorar sus puntuaciones.
Ejecutar Lighthouse desde las Herramientas para desarrolladores de Chrome
Las Herramientas para desarrolladores de Chrome son un conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador Google Chrome. No necesitas descargar nada para obtener Herramientas para desarrolladores. Si tienes Chrome, tienes Herramientas para desarrolladores.
- En Chrome, ve a la página que quieras auditar.
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
Haz clic en la pestaña Auditorías. Si no ves esta pestaña, haz clic en el símbolo » y, luego, selecciona Auditorías en la lista. Lighthouse es el motor que impulsa el panel Audits. Por eso ves la imagen de un faro.
- Asegúrese de que el botón de selección Móvil esté seleccionado. Cuando Lighthouse audita tu página, simula la cadena de usuario-agente y el viewport de un dispositivo móvil.
- Asegúrate de que la casilla de verificación Rendimiento esté habilitada. Puedes habilitar o inhabilitar el resto de las casillas de verificación en la sección Auditorías. Si los habilitas, verás muchas oportunidades sobre cómo mejorar esos otros aspectos de tu página.
- Asegúrate de que el botón de selección Simular una velocidad rápida 3G, 4x CPU Slowdown esté seleccionado. Lighthouse no limita la red ni la CPU mientras carga la página. En cambio, analiza el tiempo que tardó la página en cargarse en condiciones normales y, luego, calcula cuánto tiempo habría tardado en una red 3G rápida con una CPU 4 veces menos potente que la de tu máquina.
- Asegúrate de que la casilla de verificación Liberar espacio de almacenamiento esté habilitada. Esta opción fuerza a Lighthouse a ir a la red para cada recurso de página, que es la forma en que los visitantes nuevos experimentan la página.
- Haz clic en Ejecutar auditorías. Después de 5 a 10 segundos, Lighthouse te muestra un informe.
Por ejemplo, si ejecutas algunas auditorías con Simulación rápida de 3G, 4 veces la regulación de la demora de CPU habilitada y, otras veces, ejecutas auditorías con la limitación inhabilitada, las puntuaciones de tus métricas serán significativamente más bajas cuando la limitación esté habilitada. Es posible que dediques mucho tiempo a averiguar por qué tu página es mucho más lenta ahora, cuando en realidad lo único que cambió fue la configuración.
Comprende tu informe
En la parte superior derecha de tu informe, se muestra tu puntuación de rendimiento general. 100 es una puntuación perfecta. Debajo de la puntuación general se encuentran las puntuaciones de las métricas. La Guía de puntuación de Lighthouse v3 explica cómo contribuye cada puntuación de métrica a la puntuación general.
Coloca el cursor sobre una métrica para obtener más información sobre ella. Haz clic en Más información para leer la documentación al respecto.
Debajo de las puntuaciones de las métricas, puedes ver capturas de pantalla del aspecto que tenía la página mientras se cargaba.
Debajo de las capturas de pantalla, ves oportunidades para mejorar el rendimiento de la página.
Haga clic en una oportunidad para obtener más información al respecto.
Próximos pasos
Intenta usar Lighthouse para auditar tu página, ya sea desde tu página de perfil o desde las Herramientas para desarrolladores de Chrome. Implementa una de las oportunidades y, luego, vuelve a auditar tu página para ver cómo el cambio afectó tu informe. Lo ideal es que las puntuaciones de tus métricas sean un poco mejores, y Lighthouse ya no debería marcar esa oportunidad como algo en lo que trabajar.
Ejecutar Lighthouse por tu cuenta es ideal para realizar verificaciones puntuales, pero, en última instancia, querrás configurar una supervisión continua para asegurarte de que tu sitio se mantenga en buen estado. Para realizar un seguimiento del progreso de Lighthouse en el tiempo, agrega tu sitio a tu perfil.