Cómo analizar los resultados de Google PageSpeed ​​Insights

Dado que Google dará un impulso a la clasificación de los sitios web que son rápidos, probablemente esté interesado en comprender más acerca de las perspectivas de Google PageSpeed.

… ¡Y no me sorprende porque es confuso!

Este artículo te ayudará.

¿Por qué es importante la velocidad de la página del sitio web?

Google quiere proporcionar la mejor experiencia de usuario posible a los usuarios.

Si su sitio web es lento, frustrará a los usuarios y creará una mala experiencia de usuario. Es tan simple como eso. El rendimiento afecta la experiencia.

Google anunció recientemente que los datos vitales web principales se utilizarán como parte de su algoritmo de clasificación en 2021. Estos datos vitales web principales son indicadores de la velocidad y la rapidez con la que las personas pueden interactuar con su página.

Básicamente, para esta tabla a continuación, no puede ser 'rojo'

¿Qué es Google PageSpeed ​​Insights?

Es una herramienta gratuita proporcionada por Google que le permite ingresar la URL de una página web y ejecutar rápidamente una prueba para verificar las diversas métricas relacionadas con el rendimiento.

Luego, la herramienta le da a su página una puntuación que va de 0 a 100 puntos. La partitura no se trata realmente de la velocidad. Puedes mejorar la puntuación si has utilizado las típicas recomendaciones de Google para mejorar la velocidad.

También le muestra los parámetros exactos que están ralentizando su página, así como sugerencias sobre cómo mejorarla.

Aquí es donde las cosas se vuelven técnicas y los resultados un poco difíciles de entender.

¿Cómo interpretas los resultados?

Lo primero que ve después de ejecutar una prueba es la puntuación de rendimiento (ordenador y móvil) de la página analizada.

Este será un número entre 0 y 100.

• 0 a 49: esto es malo, no desea que su puntaje sea 49 o menos
• 50 a 89: está bien, pero se puede mejorar
• 90 a 100: si estás en esta escala, estás en los buenos libros.

A medida que se desplaza hacia abajo, verá qué está causando una puntuación alta o baja:

Nota: Ver indicadores de color antes de cada sección:

• Verde significa rápido
• Naranja significa moderado
• Rojo significa lento

Esto es lo que significa cada una de estas secciones:

Primera pintura ContentFul

Este es el tiempo que lleva desde la navegación a una página desde el navegador hasta el momento en que el contenido comienza a mostrarse.

Básicamente, es un indicador de que la página está comenzando a cargarse.

Por ejemplo, podría ser solo un cambio de color, que es el color de fondo de la página, una imagen que se muestra o un fragmento de texto.

Esto es importante porque cuando un usuario ve alguna acción, es más probable que espere hasta que la página esté completamente cargada.

Guía:

Tiempo para interactivo

Este parámetro muestra qué tan rápido una página se vuelve interactiva.

Esto significa que la página muestra suficientes elementos en la pantalla para que los usuarios puedan interactuar con ella, por ejemplo, hacer clic en un botón de menú.

A veces, los sitios web pueden centrarse en la visibilidad, es decir, mostrar todo antes de poder interactuar con el contenido, lo que puede resultar frustrante para el usuario.

Guía:

Tiempo total de bloqueo

Hay una brecha entre el momento en que el visitante de su sitio web ve el contenido en la pantalla y el momento en que puede interactuar con él.

¡Este es el tiempo total de bloqueo!

Es bueno saber si las personas no pueden hacer cosas como hacer clic con el mouse, tocar la pantalla o presionar palabras clave antes de que el sitio web sea interactivo.

Las tareas largas son tareas que te bloquean por más de 50ms.

Todo lo que supere los 50 ms se considera tiempo de bloqueo.

Si no hay tareas largas, verá 0 tiempo de bloqueo, que es lo que ve en las estadísticas anteriores.

Cambio de diseño acumulativo

Un cambio de diseño es cuando un elemento visual se muestra en la pantalla pero luego se mueve.

