Lighthouse

Es la herramienta que Google pone a disposición gratuitamente para evaluar la velocidad a partir de una puntuación fácilmente entendible, de 1 a 100 y dividida en a) Dispositivos móviles y b) Computadores de escritorio.

Suena fácil ¿eh? Más o menos... vamos a probarla con algún sitio en funcionamiento. Ingresamos a la página de PageSpeed Insights y ponemos la URL a analizar:

Quiero tratar de explicarte de la manera más simple cómo interpretar la página de resultados.

1. Puntaje

Lo más notorio que verás será un puntaje de 1 a 100 encerrado en un círculo y coloreado. Atención porque este puntaje es independiente: para móviles y para ordenadores. Así que cuando evalúes tendrás el dato móvil (aquí ya ves cómo Google prioriza la evaluación de la velocidad en móviles).

Este puntaje lo que indica es el grado de cumplimiento de las buenas prácticas de velocidad que Google sugiere.

Esta métrica es muy fácil de entender, entre otras cosas por los colores que usa estilo semáforo:

  • 0 a 49: rojo (lenta)
  • 50 - 89: amarillo (normal)
  • 90 - 100: verde (rápida)

Por supuesto que nuestra meta será llevar a color verde el nuevo sitio. Pero ¿qué tal si en este momento evalúas tu actual sitio o el sitio de tu competencia? Te llevarás algunas sorpresas...

NOTA IMPORTANTE: notarás que este no es un valor estable. Lo más probable es que si mides la misma página unos minutos después, te genere un resultado ligeramente diferente. ¿Por qué? Porque este número depende de las pruebas de laboratorio que se hace al momento de la evaluación. Y por ser pruebas de laboratorio tendrán variaciones como:

  • Pruebas A / B
  • Cambios en el enrutamiento del tráfico de Internet
  • Pruebas con diferentes versiones de Lighthouse
  • Pruebas en diferentes dispositivos, como una computadora de escritorio de alto rendimiento y una computadora portátil de bajo rendimiento
  • Extensiones de navegador que inyectan JavaScript en todas las páginas que visita y realiza solicitudes de red

******************************

NOTA MÁS IMPORTANTE: este valor NO debe trasnocharte. No te debes obsesionar solo con el puntaje. Es mucho más importante analizar los resultados para encontrar las fallas y oportunidades de mejora.

******************************

2. Datos de campo

Esta área no será visible para todos los sitios, solo para algunos. ¿Por qué? Porque estos son datos reales que Google recopila a partir de experimentos realizados en usuarios reales que usen Chrome. Funciona así: Google recopila los datos de usuarios reales que hayan navegado dicho sitio web en los últimos 30 días con el navegador Chrome.

Ojo: por eso es que si tienes un sitio nuevo o un sitio con pocos visitantes, Google no tendrá datos de campo suficientes y te lo hará saber con este aviso:

En esta sección verás dos de las métricas que Google recoge a través de Chrome, que son: Primer renderizado con contenido (FCP) y Latencia de la primera interacción (FID). Uffff, esto suena a chino ¿no? Pues vamos a explicarlo facilito. Sigue leyendo.

a. Primer renderizado con contenido (FCP)

El FCP indica el momento en que en el navegador del usuario se empieza a ver algo de contenido de la página web, por eso la sigla FCP (First Contentful Paint). En el siguiente ejemplo entenderás la diferencia entre el "Primer renderizado" y el "Primer renderizado con contenido":



Esto quiere decir que cuando se determina como "Primer renderizado" (FP) al momento en que se cargó el fondo, a los 0,2 segundos. Pero cuando hablamos de "Primer renderizado con contenido" (FCP) la cosa cambia. Observa:


Por lo tanto, el FCP es el momento en que el usuario percibe que se cargó "algo de contenido" y puede empezar a utilizarlo bien porque cargó algo de texto o alguna imagen.

Google clasificará a tu página como: Lenta, Normal o Rápida dependiendo de estos valores del FCP:

  • Rápida: 0 a 1000 ms (1 segundo o menos)
  • Normal: 1000 a 2500 ms (entre 1 y 2,5 segundos)
  • Lenta: 2500 ms en adelante (2,5 segundos en adelante)

Bastante exigente ¿no?

b. Latencia de la primera interacción (FID)

Es una métrica muy interesante porque nos dice cómo es percibida la capacidad de respuesta de nuestro sitio por un usuario. Es decir, cuando un usuario real del sitio genera una interacción con el sitio, el FID nos dice cuánto tiempo de respuesta hay desde la interacción (clic en un enlace, en un botón) hasta que el navegador responda. Y se basa en la primera interacción del usuario, porque como todos sabemos, "la primera impresión es lo que cuenta", ¿verdad?

