Posted on Jan 5

Core Web Vitals - Todo lo que necesitas saber para entenderlas

🚑 CORE WEB VITALS

💡 ¿Qué son las Web Vitals?

Son una serie de reglas desarrolladas por Google en mayo 2020 que están enfocadas en mejorar la calidad de la experiencia de usuario en un sitio web, estás reglas son aplicadas por Google en todos los sitios web de internet.

En una forma simplificada, es una forma de saber qué factores deben ser optimizados en una página, estos factores comprenden tiempos y/o velocidad de carga, interacción y estabilidad visual.

💡 ¿Por qué son importantes en SEO?

Si bien los Web Vitals no influyen (por ahora) al posicionamiento de nuestro sitio web, se dice que los usuarios que visitan una página optimizada tienen un 24% menos de probabilidades de abandonar el sitio (en otras palabras, mejoraremos el Bounce Rate de nuestro sitio) y un 1% más de convertir.
Siendo la experiencia una objetivo significativo a considerar dentro de las estrategias de SEO Onsite.

💡 ¿Qué métricas hacen parte de las Web Vitals?

Existen 3 métricas Core esenciales: LCP (Largest Contentful paint), FID (First Input Delay) y CLS (Cumulative Layout Shift), sin embargo, dentro del reporte podemos encontrar otra serie de métricas enfocadas en tiempos de carga e interacción de un usuario con nuestro sitio.

Para cada una de estas métricas core, Google recomienda unos umbrales de tiempo y según los resultados de la inspección, cada sitio podrá ser clasificado como “bueno”, “necesita mejoras” o “pobre”.

Esta clasificación la hace usando el percentil 75%. Es decir que el 75% de las visitas a la página o sitio deben alcanzar un umbral “bueno”, por el contrario, si el 25% de las visitas a la página o sitio alcanzan el umbral pobre, el sitio será clasificado con bajo rendimiento

🚥 **LCP (Largest Contentful Paint o procesamiento de imagen con contenido más grande):**

Se encarga de medir la percepción de la velocidad de carga. Es decir, el contenido de mayor tamaño debe verse en este tiempo desde que la página empieza a cargar. Así se da una buena experiencia al usuario.

Los datos de LCP se componen principalmente de los siguientes elementos:

Elementos de imagen
Texto a nivel de bloque
Imágenes de carteles de vídeo
Imágenes de fondo

✅ PUNTUACIÓN DEL CORE: 2.5 segundos o menos

🚥 CLS (Cumulative layout shift o cambio de diseño acumulado).

Se refiere a la estabilidad visual y mide la cantidad de cambios inesperados en el diseño del contenido visible es decir reducir los movimientos inesperados que se producen cuando los elementos como los texto, botones e imágenes, son empujados hacia abajo mientras la página todavía se está cargando. Esto suele provocar frustración porque el usuario puede hacer clic en elementos equivocados por el movimiento.

✅ PUNTUACIÓN DEL CORE: 0.1 segundos o menos

🚥 **FID *(first input delay o retraso de primera entrada):***

Mide el tiempo que se demora la pagina en estar lista para comenzar a interactuar con elementos como: inputs, botones, campos de texto, etc.

Por ejemplo si el javascript del sitio no ha cargado, ningún botón o acción dentro de la pagina podrá ser utilizada.

✅ PUNTUACION DEL CORE: 100 milisegundos o menos.

🚪 Métricas complementarias:

🚥 TTFB - Time to first Byte

The Time to First Byte (TTFB) identifica cuándo tu servidor envía una respuesta al navegador del usuario. Cuanto más tarde el navegador en obtener los datos, más tardará en mostrar tu página.

El TTFB es la suma de estas fases de solicitud:

Tiempo de redirección.
Tiempo de arranque del service worker (si lo hay).
Búsqueda de DNS.
Negociación de la conexión y del Transport Layer Security (TLS).
Solicitud hasta que llega el primer byte de la respuesta.

✅ PUNTUACION DEL CORE: No aplica o no se puede poner un número exacto, ya que depende de variaciones de red.

🚥 FCP- First Contentful Paint

Calcula el tiempo que el navegador tarda en pintar el contenido mas grande above the fold, dentro del modelo de objetos del documento (DOM). Incluye texto, imágenes y lienzos no blancos.

✅ PUNTUACION DEL CORE: 1,8 segundos o menos.

🚥TBT - Total Blocking Time

Total Blocking Time (TBT) es la suma de todo el tiempo en el que una página está bloqueada para responder a la entrada del usuario.

Google calcula el total sumando la parte de bloqueo de las tareas largas de JavaScript entre el FCP y el TTI. Cualquier tarea ejecutada durante más de 50 milisegundos es una tarea larga. El período posterior a los 50 milisegundos es la parte de bloqueo.

✅ PUNTUACION DEL CORE: 200 milisegundos.

🚥 TTI - Time to Interacting

Es el tiempo que necesita una página para ser totalmente interactiva. Google considera que una página es interactiva cuando:

La página muestra contenido utilizable.
La página responde a las interacciones del usuario en 50 milisegundos.
Los propietarios del sitio registran controladores de eventos para los elementos más visibles de la página.

✅ PUNTUACION DEL CORE: 3,8 segundos o menos.

