Google Core Web Vitals – Guía Completa Español

Google Core Web Vitals. ¿Qué es?

Core Web Vitals es en la actualidad un factor clave en el SEO. Un must de todo experto en posicionamiento.

Este sistema de métricas de Google dan la pista necesaria para apalancar todo trabajo de posicionamiento SEO, revelando qué experiencia tienen los usuarios con una página web, en relación con el rendimiento de carga, velocidad, interacción y estabilidad.

Aquí una guía completa.

¡Chécalo Aquí!

Core Web Vitals y el Cambio en el Mundo SEO

Lo primero de lo primero: ¿Qué es Core Web Vitals?

Core Web Vitals es una especie de ranking que evalúa una página web. Un conjunto de factores específicos que Google considera importantes en la experiencia general del usuario de una página web.

Su resultado («bueno», «necesita mejorar» o «pobre») se enfoca en velocidad y usabilidad.

Core Web Vitals, a su vez, está compuesto por 3 grandes conceptos que determinan su resultado:

1. LCP: «largest contentful paint» o «la imagen con contenido más grande».
2. FID: «first input delay» o «el retraso de la primera entrada».
3. CLS: «cumulative layout shift» o «el cambio de diseño acumulativo».

En resumen, Core Web Vitals es un subconjunto de factores que formarán parte de la puntuación de «experiencia de la página» de Google. En otras, básicamente, la forma en que Google evalúa la UX general de una página.

¿Dónde encontrar el resultado de Core Web Vitals? En Google Search Console. Basta buscarlo en la sección «EXPERIENCIA» de la cuenta de Search Console.

¿Por qué Es Importante para el SEO el Resultado de Core Web Vitals?

Google planea hacer que la experiencia de la página sea un factor oficial de clasificación de Google.

La experiencia de la página será una mezcla de factores que Google considera importantes para la experiencia del usuario, incluidos:

• HTTPS
• Adaptabilidad móvil
• Falta de ventanas emergentes intersticiales
• “Navegación segura” (básicamente, no tener malware en una página)

Y Core Web Vitals será una parte muy importante de ese puntaje.

De hecho, a juzgar por su nombre en sí «core», es justo decir que los datos básicos de la web constituirán la mayor parte del puntaje de experiencia de su página.

Es importante señalar que una excelente puntuación de experiencia de página no lo llevará mágicamente al puesto número 1 en Google.

De hecho, la experiencia de una página web es sólo uno de varios (aproximadamente 200) factores que utilizan para clasificar los sitios en la búsqueda.

A continuación desglosamos los 3 Core Web Vitals. Y enseñamos cómo mejorar cada uno de ellos.

1: LCP Core Web Vitals: Pintura o Imagen con Contenido más Grande

LCP es en pocas palabras, el tiempo que demora una página en cargarse, desde el punto de vista de un usuario real.

LCP es el tiempo que se carga ese elemento «mas largo» de la página.

Ejemplo:

Una web tiene un iframe (que normalmente tiene un montón de código). Ese seria el LCP. Es el contenido mas «grande» de una página.

Es decir, es el tiempo que transcurre desde que se hace clic en un enlace hasta que se ve la mayor parte del contenido en pantalla.

LCP es diferente de otras medidas de velocidad de página, como TTFB y First Contextual Paint, que no representan necesariamente cómo es para un usuario abrir una página web.

Por otro lado, LCP se enfoca en lo que realmente importa cuando se trata de la velocidad de la página: poder ver e interactuar con la página en sí.

¿Cómo Comprobar la Puntuación LCP de una web?

Basta ir a Google PageSpeed Insights o revisar los datos acumulados en Google Search Console.

Testear la velocidad de una web es sumamente útil, especialmente cuando se trata de detectar áreas para mejorar.

Al igual que Google PageSpeed Insights, los datos en Search Console provienen del Informe de experiencia del usuario de Chrome.

Pero a diferencia de PageSpeed Insights, en GSC se puede ver los datos de LCP en todo el sitio web. De esta manera, en lugar de analizar páginas aleatorias una por una, se obtiene una lista de URL que son buenas y malas.

Por cierto: la meta para Google es que una página abra en 2,5 segundos. Esto puede ser un verdadero desafío para páginas web grandes. O páginas con muchas características.

Recomendaciones para Mejorar el LCP de una Web:

