Web Vitals Métricas de un sitio web saludable

La experiencia de usuario es un factor SEO esencial para al analizar un sitio web porque rápidamente deja ver lo útil que es. Google, propone evaluar las Core Web Vitals, un conjunto de Web Vitals que aplican a cualquier tipo de sitio web y estarán disponibles en todas sus herramientas. Los tres aspectos prinicipales osn: Carga, Interactividad y Estabilidad visual.

Optimizar la calidad de la experiencia de usuario debe ser el norte de todo Consultor SEO.

 

Métricas SEO Web Vitals

Para cada una de las métricas que presentaré a continuación, asegúrate de alcanzar el umbral recomendado que es equivalente al percentil 75 de cargas de páginas, segmentado por dispositivos móviles y de escritorio.

LCP

Pintura con contenido grande (Largest Contenful)

Mide el rendimiento de carga de la página. Para que se produzca una buena experiencia de usuario, el LCP debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse. LCP marca el punto en la línea de tiempo de carga de la página cuando el contenido principal de la página probablemente se haya cargado.

 

Core Web Vitals: LCP
Foto: Web.dev

¿Qué elementos se consideran al evaluar la métrica LCP?

En mis cursos y seguro en otros artículos, he comentado que Google no puede leer la imagen como tal. Pero si el texto incluido en el código HTML de lapágina,por lo que es muy importante definir y describir muy bien los elementos gráficos.

Los tipos de elementos que considera para la pintura del contenido más grande son:

  • <img> elementos
  • <image> elementos dentro de un <svg> elemento
  • <video> elementos (usa la imagen)
  • un elemento con una imagen de fondo cargada a través de la url()
  • Elementos de bloque que contienen nodos de texto o elementos secundarios.

Notas:

  • Las porciones de elementos que se desbordan o exceden el tamaño de la pantalla no son tomados en cuenta para este análisis.
  • Cuando se comprimen imágenes, el tamaño que se lee no es el original de la imagen sino el que se muestra en pantalla (el reducido).
FID

Retraso de la primera entrada (Fisrt Input Delay)

Mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos. FID mide la capacidad de respuesta y cuantifica la experiencia que sienten los usuarios cuando intentan interactuar por primera vez con la página.

First Input Delay
Foto: Web.dev
Tanto en tu sitio web como en lavida real,la primera impresión es lo que cuenta, y se puede medir. Clic para tuitear

Antes de continuar, me gustaría que respondas esta pregunta:

 ¿Te gusta diseñar sitios web cargado de efectos porque crees que le gustará a los usuarios?  

Si es así, lee con atención lo siguiente:

Cuando voy a trabajar en el diseño de un proyecto web nuevo, lo primero que viene a mi mente es:

¿Cómo haré para que cargue rápidoy elusuario pueda llegar a realizar una accion importante en menos de tres pasos?

La razón es sencilla.

Tenemos muchas tecnologías para diseñar sitios web muy bonitos y alucinantes pero si elpensamiento solo se queda ahí, en la satisfacción delego, nos estamos olvidando de lo más importante…el usuario.

La mayoría de los efectos y eventos que agregamos a un sitio web, se generan con código JavaScript. Este código es procesado por el Navegador y cuando el archivo se hace muy grande, se pone en cola de procesamiento. Al momento que el usuario hace una petición de carga del sitio web, se genera una latencia de entrada (o retraso) porque el Navegador está ocupado analizando y procesando todo el código JavaScript y mientras está realizando este proceso, no puede ejecutar ni detectar ningún evento. Por lo tanto, se ralentiza la carga de otros contenidos del sitio como el texto o las imágenes, mostrando en su defecto, una pantalla en blanco.

FID solo mide el retraso en el procesamiento de los eventos, no el tiempo de procesamiento en sí.

Como dato importante, considera analizar en qué momento interactúan los usuarios con tu sitio web. ¿En el momento en que está demorando más, o unos minutos antes? La respuesta la tendrás al leer esta métrica: FID.

¿Qué elementos HTML se consideran al evaluar la métrica FID?

Estos son los elementos o directivas HTML nativos que deben esperar a que se completen los procesos o tareas en curso antes de responder a las interacciones del usuario:

  • Campos de texto, casillas de verificación y botones de opción (<input>, <textarea>)
  • Opción de selección o menús desplegables (<select>)
  • Enlaces (<a>).

