Entender qué tan rápido carga tu sitio web y dónde están los cuellos de botella es una habilidad fundamental para cualquier frontend developer. Mientras que herramientas como PageSpeed ofrecen una vista general, Lighthouse lleva el análisis a un nivel técnico que permite tomar decisiones concretas de optimización directamente desde el código.
¿Qué es Lighthouse y por qué es diferente a PageSpeed?
Lighthouse es una herramienta de auditoría integrada en Google Chrome que genera reportes enfocados en el desarrollador [1:18]. A diferencia de PageSpeed, que evalúa sitios en entornos productivos, Lighthouse puede correr en tu entorno local, incluso sobre archivos HTML servidos desde un puerto en tu máquina. Su lenguaje es más técnico y sus recomendaciones apuntan directamente a qué puedes mejorar como frontend.
Para acceder a ella, solo necesitas abrir las DevTools con clic derecho e "inspeccionar", y buscar la pestaña Lighthouse [3:40]. En Google Chrome ya viene integrada sin necesidad de extensiones. Si usas Firefox o Safari, necesitarás instalarla por separado.
El reporte evalúa categorías como performance, accesibilidad, buenas prácticas y SEO, tanto en formato mobile como desktop [4:06].
¿Cómo interpretar el reporte de Lighthouse correctamente?
Una vez ejecutado el análisis, obtienes puntuaciones por categoría y métricas detalladas. Por ejemplo, en una landing optimizada se obtuvo un 94 en performance y 100 en buenas prácticas [4:36]. El reporte señala oportunidades como minificar CSS, reducir JavaScript sin usar y comprimir recursos.
¿Las extensiones del navegador afectan los resultados?
Sí, y es un error común. Las extensiones del navegador inyectan código que Lighthouse puede detectar como parte de tu aplicación [5:28]. Por ejemplo, una extensión como Language Tool puede aparecer como JavaScript innecesario. Sin embargo, el reporte marca estos archivos como Chrome Extension, así que no debes preocuparte por optimizar algo que depende del usuario y no de tu código.
¿Cuál es la diferencia entre first contentful paint y largest contentful paint?
El First Contentful Paint (FCP) mide el tiempo que tarda el navegador en renderizar el primer contenido visible en pantalla [6:22]. El Largest Contentful Paint (LCP), en cambio, mide cuándo se renderiza el elemento más grande. Los Web Core Vitals de Google se enfocan más en el LCP, pero cada métrica tiene sus propias estrategias de optimización.
¿Qué optimizaciones mejoran el FCP?
El navegador lee el HTML de arriba hacia abajo, como un libro [6:55]. Cada vez que encuentra una referencia a un archivo CSS, JavaScript o fuentes, debe ir a resolverlo antes de continuar, lo que bloquea el proceso de renderizado.
Algunas técnicas para mejorar esta métrica incluyen:
- CSS en línea: colocar los estilos directamente en el HTML en lugar de llamar a un archivo externo, eliminando una solicitud de red.
- Atributo defer en scripts: permite que el JavaScript se resuelva en segundo plano sin bloquear el render [7:55].
- Preconnect para fuentes: establece conexiones anticipadas con servidores de tipografías.
- Minificación y compresión: reducir el peso de los archivos eliminando espacios y caracteres innecesarios [9:30].
Al comparar el view page source de una landing normal contra su versión comprimida, el código es idéntico en funcionalidad pero significativamente más liviano en transferencia [9:48]. Este tipo de optimización reduce el peso del archivo y acelera la carga.
La buena noticia es que muchas de estas tareas se pueden automatizar mediante empaquetadores (bundlers), que se encargan de minificar, comprimir y analizar el código antes de enviarlo a producción [10:28].
¿Por qué el rendimiento web impacta directamente al negocio?
Un caso real analizado fue eltiempo.com, un portal de noticias colombiano, que arrojó un performance pésimo con un FCP de cinco segundos y un LCP de ocho punto cinco segundos [11:06]. Un sitio de noticias o e-commerce debería cargar casi de forma instantánea para retener usuarios.
Según estadísticas de Google, si un sitio tarda más de tres segundos en cargar, los usuarios lo abandonan [11:50]. Mejorar estas métricas puede aumentar considerablemente el número de visitas y la retención. Como frontend developer, estas cifras mueven la aguja del modelo de negocio y son tu responsabilidad directa.
¿Cuál fue el sitio con peor rendimiento que encontraste al correr Lighthouse? Comparte tu hallazgo y qué impacto crees que tiene en su negocio.