• Eliminar cualquier secuencia de comandos de terceros innecesaria: se estima que cada secuencia de comandos de terceros ralentiza una página en 34 ms.
• Actualizar el servidor web o hosting: un buen hosting = tiempos de carga más rápidos en general (incluido LCP).
• Configurar la carga diferida: la carga diferida hace que las imágenes solo se carguen cuando alguien se desplaza hacia abajo en una página. Lo que significa que puede lograr LCP significativamente más rápido.
• Eliminar elementos de página grandes: En este caso, Google PageSpeed Insights indicará si su web tiene un elemento que esté ralentizando el LCP de una página.
• Minimizar el CSS: el CSS voluminoso puede retrasar significativamente los tiempos de LCP.

2. FID Core Web Vitals: Primera Demora de Entrada

El segundo Core Web Vital de Google: First Input Delay.

Como señalamos, este Core Web Vital mide el tiempo que tarda un usuario en interactuar con su página.

El FID es el primer elemento de la web que se carga.

Ejemplos de interacciones incluyen:

• Elegir una opción del menú de una web
• Al hacer clic en un enlace en la navegación del sitio
• Ingresar el correo electrónico en un campo
• Apertura del «texto de acordeón» en dispositivos móviles

Google considera que la FID es importante porque tiene en cuenta cómo los usuarios de la vida real interactúan con las páginas web.

Google tiene criterios específicos para tener un FID «aceptable». FID técnicamente mide cuánto tiempo tarda en suceder algo en una página. En ese sentido, es un puntaje de velocidad de página. Pero va un paso más allá y mide el tiempo que tardan los usuarios en hacer algo en su página.

Para una página que es 100% contenido (como un blog o artículos de noticias), FID probablemente no sea un gran problema. La única «interacción» real es desplazarse hacia abajo en la página.

Pero para una página de inicio de sesión, página de registro u otra página donde los usuarios necesitan hacer clic rápidamente en algo, FID es ENORME.

Ejemplo:

En paginas como Mercadolibre, el tiempo que tarda el contenido en cargarse no es tan importante. Lo que importa es qué tan rápido puede comenzar a escribir la persona o usuario sus datos de inicio de sesión.

Recomendaciones para Mejorar el FID de una Web

• Minimizar o diferir JavaScript: es casi imposible que los usuarios interactúen con una página mientras el navegador está cargando JS. Por lo tanto, minimizar o diferir JS en su página es clave para el FID.
• Eliminar cualquier secuencia de comandos de terceros que no sea crítica: al igual que con FCP, las secuencias de comandos de terceros (como Google Analytics, mapas de calor, etc.) pueden afectar negativamente a FID.
• Usar un caché de navegador: esto ayuda a cargar contenido en su página más rápido. Lo que ayuda al navegador de su usuario a ejecutar las tareas de carga de JS aún más rápido.

3. CLS Core Web Vitals: Cambio de Diseño Acumulativo

El cambio de diseño acumulativo (CLS) es qué tan estable es una página mientras se carga (también conocida como «estabilidad visual»).

Lo que busca es que, desde la primera carga, los elementos aparezcan en la ubicacion que van a estar.

Ejemplo:

Vas a cliquear algo y por error te cargó una imagen y terminaste cliqueando la imagen.

En otras palabras: si los elementos de una página se mueven mientras se carga la página, entonces tiene un CLS alto. Lo cual es muy malo.

Lo ideal es que los elementos de una página sean estables a medida que se cargan. De esa forma, los usuarios no tienen que «volver a aprender» dónde se encuentran los enlaces, las imágenes y los campos cuando la página está completamente cargada.

O que suceda que hagan clic en algo «por error».

Recomendaciones para Mejorar el CLS de una Web

• Usar dimensiones de atributos de tamaño establecidos para cualquier medio (video, imágenes, GIF, infografías, etc.): de esa manera, el navegador del usuario sabrá exactamente cuánto espacio ocupará ese elemento en esa página. Y no lo cambiará sobre la marcha mientras la página se carga por completo.
• Asegurarse de que los elementos de los anuncios tengan un espacio reservado: de lo contrario, pueden aparecer repentinamente en la página, empujando el contenido hacia abajo, hacia arriba o hacia un lado.
• Agregar nuevos elementos de la interfaz de usuario debajo del pliegue: de esa manera, no empujan hacia abajo el contenido que el usuario «espera» que se quede donde está.