Core Web Vitals es un conjunto de métricas relacionadas con la velocidad, la capacidad de respuesta y la estabilidad visual, que contribuyen en mejorar la experiencia de usuario en el sitio web.
Produciendo un cambio de clasificación de búsqueda, en el que se incluyen las métricas de experiencia de página.
La señal de experiencia de la página, mide aspectos de cómo los usuarios perciben la experiencia de interactuar con una página web.
La optimización de estos factores hace que la web sea más agradable para los usuarios en todos los navegadores y sitios web.
Las Core Web Vitals son un conjunto de métricas centradas en el usuario, que cuantifican los aspectos clave de la experiencia del usuario.
¿Qué son las Core Web Vitals y cómo puedes optimizarlas?
Optimización de métricas para el usuario en la web.
Google ha anunciado un cambio en el algotitmo de Búsquedas, que incorpora métricas de la experiencia del usuario en la página.
Estas métricas incluyen las Core Web Vitals (Métricas Web Principales), que junto con otros principios, plantean algunos cambios, en los que se incluyen la calidad de las experiencias de usuario en una página.
Los usuarios muestran preferencias sobre los sitios con una buena experiencia de página.
Hay criterios de experiencia del usuario, como la rapidez con la que se cargan las páginas y la compatibilidad con dispositivos móviles, que influyen como factores para clasificar los resultados.
Miden dimensiones de la usabilidad web, como el tiempo de carga, la interactividad y la estabilidad del contenido a medida que se carga.
Estos criterios se combinan con los criterios de búsqueda ya existentes en la experiencia de página, como la compatibilidad con dispositivos móviles, navegación segura, seguridad HTTPS, que proporcionan una imagen holística de experiencia de página, aumentando los aspectos de experiencia de usuario que se puedan medir.
Cómo optimizar Core Web Vitals o métricas web principales.
Core Web Vitals son un conjunto de métricas relacionadas con la velocidad, la capacidad de respuesta y la estabilidad visual.
Estos tres aspectos de la experiencia del usuario, se miden con tres métricas.
LCP (Largest Contentful Paint)
Renderizado del mayor elemento con contenido, que mide el rendimiento de una carga, visible en viewport.
Una de los principales aspectos negativos del LCP es el tiempo de respuesta lento del servidor, debido a una mala estructura del back-end, consultas de bases de datos no optimizadas, respuestas lentas en resolverse de la API, procesamiento que bloquea JavaScript y CSS.
Elementos que afectan a LCP; Elementos de imagen, elementos de imagen dentro de elemeto SVG, vídeos, elementos de bloque que contienen nodos de texto.
Cómo optimizar la métrica LCP para Seo
Acciones de mejora en LCP;
- Reducir, optimizar y comprimir el tamaño de imágenes principales.
- Imágenes adaptables.
- CDN de imágenes.
CDN Content Delivery Network o red de entrega de contenidos. Es una red de servidores distribuidos de manera estratégica por todo el mundo, de manera que puedan servir las imágenes desde el servidor más cercano al que se conecta un visitante de tu sitio web.
La optimización de imágenes se puede realizar a través de la herramienta Lighthouse, auditoría del elemento LCD.
- Carga diferida de imágenes.
- Aplazar JavaScript y CSS no esencial.
Antes de que un navegador pueda renderizar cualquier contenido tiene que analizar el lenguaje de marcado HTML de un árbol de DOM. El analizador debe pausar si encuentra hojas de estilo externas o una secuencia de comandos sincrónica. Las secuencias de comandos y hojas de estilo pueden bloquear el procesamiento, retrasando el primer elemento con contenido y en consecuencia, el de mayor contenido. Es recomendable aplazar las secuencias de comandos y hojas de estilo no esenciales, para acelerar la carga.
Esto se puede implementar con la técnica CSS esencial, que consiste en intercalar el CSS esencial y aplazando la carga de estilos no esenciales, con la finalidad de entregar al usuario contenido importante lo más rápido posible.
- Tiempo de respuesta de servidores.
El tiempo de respuesta de servidor se puede validar a través de Lighthouse, mediante la auditoría Reduce initial server response time, una técnica para reducir el tiempo de respuesta de servidor es [link rel] Preload y Server Push, que permite enviar los recursos más importantes de una página tan pronto como responden con las solicitudes iniciales, mejorando su tiempo de carga.
Optimize Largest Content Paint
FID (First Input Delay)
Latencia de la primera interacción, que mide la interactividad, el tiempo entre que un usuario interactúa por primera vez con una página y el momento en el que hace clic en un botón o realiza una acción IU, control de JavaScript o el momento en que el navegador puede responder a esa interacción.
Elementos que causan una latencia de primera interacción deficiente;
- Tareas extensas en el subproceso principal.
- Ejecución pesada de JavaScript, grandes bundles.
- Secuencias de comandos que bloquean la renderización.
Herramientas de control y optimización Lighthouse y Dev Tools.
Optimize First Input Delay
Cómo optimizar la métrica FID para Seo
- Localizar áreas en las que se pueda desarrollar tareas largas o ejecución pesada de secuencias de comandos.
- Minimizar el trabajo en el subproceso principal, con el objetivo de asegurar de que el subproceso principal no esté ocupado y que las interacciones del usuario no se retrasen.
- Entregar lo que el usuario, necesita cuando lo necesita.
CLS (Cumulative Layout Shift)
Cambio de disposición acumulativo, que mide la estabilidad de la disposición.
Es una métrica muy importante para medir la estabilidad visual, porque ayuda a cuantificar todas las veces que vemos cambios sorpresivos en el contenido de una página y ayuda a asegurarse de que la página sea lo más agradable posible.
¿Alguna vez has estado leyendo un artículo online y de repente algo cambia en la página? sin previo aviso el texto se mueve y no encuentras donde se queda.
Eso es lo que ocurre cuando sucede un Cumulative Layout Shift.
¿Cuál es la causa de un CLS deficiente?
Cuando tenemos imágenes sin dimensiones, anuncios, elementos incorporados o iFrames sin dimensiones, contenido insertado dinámicamente y fuentes web que causan destellos de contenido sin estilo (FOUC).
Un destello de contenido sin estilo (FOUC, también destello de texto sin estilo ) es una instancia en la que una página web aparece brevemente con los estilos predeterminados del navegador antes de cargar una hoja de estilo CSS externa, debido a que el motor del navegador web muestra la página antes de que se recupere toda la información. La página se corrige sola tan pronto como se cargan y aplican las reglas de estilo; sin embargo, el cambio puede distraerlo. Los problemas relacionados incluyen destellos de texto invisible (FOIT) y destellos de texto falso (FOFT).
Cómo optimizar la métrica CLS para Seo
Pautas para la optimización de CLS;
- Incluir atributos width y height en los elementos de imagen y vídeo, también se podría reservar el espacio disponible con Aspect Ratio de CSS, este método asegura que el navegador pueda ubicar el contenido y la cantidad correcta de espacio en el documento cuando se carga la imagen.
Esta acción se puede comprobar con la herramienta Lighthouse.
¿Cómo afectan los elementos de una página en el CLS?
Mediante la herramienta Lighthouse y la opción auditoría Avoid large layout shifts, que resalta los elementos del DOM que más afectan al CLS.
Document Object Model o DOM (Modelo de Objetos del Documento o Modelo en Objetos para la Representación de Documentos) es esencialmente una interfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML, que es para lo que se diseñó principalmente.
El DOM permite el acceso dinámico a través de la programación para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (JavaScript).
Optimize Cumulative Layout Shift
- Carga de imágenes; Reservar espacio suficiente del diseño para el contenido dinámico de anuncios, promociones, etc.
Definir un contenedor en el que se puedan adaptar cualquiera de los elementos posibles, asegurando que el contenido que lo incluye no cambie el lugar del contenido de la página, ofreciendo el contenido al usuario sin impactar negativamente en el resto de la experiencia del usuario.
Definiciones de estados
| Rápidas | Necesitan mejora | Lentas | |
|---|---|---|---|
| LCP | <2,5 s | <=4 s | >4 s |
| FID | <100 ms | <=300 ms | >300 ms |
| CLS | <0,1 | <=0,25 | >0,25 |
- LCD (Renderizado del mayor elemento con contenido)
Tiempo que tarda en renderizarse el mayor elemento con contenido visible en el viewport, a partir del momento en que el usuario solicita la URL. Mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, LCP debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse.
- FID (Latencia de la primera interacción)
Tiempo que transcurre desde la primera interacción de un usuario con una página web. Para medir este tiempo, se tiene en cuenta el elemento interactivo en el que el usuario hizo clic por primera vez. Mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, LCP debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse.
- CLS (Cambios de diseño acumulados)
Cuánto ha cambiado el diseño de la página mientras se cargaba. El valor de esta métrica va de 0 a 1. mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.
Herramientas de optimización Core Web Vitals
Jose Roig nos da una magistral clase sobre el origen de las Google Web Core Vitals, qué miden, qué importancia tienen para SEO y cómo trabajar con ellas. By IKAUE
- Google Search Console (Speed Report)
- Firebase Performance Monitoring (beta)
- Google Lighthouse 6.0 (incluye soporte para medir LCP)
- Chrome DevTools
- PageSpeed Insights
- Chrome User Experience Report (valores LCP del mundo real agregados a nivel de origen)
- web.dev
- Google Big Query
- Chrome UX Report API
- Google Data Studio
- Web Vitals Extension
- GTMetrix
Presentación sobre cómo analizar competidores en métricas de Core Web Vitals con BigQuery en el evento #DOYOUSEO del 1 de octubre de 2020.
Benchmark de competidores con CWV y BigQuery from Estela Franco
Te puede interesar;
Cursos de SEO Técnico: WPO, Desarrollo web y Programación
