¿Qué es Google Li­gh­thou­se?

En el ámbito del re­n­di­mie­n­to, Li­gh­thou­se analiza la velocidad de la página web o la apli­ca­ción web y comprueba que los elementos que se han cargado se vi­sua­li­zan co­rre­c­ta­me­n­te. El análisis consta de las si­guie­n­tes seis su­b­ca­te­go­rías:

• First Co­n­te­n­t­ful Paint: indica cuánto tarda en mostrarse la primera imagen o el primer texto completo en la página web.
• First Mea­ni­n­g­ful Paint: indica en qué momento se pueden vi­sua­li­zar ín­te­gra­me­n­te los co­n­te­ni­dos pri­n­ci­pa­les de la página.
• Speed Index: indica cuánto tardan los co­n­te­ni­dos de la página web en vi­sua­li­zar­se.
• Time To In­ter­ac­ti­ve: indica cuánto tarda la página en cargar con plena capacidad de in­ter­ac­tua­ción.
• First CPU Idle: indica el momento en el que la actividad de los su­b­pro­ce­sos pri­n­ci­pa­les es su­fi­cie­n­te­me­n­te reducida como para poder procesar entradas del usuario por primera vez.
• Estimated Input Latency: indica una es­ti­ma­ción de cuántos mi­li­se­gu­n­dos necesita la página o apli­ca­ción web para reac­cio­nar a una entrada del usuario en el margen de los cinco segundos con mayor carga mientras se descarga la página. Si la latencia es superior a 50 mi­li­se­gu­n­dos, es muy frecuente que los usuarios co­n­si­de­ren la página o app como lenta.

Al margen del análisis de estos factores, Li­gh­thou­se también te ofrece su­ge­re­n­cias de mejora que proponen di­fe­re­n­tes opciones de op­ti­mi­za­ción para recortar los tiempos de carga. Entre estas en­co­n­tra­mos, por ejemplo, la co­m­pre­n­sión de imágenes, Ja­va­S­cri­pt o la eli­mi­na­ción de los recursos que podrían estar blo­quea­n­do la re­n­de­ri­za­ción de la página. El resto de análisis del ámbito del re­n­di­mie­n­to incluyen re­co­me­n­da­cio­nes sobre los si­guie­n­tes puntos:

• Usar archivos de imagen en formatos que requieran poco espacio de al­ma­ce­na­mie­n­to y re­pre­se­n­tar­los en las di­me­n­sio­nes correctas.
• Aportar los textos y Ja­va­S­cri­pt en estado co­m­pri­mi­do si es posible.
• Optimizar la memoria caché para la re­pre­se­n­ta­ción mejorada de los co­n­te­ni­dos estáticos.
• Evitar re­di­re­c­cio­na­mie­n­tos y cargar las consultas más im­po­r­ta­n­tes de forma previa para permitir tiempos de respuesta rápidos por parte del servidor.
• Aportar los co­n­te­ni­dos animados en formatos modernos que requieran poco espacio si es posible.
• Mantener el volumen de datos de la página web al mínimo posible
• Emplear marcas y etiquetas de tal forma que permitan mejorar los re­su­l­ta­dos de las me­di­cio­nes y el se­gui­mie­n­to

En el ámbito de la ac­ce­si­bi­li­dad, Li­gh­thou­se comprueba si la página o la apli­ca­ción es fácil de usar para personas con li­mi­ta­cio­nes físicas. De forma más concreta, se comprueba si los elementos im­po­r­ta­n­tes, como los botones y los enlaces, se describen de forma clara o si las imágenes y los gráficos disponen de una función “Voice over” para que las personas con di­s­ca­pa­ci­dad visual también puedan captar los co­n­te­ni­dos a través de la emisión de voz.

En el área de mejores prácticas, Li­gh­thou­se analiza, sobre todo, los aspectos de seguridad de la página web o la PWA. Aquí, la he­rra­mie­n­ta comprueba si se han usado te­c­no­lo­gías de co­di­fi­ca­ción como TLS, si los recursos in­te­gra­dos de la página web provienen de fuentes seguras o si las bi­blio­te­cas Ja­va­S­cri­pt se pueden catalogar como seguras. Google Li­gh­thou­se también analiza si las bases de datos son seguras (si las hay) y destaca las órdenes no seguras o el uso de API an­ti­cua­das.

Google Li­gh­thou­se analiza, mediante distintas pruebas, el nivel de vi­si­bi­li­dad de la apli­ca­ción o la página web en di­fe­re­n­tes bu­s­ca­do­res. No obstante, las pruebas de Li­gh­thou­se son muy limitadas. Los re­su­l­ta­dos de Li­gh­thou­se se emiten en una escala de 0 a 100 puntos. Si el resultado no alcanza la pu­n­tua­ción máxima, el operador de la página debe actuar sin ninguna duda, ya que es síntoma de que existe potencial de op­ti­mi­za­ción.

El punto destacado de Li­gh­thou­se es la op­ti­mi­za­ción para los motores de búsqueda en el ámbito móvil. Se comprueba es­pe­cia­l­me­n­te la idoneidad de la página web o la apli­ca­ción para te­r­mi­na­les móviles, es decir, si las etiquetas y los metadatos se han op­ti­mi­za­do.

Li­gh­thou­se facilita in­fo­r­ma­ción como “First Co­n­te­n­t­ful Paint” o “First Input Delay”, ma­r­ca­do­res muy im­po­r­ta­n­tes en el ámbito de la ex­pe­rie­n­cia del usuario y todo ello de manera muy sencilla. Para analizar es­ce­na­rios de la forma más precisa posible, la he­rra­mie­n­ta simula co­n­di­cio­nes reales, sobre todo en di­s­po­si­ti­vos móviles, en forma de ada­p­ta­cio­nes del re­n­di­mie­n­to de CPU y otros factores a los que se enfrentan los usuarios en el día a día.

Una vez hecho el análisis, Li­gh­thou­se emite pu­n­tua­cio­nes del 0 al 100 que pueden tomarse como guía para detectar errores po­te­n­cia­les u opo­r­tu­ni­da­des de op­ti­mi­za­ción. En el caso del análisis de re­n­di­mie­n­to de los tiempos de carga de la página web, las pu­n­tua­cio­nes se dividen en tres ca­te­go­rías: las pu­n­tua­cio­nes de 0 a 49 (escala de colores roja) se co­n­si­de­ran como lentas; de 50 a 89 (escala de colores naranja), medianas, y las pu­n­tua­cio­nes de 90 a 100 (escala de colores verde), rápidas.

En función de estos re­su­l­ta­dos, puede pro­ce­de­r­se a realizar los ajustes y las op­ti­mi­za­cio­nes ne­ce­sa­rias para rebajar el tiempo de carga de la página. Esta emisión de los re­su­l­ta­dos de análisis es válida para todos los re­su­l­ta­dos medibles, es decir, aparte de para el re­n­di­mie­n­to de PWA, Ac­ce­si­bi­li­ty y Best Practices, también para SEO.