Lighthouse es una herramienta que te ayuda a medir el rendimiento de una página y a encontrar formas de mejorarlo. 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 en alcanzar varios puntos de referencia de rendimiento. Estos eventos importantes se denominan métricas.
- Lighthouse te proporciona un informe sobre el rendimiento de 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 tus 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 su lugar, sigues las oportunidades que proporciona Lighthouse. Trabajar en esas oportunidades suele mejorar las puntuaciones de tus métricas.
Ejecuta Lighthouse desde tu página de 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án un informe sobre el rendimiento de la página.
Revisa el informe de auditorías para identificar las áreas en las que se puede mejorar tu página.
En cada auditoría, encontrarás orientación y pasos inmediatos que puedes seguir para mejorar tus puntuaciones.
Ejecuta Lighthouse desde las Herramientas para desarrolladores de Chrome
Las Herramientas para desarrolladores de Chrome son el conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador Google Chrome. No tienes que descargar nada para obtener DevTools. Si tienes Chrome, tienes DevTools.
- En Chrome, ve a la página que quieres auditar.
- Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
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 Auditas. Por eso, ves la imagen de un faro.
- Asegúrate de que el botón de selección Móvil esté seleccionado. Cuando Lighthouse audite tu página, simulará el viewport y la cadena del agente de usuario 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 para mejorar esos otros aspectos de tu página.
- Asegúrate de que el botón de selección Red 3G rápida simulada, CPU 4 veces más lenta esté seleccionado. En realidad, Lighthouse no limita tu red ni tu CPU mientras carga la página. En cambio, observa cuánto tiempo tardó la página en cargarse en condiciones normales y, luego, estima cuánto tiempo habría tardado en una red 3G rápida con una CPU que es 4 veces menos potente que la de tu máquina.
- Asegúrate de que la casilla de verificación Borrar almacenamiento esté habilitada. Esta opción obliga 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 Run Audits. Después de 5 a 10 segundos, Lighthouse te muestra un informe.
Por ejemplo, si ejecutas algunas auditorías con 3G rápido simulado y limitador de ralentización de la CPU multiplicado por 4 habilitado, y, luego, en otras ocasiones, ejecutas auditorías con el limitador inhabilitado, las puntuaciones de tus métricas serán significativamente más bajas cuando tengas habilitado el limitador. Es posible que dediques mucho tiempo a tratar de averiguar por qué tu página ahora es mucho más lenta, cuando, en realidad, lo único que cambió fue la configuración.
Cómo interpretar tu informe
En la parte superior derecha del informe, se muestra tu puntuación general de rendimiento. 100 es una puntuación perfecta. Debajo de la puntuación general, se muestran las puntuaciones de las métricas. En la Guía de puntuación de Lighthouse v3, se explica cómo cada puntuación de métrica contribuye a la puntuación general.
Coloca el cursor sobre una métrica para obtener más información al respecto. Haz clic en Más información para leer la documentación al respecto.
Debajo de las puntuaciones de las métricas, verás capturas de pantalla de cómo se veía la página mientras se cargaba.
Debajo de las capturas de pantalla, verás oportunidades para mejorar el rendimiento de la página.
Haz clic en una oportunidad para obtener más información sobre ella.
Próximos pasos
Intenta usar Lighthouse para auditar tu página, ya sea desde la página de tu 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. Idealmente, las puntuaciones de tus métricas deberían ser un poco mejores, y Lighthouse ya no debería marcar esa oportunidad como algo en lo que debes trabajar.
Ejecutar Lighthouse por tu cuenta es ideal para detectar problemas, pero, en última instancia, querrás configurar una supervisión continua para asegurarte de que tu sitio siga funcionando correctamente. Para hacer un seguimiento de tu progreso en Lighthouse a lo largo del tiempo, agrega tu sitio a tu perfil.