Entonces, por ejemplo, está leyendo las noticias y hay un cambio de diseño, por lo que la ubicación donde se encuentra el artículo de noticias ha cambiado.

Este es un comportamiento inesperado desde la perspectiva del usuario.

Cuanto más alto es el puntaje, peor es.

Índice de velocidad

Esta es una pregunta difícil de entender, pero valiosa.

Así que imagina 2 sitios web que se cargaron en 1,5 segundos.

Si navegó por los 2 sitios web que se muestran en la imagen de arriba, ¿cuál cargaría más rápido?

Ambos se cargaron por completo en 1,5 segundos, pero debido a que el primer sitio comenzó a mostrar algunos elementos antes, pareció ser más rápido para el usuario.

Si solo mides el tiempo de carga son iguales.

El índice de velocidad es una puntuación calculada basada en la "rápida" carga completa de un sitio web.

Se utiliza una grabación de video de la carga para mostrar visualmente cuándo se cargan los bits.

En varios intervalos, la cantidad de contenido visible en la pantalla (en la parte superior de la página) se compara con el contenido que se muestra en un sitio web completamente cargado para calcular el porcentaje de contenido que se muestra en ese momento en particular.

Este proceso se repite unas cuantas veces.

El tiempo solo se basa en lo que el usuario puede ver en la pantalla (la ventana gráfica). No importa lo que hay debajo del pliegue.

Entonces... es bueno probar con diferentes ventanas gráficas.

Si tiene 2 sitios web y uno muestra elementos visuales antes que el otro, terminará con una puntuación de índice de velocidad más baja.

Cuanto más bajo, mejor.

Pintura con contenido más grande

Este es el tiempo que tarda el elemento más grande de la página en renderizarse por completo.

A medida que se carga la página, el primer elemento se convierte en el elemento más grande, pero se reemplaza a medida que se agregan elementos más grandes.

El último elemento de una página podría ser el elemento más grande de la página (por ejemplo, una imagen grande) o no serlo.

Nota: no estamos hablando de cuánto espacio ocupa en la pantalla.

Aquí hay 2 ejemplos.

El tiempo desde que el sitio web comenzó a mostrarse hasta el momento en que se mostró la última imagen en la página se consideraría la pintura con mayor contenido. ¡Esto se debe a que la imagen ocupa la mayor parte de la página!

Pero…

En el caso a continuación, la imagen de 'Instagram' fue la imagen más grande que se mostró, por lo que la pintura con contenido más grande es cuando se cargó la penúltima pantalla.

Se descuenta la última pantalla. Todo lo que se agregó a esa pantalla fue el 'botón de reproducción de Google', que era una imagen más pequeña que la de 'Instagram'.

Según Google, si desea brindar una buena experiencia de usuario, LCP debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse por primera vez.

Guía:

Oportunidades

La sección Oportunidades le muestra las sugerencias que podrían ayudar a mejorar el tiempo de carga de la página.

Cada sugerencia también muestra la reducción estimada en el tiempo de carga de la página si implementaste la recomendación.

Diagnóstico

Diagnostics destaca las mejores prácticas en desarrollo web que debería considerar implementar.

Sin embargo, incluso si realiza estas mejoras, no afectarán directamente la puntuación de rendimiento de su página.

Resumen

Mejorar la velocidad de su sitio web se trata de brindar a los visitantes una mejor experiencia. Tener un sitio que carga rápidamente hace que tanto los usuarios como los motores de búsqueda estén más contentos, pero también afecta su capacidad para convertir a los visitantes en clientes.

Una herramienta como Google PageSpeed ​​Insights es increíblemente útil porque te muestra por dónde empezar y en qué temas debes centrarte para mejorar el rendimiento de tu sitio web.

Esperamos que este artículo lo haya ayudado a comprender cómo funciona esta herramienta y qué significan realmente los resultados de la prueba para que pueda comenzar a optimizar sus páginas web y crear una experiencia increíble para sus visitantes.