Este es un dato real, no de laboratorio, así que estará disponible solo en aquellos sitios de los que Chrome haya sido "espía". ¿Me hago entender? Si tu sitio no tiene un alto tráfico, si es un dominio nuevo, ten la certeza de que no obtendrás este dato.

Y ¿cómo Google interpreta estos datos? El FID tiene tres valores: lenta, normal o rápida.

  • Rápida: 0 a 50 ms
  • Normal: 50 a 250 ms
  • Lenta: 250 ms en adelante

ms = milisegundos

c. Etiqueta de resumen

A partir de estos dos valores, PageSpeed Insights declara si la página tiene una velocidad rápida, normal (moderada) o lenta. Y lo determina así:

  • Rápidas: si ambas métricas, FCP y FID, indican que es rápida.
  • Lentas: si alguna de las métricas, FCP o FID, indican que es lenta.
  • Normales: el resto de los casos.

d. Distribución

Nota que debajo de cada una de las dos métricas (FCP) y (FID) hay una barra con los colores del semáforo. Se trata de la distribución de la muestra. Mira este ejemplo:

En otras palabras, aquí sabemos que el Primer renderizado con contenido ocurre EN PROMEDIO, a los 4 segundos. ¡Mal! Es una página clasificada dentro de las páginas lentas. Sin embargo, recuerda que esto es un promedio. Por eso en la parte de abajo te dice cómo se distribuyó la muestra. Por ejemplo, en la gráfica anterior sabemos que el 11% de la muestra cargó la página en menos de 1 segundo. Que el 48% la cargó entre 1 y 3 segundos. Y que el 41% la cargó por encima de 3 segundos.

---

En fin, algo que parecía sencillo, ¿ves que no lo era tanto? Sé que tiene su grado de complejidad, pero espero estar explicándote de la mejor manera.

3. Datos de experimentos

A diferencia de los datos de campo, los datos de experimentos se producen en ambientes simulados o laboratorios. Muestra los datos de las siguientes métricas que han sido tomadas "al instante", en el laboratorio. Muy importante que entendamos el significado de "primer pliegue" o "encima del pliegue", para poder entender algunas métricas.

Mira qué sencillo: un periódico impreso normalmente se "pliega". El primer pliegue de un periódico es lo que queda visible al momento de exhibirlo. Ahí es donde está la información más importante ¿verdad? Lo que llaman "la primera plana".


Luego, por analogía con los periódicos impresos, se empezó a llamar "primer pliegue de una página web" a la porción visible de la página, según el dispositivo, por ejemplo, en computador esta página tiene este primer pliegue:

Mientras que en el celular, el primer pliegue se vería así:

Ten en cuenta este concepto para algunas métricas que vienen a continuación:

a. Primer renderizado con contenido

Es exactamente la misma métrica de los datos de campo que ya vimos (FCP) pero esta vez obtenida a partir de laboratorio. Entonces es útil para aquellos sitios web que no tengan recolectados datos de campo. Es una velocidad que calcula Lighthouse, el sistema de evaluación de Google, que indica en qué momento hay contenido percibido por el usuario como útil (algún texto, imagen, etc.).

Así debes interpretar esta medida:

  • Rápido (verde): 0 - 2 segundos
  • Moderado (naranja): 2 - 4 segundos
  • Lento (rojo): 4 o más

b. Primer renderizado significativo

Esta es una métrica muy similar al "Primer renderizado con contenido", solo que acá lo que se mide es el momento en que se muestra el contenido principal en el primer pliegue de la página. El resultado se da en segundos. Verás un valor ligeramente superior al de FCP, tal vez fracciones de segundo más alto o, en algunos casos pocos, será un valor igual. Nunca será menor.

Así se debe interpretar el Primer renderizado significativo (FMP):

  • Rápido (verde): 0 - 2 segundos
  • Moderado (naranja): 2 - 4 segundos
  • Lento (rojo): 4 o más

c. Índice de velocidad

El índice de velocidad mide la rapidez con que se muestra visualmente el contenido durante la carga de la página. Lighthouse primero captura un video de la página que se carga en el navegador y calcula la progresión visual entre fotogramas. Lighthouse luego usa el módulo Speedline Node.js para generar el puntaje del índice de velocidad.

Esta medida la puedes interpretar así:

  • Rápido (verde): 0 - 4,3 segundos
  • Moderado (naranja): 4,4 - 5,8 segundos
  • Lento (rojo): 5,8 ó más

d. Primer tiempo inactivo de la CPU

