Las Core Web Vitals son métricas que Google nos pone a disposición para priorizar las webs que tienen una buena carga y experiencia de usuario y pueden ser medidas por Page Speed Insights de Google.
Resumen sobre Core Web Vitals
First Content Full Paint o FCP: Mide lo que tarda la primera pintura del contenido del “Document Object Model”
Speed Index: Mide la velocidad con la que se muestra el contenido durante la carga del sitio web.
Largest Contentful Paint o LCP: Mide el tiempo de la pintura del contenido más grande hasta que se imprime el último elemento de la web. Y considera imágenes (.jpg, .svg, .png), vídeos, vídeos insertados (tanto los de nuestro sitio web como llamados de Google u otro).
Time to interactive: Mide el tiempo que tarda la página en poder ser interactiva con el usuario.
Total Blocking Time: Mide el tiempo que la página está bloqueada para el usuario.
Cumulative Layout Shift: Mide los cambios inesperados dentro de la página, como imágenes o bloques.
¿Cómo califica Google?
Google utiliza estas 6 Core Web Vitals para medir el score de tu sitio web.
- First Content Full Paint o FCP: Es el 15% de la nota final.
- Speed Index: Es el 15% de la nota final.
- Largest Contentful Paint o LCP: Es el 25% de la nota final.
- Time to Interactive: Es el 15% de la nota final.
- Total Blocking Time: Es el 25% de la nota final.
- Cumulative Layout Shift: Es el 5% de la nota final.
Ahora veamos en profundidad que significa y que contiene cada uno de estos indicadores clave.
First Contentful Paint (FCP)
La métrica "First Contentful Paint" (FCP) mide el tiempo que transcurre desde que la página comienza a cargarse hasta que cualquier parte del contenido de la página se representa en la pantalla. Para esta métrica, el "contenido" se refiere al texto, las imágenes (incluidas las imágenes que están en segundo plano), los elementos<svg>o los elementos<canvas>que no están en blanco.
Primer despliegue de contenido (FCP) es una métrica importante, centrada en el usuario, para medir la velocidad de carga percibida porque marca el primer punto en la línea de tiempo de carga de la página en el que el usuario puede ver algo en la pantalla: una FCP rápida ayuda a tranquilizar al usuario de que algo está ocurriendo.
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una First Input Delay de 100 milisegundos o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio.
Largest Contentful Paint (LCP)
La métrica Largest Contentful Paint: Despliegue del contenido más extenso (LCP) es una métrica importante centrada en el usuario para medir la velocidad de carga percibida porque marca el punto en la línea de tiempo de carga de la página cuando es probable que el contenido principal de la página se haya cargado. Un LCP rápido ayuda a asegurar al usuario que el la página sea útil.
La métrica Largest Contentful Paint: Despliegue del contenido más extenso (LCP) reporta el tiempo para renderizar una imagen o el bloque de texto más grande visible dentro de la ventana de visualización, en relación con el momento en que la página comenzó a cargarse.
Para brindar una buena experiencia de usuario, los sitios deben esforzarse por tener Largest Contentful Paint de 2.5 segundos o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 para cargar páginas, que se segmenta entre dispositivos móviles y equipos de escritorio.
First Input Delay (FID)
First Input Delay: Demora de la primera entrada (FID) es una métrica importante centrada en el usuario ya que mide la capacidad de respuesta de la carga porque cuantifica la experiencia que sienten los usuarios cuando intentan interactuar con páginas que no responden, una FID baja ayuda a garantizar que la página sea utilizable.
FID mide el tiempo desde que un usuario interactúa por primera vez con una página (es decir, cuando hace clic en un enlace, pulsa un botón o utiliza un control personalizado impulsado por JavaScript) hasta el momento en que el navegador puede comenzar a procesar controladores de eventos como respuesta a esa interacción.
La primera impresión que tienen los usuarios de la rapidez con la que se carga su sitio se puede medir con First Contentful Paint (FCP). Pero la rapidez con la que su sitio puede pintar pixeles en la pantalla es solo una parte de la historia. ¡La capacidad de respuesta de su sitio es igualmente importante cuando los usuarios intentan interactuar con esos pixeles!
Cumulative Layout Shift (CLS)
Cumulative Layout Shift: Cambio Acumulativo del diseño (CLS) es una métrica importante centrada en el usuario para medir la estabilidad visual porque ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados; un CLS bajo ayuda a garantizar que la página sea agradable.
CLS es una medida de la ráfaga más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que se produce durante toda la vida útil de una página.
Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente. (Consulte más abajo para obtener más información sobre cómo se calculan las puntuaciones de cambio de diseño individuales).
Una ráfaga de cambios de diseño, conocida como ventana de sesión, es cuando uno o más cambios de diseño individuales ocurren en rápida sucesión con menos de 1 segundo entre cada turno y un máximo de 5 segundos para la duración total de la ventana.
La ráfaga más grande es la ventana de sesión con la puntuación acumulada máxima de todos los cambios de diseño dentro de esa ventana.
Para proporcionar una buena experiencia de usuario, los sitios deben esforzarse por tener una puntuación CLS de 0.1 o menos. Para asegurarse de que está alcanzando este objetivo para la mayoría de sus usuarios, un buen umbral para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y de escritorio.
Speed Index
Mide la velocidad con la que se muestra el contenido durante la carga del sitio web.
El índice de velocidad mide la rapidez con la que se muestra visualmente el contenido durante la carga de la página. Lighthouse primero captura un video de la carga de la página en el navegador y calcula la progresión visual entre marcos. Luego, Lighthouse usa el módulo Speedline Node.js para generar la puntuación del índice de velocidad.
| Speed Index (en segundos) |
Color-coding |
|---|---|
| 0–3.4 | Verde (rápido) |
| 3.4–5.8 | Naranja (moderado) |
| Over 5.8 | Rojo (lento) |
Tablero de métricas
Métricas de rendimiento centradas en el usuario
Todos hemos oído hablar de la importancia del rendimiento. Pero cuando hablamos de rendimiento, y de hacer que los sitios web sean “rápidos”, ¿a qué nos referimos específicamente?
La verdad es que el rendimiento es relativo:
- Un sitio puede ser rápido para un usuario (en una red rápida con un dispositivo potente) pero lento para otro (en una red lenta con un dispositivo de gama baja).
- Dos sitios pueden terminar de cargarse al mismo tiempo, pero uno puede parecer más rápido (si carga el contenido de forma progresiva en vez de esperar hasta el final para mostrar algo).
- Puede parecer que un sitio se carga rápidamente, pero luego responde lentamente (o no responde en absoluto) a la interacción del usuario.
Por eso, cuando se habla de rendimiento, es importante ser preciso y referirse al rendimiento en términos de criterios objetivos que pueden medirse cuantitativamente. Estos criterios se conocen como métricas.
Pero el hecho de que una métrica se base en criterios objetivos y pueda medirse cuantitativamente no significa necesariamente que esas medidas sean útiles.
Fuente: https://web.dev/user-centric-performance-metrics/#types-of-metrics
Si necesitas ayuda con tus Core Web Vitals o necesitas de una agencia para mejorar tu sitio web, puedes solicitar nuestro apoyo en el formulario que encontrarás en este artículo de blog o en nuestro formulario de contacto.
¡Estaremos encantados de ayudarte a mejorar tus resultados comerciales!