Introducción a Lighthouse
Como vimos en la sección anterior, las Core Web Vitals se centran en aspectos de la experiencia del usuario a través del rendimiento de carga (Largest Contentful Paint), la interactividad (First Input Delay) y la estabilidad visual (Cumulative Layout Shift).
En esta lección, nos enfocaremos en cómo medir las Core Web Vitals mediante el uso de un entorno simulado llamado Lighthouse.
Nota: Para esta lección usaremos Chrome Dev Tools. Sin embargo, existen múltiples formas de ejecutar Lighthouse.
Lighthouse funciona ejecutando una serie de auditorías en una URL proporcionada. Basándose en estas auditorías, genera un informe sobre el rendimiento de la página. Si hay áreas que necesitan mejora, el informe proporcionará información sobre cómo optimizarlas.
Analicemos dos ejemplos de informes de Lighthouse para ver la diferencia entre un sitio con Core Web Vitals saludables y uno que no las tiene.
Ejemplo optimizado
Para ver un ejemplo de cómo funciona Lighthouse, usaremos nuestra página de inicio.
- Abre Chrome.
- En una ventana de incógnito, navega a
https://nextjs.org. - Abre DevTools y haz clic en la pestaña Lighthouse.
- Haz clic en Generar informe.
Esto ejecutará un informe que debería tardar menos de 60 segundos.
Nota: Es importante ejecutar los informes en una ventana de incógnito, ya que los complementos de terceros afectarán los resultados.
Además, los bloqueadores de anuncios pueden impedir que se carguen scripts, lo que daría una auditoría incompleta. Considera configurar un perfil limpio para medir el rendimiento.
Aquí tienes un ejemplo de informe:
Ejemplo no optimizado
Para este tutorial, hemos creado una aplicación sin optimizaciones.
Configuración del proyecto
Esta es una aplicación básica no optimizada que permite a los visitantes hacer dos cosas: buscar un país para obtener su población y hacer clic en un botón para leer un modal emergente. Esta aplicación pretende simular la realidad de trabajar en aplicaciones grandes donde el uso de bibliotecas de terceros no se puede evitar.
Descargar código inicial
Ejecutar compilación de producción
Para obtener informes precisos de Lighthouse, siempre debes probar tu aplicación con una compilación de producción. Para ejecutar una compilación de producción, accede al directorio del proyecto:
Compila tu aplicación ejecutando next build e inicia el servidor en modo producción ejecutando next start.
Ejecutemos un informe de Lighthouse con Chrome DevTools. Una vez completado el informe, comencemos a optimizar el sitio y mejorar las métricas.
Lecturas adicionales
- Google Chrome: Calculadora de puntuación Lighthouse