Menú


LightHouse report de Google: Como superarlo con nota.

Esta herramienta de analisis de Google, arroja información bastante interesante de como se encuentra la salud de tu página web. A muchos les sonará mas PageSpeed Insights para analizar la velocidad de la página. De hecho las dos son de Google y funcionan igual o muy parecido. Solo que LightHouse arroja otra información a parte de la cereleridad. Otra herramienta muy interesante para medir la velocidad de la Web es pingdom, que podéis consultar en la sección de herramientas.

LightHouse separa los resultados de su análsis en 4 apartados:

Estas son las 4 secciones que analizaremos. Podréis ver que existe otra sección dentro del análisis de la herramienta que se llama PWA (Progressive Web App). Que es especifica para aplicaciones Web, pero de la que también podemos sacar alguna información interesante. Para comentar cada una, usaremos un reporte de ejemplo hecho sobre la página de un cliente que me pidió ayuda. Os dejamos el enlace del reporte completo para que podáis ver su estructura.

Resumen inicial

En la zona superior, nos aparece en resumen del informe clasificado en 5 apartados. En cada uno de ellos se indica la puntuación dentro de un circulo de color rojo (puntuación por debajo de 50), ambar (puntuación de 50 a 89) y verde para puntuaciones de 90 a 100.

 

Rendimiento (Performance)

Este es el primer punto de cualquier análisis que hagamos con la herramienta. Su medición está estrechamente relacionada con la primera impresión del usuario al visitar nuestra web. Velocidad de carga, velocidad de visualización de contenidos, velocidad para poder interactuar, velocidad de respuesta a cualquier acción... Todos estos factores pueden ser determinantes a la hora de que un navegante permanezca en nuestra página, y lo que es más importante, de que vuelva en otra ocasión.

Después entramos en materia y nos aparecen las 6 métricas que útiliza la aplicación para dar una valor sobre el rendimiento de nuestra web. Nos indican lo que hay que corregir, lo que puede mejorar y lo que ya está correcto.

Perfomance (Rendimiento) con un valor de 11, ya podemos imaginar que no es muy bueno. Pero vamos a ver con mas detalle que esta fallando. Vamos a analizar una por una las 6 métricas.

Firts Contentful Paint

Es el tiempo que pasa desde que pones la dirección web en el buscador, hasta que aparece el primer texto o imagen de tu contenido. Para conseguir un puntaje de 99 y por lo tanto color verde, este tiempo debería de acercarse a los 1,5 segundos.

En nuestro ejemplo 8,7 segundos es una barbaridad y sin duda hay que actuar de inmediato en este punto.

Más información sobre Firts Contentful Paint

Speed Index

Mide la velocidad a la que se van cargando los contenidos de la página hasta el final. Y lo hace mediante la comparación de fotogramas de una secuencia que genera durante la carga del sitio. Es decir, en primer lugar, genera un video y después compara los fotogramas de forma secuencial para ver como va apareciendo el contenido. Para conseguir un valor de entre 75 y 100 puntos, el speed index debe de estar entre 0 y 4,3 segundos.

14,6 segundos es un drama, puede deberse a muchas causas, pero debe de solucionarse de forma urgente.

Más información sobre Speed Index

Time to Interactive

Mide la cantidad de segundos que tarda la página que estamos visitando en ser totalmente interactiva. Es decir que el usuario puede usar todos los elementos de interacción de la Web. Este punto es muy importante, porque puede que aparezcan botones sobre los que el usuario quiera actuar pero que todavía no esten listos. Entonces se transmite la sensación de que la página no funciona y se genera frustación y una mala experiencia. El número de rebotes y abandonos puede aumentar debido a este problema.

11 segundos es un problema como ya hemos comentado. Los navegantes son cada vez más diestros y habilidosos y quieren que todo funcione rápido y preciso.

Más información sobre Time to Interactive

First Meaningful Paint

Esta métrica que mide el tiempo qeu tarda el contenido principal de la página a ser visible para el usuario, se dejará de usar en la versión 6. En su lugar se utilizara Largest Contentful Paint, que mide el tiempo que tarda a cargarse el elemento de más tamaño del domcumento. Y cuando decimos tamaña nos referimos al area que ocupa en la parte visible.

De momento trabajaremos sobre el dato de la versión 5, y como los anteriores no es nada positivo. Un valor aceptable debería de moverse entre los 0 y los 2 segundos.

Más información sobre First Meaningful Paint

First Meaningful Paint

Este punto trata de esclarecer el tiempo necesario para que nuestra página sea minimamente interactiva para el usuario. Este valor suele ser siempre muy parecido al Time to Interactive y por este motivo tambén es eliminado en la versión 6 del software.

Entre 0 y 4,7 segundo se considera un valor aceptable digno de recivir el color verde de buen rendimiento.

Más información sobre First Meaningful Paint

Max Potential First Input Delay

Esta métrica mide el tiempo desde que un usuario realiza una primera acción en la página, por ejemplo pulsa un botón, hasta que recibe la respuesta de su acción por parte del navegador.

Este valor es sumamente importante porque forma parte de la primera impresión que se llevará el usuario del web.

Más información sobre Max Potential First Input Delay

Solución:

La parte de rendimiento, siempre va asociada a la velocidad de carga y a los tiempos de respuesta del servidor y de la página. Son muchos los aspectos que influyen en este proceso y que detallamos en siguiente enlace:

Mejorar la velocidad de carga de la web

 

Accesibilidad (Accessibility)

El segundo punto, trata sobre la accesibilidad. Como hacer que el máximo número de personas, independientemente de su condición física y/o física, dispositivo que utilicen o habilidad, puedan acceder de forma fácil a nuestra web. Se trata de hacer que nuestro sitio sea lo más navegable y usable posible.

La herramienta puntua nuestra accesibilidad según varios puntos, tal y como podéis comprobar en el grafico:

Como podéis observar, todos los puntos analizados en los que necesitamos mejorar, van enfocados en hacer una web más facil de navegar y entender para todo el mundo. Nos piden mejorar los contrastes para facilitar las lecturas. Que pongamos textos y etiquetas en todos los elementos possibles, para facilitar la lectura y el uso de aplicaciones de lectura para gente con discapacidades, que se sirven de estos datos para comunicarse con los usuarios. Que respetemos las espacios entre elementos interactivos, para facilitar el operar sobre ellos. Y un largo etc, que hará nuestro sitio web mucho más practicable para todo el mundo.

###Mejorar la accesibilidad web

 

Mejores prácticas (Best practices)

El tercer punto trata sobre las mejores prácticas posibles a la hora de construir nuestra web. Evitar problemas derivados de abrir links externos o librerias externas. Dimensionar adecuadamente el tamaño de las imágenes. Usar HTTPS...

###Aplicar las mejores prácticas

 

SEO

En el cuarto punto se analiza el SEO (SEO on Page) de la página. Que todos los elementos básicos estén, y que cumplan las especificaciones recomendadas. Títulos de página, metas, textos alternativos (alt) en las imagágens... vaya, el ABC del posicionamiento Web que todo el mundo debería cumplir.

###SEO onPage a la perfección