El Primer tiempo inactivo de la CPU mide cuánto tiempo tarda una página en volverse mínimamente interactiva. Una página se considera mínimamente interactiva en estas circunstancias:

  • La mayoría (no necesariamente todos) de los elementos de la interfaz de la página web en la pantalla son interactivos
  • La página responde, en promedio, a la mayoría de las acciones de los usuarios en un período de tiempo razonable.

Esta es una métrica muy similar a la siguiente. Tanto "Primer tiempo inactivo de la CPU" como "Tiempo hasta que esté interactiva" miden cuando la página está lista para la interacción del usuario. El "Primer tiempo inactivo de la CPU" ocurre cuando el usuario puede comenzar a interactuar con la página; mientras que el "Tiempo hasta que esté interactiva" se produce cuando el usuario es plenamente capaz de interactuar con la totalidad de la página.

La métrica de "Primer tiempo hasta que esté interactiva" se debe interpretar así:

  • Rápido (verde): 0 - 4,7 segundos
  • Moderado (naranja): 4,8- 6,5 segundos
  • Lento (rojo): 6,5 ó más

e. Tiempo hasta que está interactiva

Esta es una métrica interesante. Resulta que algunos sitios por querer ganar tiempo mostrando el primer renderizado con contenido, lo más rápido posible, sacrifican la rapidez en la interacción. Es decir, el contenido se puede ver rápidamente, pero algunos elementos interactivos no cargan tan rápido. Así que el usuario se puede sentir decepcionado.

Esta es la métrica que nos ofrece el tiempo hasta que la página esté interactiva totalmente.

La métrica de "Tiempo hasta que esté interactiva" se debe interpretar así:

  • Rápido (verde): 0 - 5,2 segundos
  • Moderado (naranja): 5,3 - 7,3 segundos
  • Lento (rojo): 7,3 ó más

f. Latencia potencial máxima de la primera interacción

Es prácticamente la misma métrica que ya vimos en datos de campo llamada "Latencia de la primera interacción" (FID), pero ahora hecha desde el Laboratorio y no tomada desde los datos de muestra de Chrome. Por eso le llaman "potencial máxima". Así que, para recordarte, es el tiempo medido en milisegundos que el servidor es capaz de responder ante la solicitud de interacción de parte del usuario.

Así se interpretarán los resultados:

  • Rápido (verde): 0 - 130 ms
  • Moderado (naranja): 130 - 250 ms
  • Lento (rojo): 250 ó más

4. Oportunidades

Aquí es donde creo yo que la herramienta tiene una gran utilidad, porque nos permite entender qué podemos hacer para mejorar la carga. Te saldrá un listado de oportunidades, demarcadas claramente con color rojo y un triángulo cuando sean problemas críticos, y en naranja y cuadrado cuando sean moderados.

En todo caso, te saldrá el tiempo potencial de ahorro estimado. Por ejemplo:

Aquí el webmáster tiene dos errores críticos. Tanto que con solo resolver uno de ellos, ahorrará en tiempo de carga la bobadita de 11 segundos y medio. ¡Que no es poco! ¿Y todo por qué? Por no usar formatos de próxima generación. Mmmm, entonces, supongamos que no tenemos la más mínima idea de qué se tratan los "formatos de próxima generación". Entonces, desplegamos ese ítem y tendremos esto:

¡Wao! Mira qué interesante: primero, te cuenta con mayor detalle de qué se trata. En este caso, te sugiere usar formatos que tal vez hasta ahora no hayas considerado. Usualmente nos quedamos en dos formatos para la web: el JPG y el PNG. Pues no. Resulta que hay nuevos formatos con niveles de compresión mayores. Tanto, que en este apartado te muestran foto a foto cuál sería el ahorro en peso. Es bestial.

Así que ya tendrás una tarea: averiguar cómo usar esos nuevos formatos en tu web. Y ahí te podrías pasar varios días, como me pasó a mí, pero bueno, ya que estás en este curso, te lo solucionaré en el módulo sobre optimización de imágenes, sin que tengas que perder tiempo.

Lo importante es que empieces a entender que en el apartado de oportunidades vas a encontrar información que vale ORO. Así que más allá del puntaje y del circulito, concéntrate en este apartado y en el siguiente. ¡Sigue leyendo que ya casi terminamos!

5. Diagnósticos

Aquí vas a obtener una serie de recomendaciones, tal vez un poco más técnicas, pensadas para los desarrolladores.

Verás una información detallada de cada diagnóstico, desplegando la flecha de la derecha.

6. Auditorías aprobadas

¡Es la parte satisfactoria! Verás aquí todo el buen trabajo realizado, todas aquellas pautas que has cumplido en tu sitio web analizado:

Preguntas

26 preguntas