Toma en cuenta:

  • Considera reubicar estas opciones en la segunda mitad de la página
  • Esta métrica solo se mide cuando un usuario real interactúa con la página
  • No todas las interacciones son relevantes
  • Es posible que el usuario no interactuae con la página.
CLS

Cambio de diseño acumulativo (Cumulative Layout Shift)

Mide la estabilidad visual. Es decir, mide la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página.

Cumulative Layout Shift
Foto: Web.dev

Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1. CLS mide la estabilidad visual y cuantifica la cantidad de cambio de diseño inesperado del contenido de la página visible.

Cambio de diseño - CLS -Web Vitals

Se produce por el movimiento inesperado del contenido de la página generalmente ocurre porque los recursos se cargan de forma asincrónica o los elementos DOM se agregan dinámicamente a la página sobre el contenido existente

Cada métrica del Core Web Vitals mide un aspecto diferente de la experiencia del usuario.

¿Cómo evaluar los resultados?

Métrica Bueno Pobre Percentil
LCP Pintura con contenido más grande ≤2500ms > 4000 ms 75
PID Retardo de la primera entrada ≤100ms > 300 ms 75
CLS Cambio de diseño acumulativo ≤0.1 > 0,25 75

El sitio web o una página que obtiene un percentil de 75  en todas sus visitas cumple con el umbral y se clasifica como Bueno para una métrica en particular. Si el umbral es menos de 25% de las visitas, se considera Deficiente. 

Herramientas para medir Core Web Vitals

Google ha dispuesto varias herramientas para medir estas métricas SEO, adicional a la biblioteca de JavaScript web-vitals. Las enumero a continuación:

Consideraciones y recomendaciones

  • Toma en cuenta las solicitud de tu cleinte dentro de una solicitud de diseño o desarrollo de sitio web y antes que nada, asesóralo. ¿La razón? Siempre quieren un sitio web bonito y no siempre, tienen conocimientos técnicos que los ayuden a tomar mejores decisiones o, le lleven a representar sus requerimientos en el sitio web sin perjudicar la experiencia de usuario. Recuerda…tu eres el especialista.
  • Al evaluar la carga de un sitio web y en particular, la métrica LCP (Primera carga), piensa en la percepción del usuario y en eltiempo promedio que pueden esperar a que se muestre la primera imagen. No todos los usuarios van a esperar el mismo tiempo antes de cancelar o cerrar la página. Previo a la toma de decisiones, evalúa el comportamiento de usuario en tu sitio web.
  • Aunque Google establece un percentil de 75, toma en cuenta factores atípicos como conexiones muy lentas y variantes en el comportamiento de usuario para la clasificación.
  • En comparación con PCP (First Contentful Paint), que solo captura el comienzo de la experiencia de carga, si una página muestra una pantalla de bienvenida, una barra de indicador de carga o una venta de contenido noticioso emergente, no es relevante para el usuario en esa primera impresión. Recuerda…solotienes 5 segundos para impresionar…aprovechalos bien.

Una forma de medir cuándo se carga el contenido prinicipal es observar cuándo se procesó el elemento más grande que se muestra en pantalla.

Te muestro cómo optimicé la carga de la primera imagen en mi sitio web (estás aquí ahora)

Lo primero que te diré debes tomar en serio la calidad de la experiencia de usuario en el sitio web, ya que es una métrica esencial para valorar tu sitio. Y es parte de la filosofía de Google, elproporcionar la mejor experiencia a los usuarios que hacen uso del buscador y desde allí, esperamos visitas.

Mi sitio web creada en WordPress, tenía un FCP de 2.6 segundos, un tiempo para interactividad de 4,3 segundos y un LCP de 4,9 segundos (2,5 segundos es lo recomendado). El índice de velocidad era de 6,6 segundos.

Agregué el plugin WP Optimize y activé la opción de minificar los códigos HTML, CSS y JavaScript. Solo un pequeño cambio y cambiaron las cifras. Las alertas en índice de velocidad y LCP desaparecieron.

¿Eso es todo? ¡NO!

Pero te comparto pequeñas soluciones que te traerán grandes satisfacciones. Sobre las siguientes mejoras y modos de optimización en sitios web creados con WordPress, te estaré contando en los siguientes artículos. Suscríbete y date una vuelta por la sección de SEO y Analítica para que aprendas mientras implementas.

Si te fue de provecho este artículo, házmelo saber en los comentarios y recuerda enviarlo a quién creas que necesite aprender a optimizar su propio blog o sitio web.

 

Comparte

Deja un comentario