💡¿Cómo interpretar el reporte?

La construcción del reporte será levemente distinta según la herramienta que se use, sin embargo es usual encontrarse con:

🚑 Diagnóstico detallado para 4 categorías:

📉 Performance (Rendimiento): Comprenderá las métricas Core y complementarias.
👩🏻‍🦯 Accessibility (Accesibilidad): Comprenderá detalles sobre ARIA roles, Controles custom y asociación de labels, focus, controladores interactivos y navegabilidad por teclado, controladores interactivos y estado, orden lógico del TAB, bueno uso de elementos de HTML5 y orden visual consistente con el orden del DOM.
📝 Best Practices (Buenas practicas)
📰 [SEO:](https://developers.google.com/search/docs/essentials?visit_id=638107886021732888-3777756873&rd=1) Comprenderá si el contenido es confiable, útil y seguro para el usuario, uso de palabras adecuadas para la búsqueda de los usuarios y uso correcto de ellas dentro del contenido, links rastreables, buenas prácticas sobre contenido como imágenes, videos, datos estructurados y JavaScript.

🚦 Indicadores de 3 colores (tipo semáforo):

🍎 Rojo: Listado de reglas que se deben solucionar y que al hacerlo la puntuación mejorará considerablemente.
🍋 Amarillo: Listado de reglas que se pueden solucionar fácilmente, pero que no asegura mejorar la puntuación de forma significativa.
🥦 Verde: Listados de reglas que ya se cumplen y en las que no es necesario trabajar.

🌲 Treemap:

Esta herramienta será útil en caso de que

Se quiera ver detalladamente un paquete y profundizar en el.
Se quiera visualizar los bytes no utilizados en los archivos JavaScript.
Se quiera ver estadísticas de cobertura detalladas.

🗓️ Datos generales y de ambiente del test:

💡¿Cómo puedo optimizar mi página?

En el detalle de cada una de las 4 categorías del diagnóstico (en el reporte) se encontrará un listado de mejoras y sugerencias:

Se puede desplegar el acordeón para ver el detalle en donde deben hacerse los cambios:

💡¿Cuándo preocuparme?

🖍️ Debemos preocuparnos cuando los indicadores del diagnóstico está en rojo, es decir, pobres.

Solo para los reportes de pagespeed puedes encontrarte con dos tipos de datos:

💡 Datos de campo

Los datos de campo presentados en el informe provienen de los 28 días anteriores y siempre se presentarán con barras de distribución adjuntas. Esto se debe a que «field data» se compone de datos agregados del informe CrUX y la misma página web nunca funciona de la misma manera para todos los usuarios.

💡 Datos de laboratorio

Los datos de laboratorio de PageSpeed Insights de Google incluyen datos sintéticos de la API de Lighthouse. Lighthouse mide Core Web Vitals y tres métricas adicionales.

🧰 Herramientas:

🧮 Calculadora Web Vitals:

Esta herramienta ayudará a conocer los valores ideales para los test.

Lighthouse Scoring calculator

🏎️ Pagespeed:

PageSpeed Insights

👩🏼‍💻 Google Search Console:

Google Search Console

)

🛖 Lighthouse:

Esta disponible en las web tools del navegador.

Otros recursos:

- Aprende sobre WAI Aria y aumenta la calidad contextual del contenido y la accesibilidad para la navegación por teclado

🔮 WIKI

Termino	Definición
SEO Onsite o SEO On page	El SEO On Page es aquello cuyas optimizaciones están hechas en la misma dirección de la página web, incluyendo el contenido y la estructura de las páginas. Más allá del contenido generado, tienes que estar bien ubicado en las búsquedas de Google para enfrentar a tu competencia.
SEO Off page	SEO off page es el conjunto de estrategias de optimización que aplicas fuera de tus páginas web. La intención es mostrar cómo otras páginas de Internet ven tu sitio web que, de preferencia, debe ser como una ¡referencia en el mercado!
Above the fold	La expresión “above the fold” define la parte que los usuarios ven primero sin necesidad de desplazarse con el Scroll.💡 Es fundamental evitar la publicidad en esta zona, ya que Google considera que los banners pueden tener un efecto negativo en la usabilidad y la experiencia. Diseños amigables y sencillos. ⏳ En enero de 2012, Google sacó otra actualización de sus algoritmos en la que los sitios web que contenían demasiados banners (“Top Heavy”) en la zona “above the fold” recibieron penalizaciones y bajaron de posicionamiento. ⏳ En octubre de 2012 hubo otra actualización (“Top Heavy 2”). Desde entonces, Google recomienda no posicionar contenido único en la zona inferior de la página ("below the fold"), ya que podría empeorar la experiencia del usuario en el sitio web. Por otra parte, se desaconseja totalmente integrar demasiados anuncios a través de Google AdSense en la zona visible de la página.
Below the fold	Si se desplazan hacia abajo haciendo scroll, esta parte del sitio web se denomina “below the fold”
Crowler	El crawler o araña en SEO es un software o webbot capaz de rastrear todas las páginas web para leerlas, analizarlas y entenderlas con el objetivo de llevar toda la información a un servidor. Es en este servidor donde se le determinará una posición dentro de los resultados de búsqueda o SERP.

DEV Community