Core Web Vitals: qué significan y por qué son importantes Descubre las 3 principales métricas de los Core Web Vitals de Google y por qué son tan importantes para tu web

core-web-vitals-seo
En esta entrada se habla de:
| |

Los Core Web Vitals son las tres métricas principales que Google considera importantes en la experiencia de los usuarios con una web.

Estos Core Web Vitals cuantifican mediciones de velocidad de la página y las interacciones del usuario en la misma.

Definición de Core web Vitals

Se podrían definir como un conjunto de factores que forman parte de la puntuación de lo que Google llama “experiencia de página”. Estos factores son la forma en que Google juzga la experiencia general del usuario (UX) en una página web.

Los Core web Vitals y el posicionamiento en Google

Google no promete que una excelente puntuación de experiencia de página te vaya a llevar al puesto número 1 en los resultados de búsqueda, pero lo que sí deja claro es que la experiencia de página es uno de los más de 200 factores que están utilizando en estos días para clasificar los sitios en los resultados de búsqueda.

¿Por qué son tan importantes los Core Web Vitals?

Desde mediados de 2021, Google considera la “experiencia de página” como un factor de clasificación oficial.

Esquema de importancia de los Core Web Vitals para la experiencia de búsqueda en Google.

Como se puede ver en el gráfico, los Core Web Vitals se colocan arriba del todo. Es lo primero que se tiene en cuenta. La experiencia de página es una combinación de factores a los que Google da importancia para una experiencia del cliente positiva en general.

“Si tu web no carga rápido, no estarás en los primeros puestos”.

Puedes tener el contenido más bonito y más currado del mundo mundial, pero si tu web no carga rápido, no estarás en los primeros puestos.

Luego hay más cosas, no menos importantes, como son:

  • Adaptabilidad móvil (verse bien en dispositivos móviles)
  • Navegación segura (esencialmente: no tener malware presente en tus páginas)
  • Certificado de Seguridad (HTTPS). (que la página esté cifrada)
  • Falta de intersticiales intrusivos (que no haya ventanas emergentes molestas o intrusivas)

La importancia del apartado técnico en el posicionamiento de tu web

Hasta hace poco nos llenábamos la boca con eso de que el contenido es el rey y que el contenido es muy importante. Y ciertamente lo es, lo que ocurría es que se estaba dejando de lado el apartado técnico y se no se estaba dando mucha importancia al rendimiento de las páginas. 

Ahí es donde entran los Core Web Vitals, que ya se han convertido en una parte especialmente importante a la hora de diseñar sitios web.

En Wordketing nos ha quedado claro que los Core Web Vitals ya es uno de los aspectos más importantes a tener en cuenta para conseguir una buena puntuación por parte de Google.

¿Cuáles son las métricas principales de los Core Web Vitals?

A continuación, explico los tres Core Web Vitals y qué hacer para mejorarlos.

Core Web Vitals: qué significan y por qué son importantes 1

Core web Vitals | Largest Content Paint (LCP)

LCP es la cantidad de tiempo que tarda una página en cargarse cuando se abre por primera vez.

<<Pintar>> es una forma elegante de decir “pon todas las cosas que puedas ver en la pantalla frente a ti“. Es el tiempo que transcurre desde que se hace clic en un enlace hasta que se puede ver la mayoría del contenido en la pantalla.

Otras métricas de velocidad de página como First Contextual Paint (FCP) y Time to First Byte (TTFB) no son representaciones reales de cómo es para una persona abrir una página web, y ahí es donde LCP es único.

LCP realmente se enfoca en lo que le importa a un usuario cuando se trata de la velocidad de una página: la capacidad de ver e interactuar rápidamente con ella”.

Google divide la velocidad de LCP en tres categorías: buena, necesita mejorar y mala. Como práctica recomendada, desea que todas las páginas de su sitio alcancen un LCP de 2,5 segundos o menos.

Elementos considerados para el LCP del Core web Vitals:

Actualmente, Google especifica que los tipos de elementos considerados para esta métrica son:

  • Elementos <img>
  • Elementos <image> que están dentro de un elemento <svg>
  • Elementos <video>
  • Elementos con una imagen de fondo cargada.
  • Elementos de tipo bloque que contienen texto u otros elementos secundarios de texto.

Google señala que se pueden agregar elementos adicionales más adelante a medida que se realicen más investigaciones sobre la experiencia del usuario. Todas estas reglas pueden representar un desafío para páginas web grandes o páginas ricas en funciones.

Estos son algunos consejos para mejorar el LCP de tu sitio web:

  • Elimina los scripts de terceros innecesarios. Estos pueden ralentizar significativamente la velocidad de la página.
  • Actualiza tu servidor web: un mejor alojamiento casi siempre significará tiempos de carga más rápidos (incluido LCP).
  • Habilita la carga diferida: la carga diferida hace que las imágenes solo se carguen cuando estén listas para ser vistas (es decir, cuando alguien se desplaza hacia abajo en su página). Habilitar la carga diferida significa que su LCP puede ser significativamente más rápido.
  • Elimina elementos de página grandes: PageSpeed Insights puede mostrarle si su página tiene un elemento que está ralentizando el LCP de su página.
  • Minimiza tu CSS: el CSS voluminoso puede retrasar significativamente los tiempos de LCP.

Core web Vitals | First Input Delay (FID)

Segunda métrica. Tu web parece rápida, todo parece ir bien entonces… pero… ¿tus usuarios pueden interactuar bien con tu página?

Ahí es donde entra FID: es el tiempo real que le toma a un usuario poder interactuar rápidamente con tu página.

Ejemplos de interacciones que tiene en cuenta el FID:

  • Elegir un elemento de menú en un menú desplegable.
  • Hacer clic en un enlace en la navegación de tu sitio.
  • Ingresar su correo electrónico en un campo de formulario.
  • Abrir el “menú acordeón” en un dispositivo móvil.

Google considera que la FID es importante porque explica la facilidad con la que los usuarios de la vida real pueden interactuar con su sitio web”.

FID va un paso más allá en la puntuación de velocidad de la página y mide el tiempo que tardan los usuarios en hacer algo en tu página.

Para las páginas que son 100 % ricas en contenido, como blogs o artículos, FID normalmente no es un factor importante porque la “interacción” suele ser simplemente desplazarse hacia abajo en la página (para leer).

En el caso de que una página requiera interacción, si que es un factor importante, por ejemplo, una página de inicio de sesión o una página que requiere que el usuario ingrese su fecha de nacimiento para habilitar el acceso restringido por edad, una página con un formulario, o cualquier página que necesite interacción del usuario.

Algunas cosas que puedes hacer para mejorar la puntuación FID de tu sitio son:

  • Minimizar JavaScript: es casi imposible que un usuario interactúe con una página mientras el navegador está cargando JS. Minimizar o aplazar JS en tu página es de gran ayuda para mejorar FID.
  • Elimina los scripts de terceros no críticos: como mencionamos con FCP, los scripts de terceros (mapas de calor, análisis, etc.) pueden afectar negativamente a FID, por lo que es mejor eliminarlos cuando sea posible.
  • Usa diversos tipos de caché (de navegador, de objetos, en servidor…): esto ayuda a cargar contenido en su página más rápido y ayuda al navegador de su usuario a ejecutar rápidamente las tareas de carga de JS.

Core web Vitals | Cambio de diseño acumulativo (CLS)

Tercera métrica. El cambio de diseño acumulativo (CLS) marca la estabilidad de una página a medida que se carga.

Piensa en esto como “estabilidad visual” donde los elementos de la página visibles y en los que se puede hacer clic no se mueven ni tienen comportamientos extraños.

Si el texto, los botones y las imágenes de su página se mueven mientras se carga la página, entonces tendrás un CLS alto. Y eso es malo.

Idealmente, lo que deseamos es que los elementos visuales permanezcan en su lugar mientras se carga la página. El mayor problema con este cambio es cuando un usuario intenta hacer clic en un enlace o completar un campo y se mueve, por lo que termina sin hacer clic en él, lo que puede crear una experiencia de usuario negativa.

Según Google, hay cinco razones principales por las que ocurre el cambio de diseño acumulativo:

  • Imágenes sin dimensiones especificadas.
  • Anuncios, incrustaciones e iframes sin dimensiones especificadas.
  • Contenido inyectado dinámicamente.
  • Fuentes web que causan FOIT/FOUT (Flash of Invisible Text / Flash of Unstyled Text).
  • Acciones que esperan una respuesta de la red antes de actualizar elementos o contenido en la página web.

Las imágenes y los videos siempre deben tener las dimensiones de alto y ancho definidas en el HTML de la página. En el caso de imágenes receptivas, siempre debe asegurarse de que los diferentes tamaños de imagen para diferentes ventanas gráficas usen la misma relación de aspecto.

Aquí te dejo algunas acciones que puedes tomar para minimizar CLS:

  • Usa dimensiones de atributos de tamaño establecidos para medios (video, imágenes, GIF, infografías, etc.): De esta manera, el navegador del usuario sabrá exactamente cuánto espacio ocupará ese medio en la página y dónde colocarlo para que lo haga sin entorpecer la carga de la página.
  • Asegúrate de que los anuncios tengan un espacio reservado: cuando los anuncios aparecen repentinamente en la página, pueden desplazar el contenido hacia abajo, hacia arriba o hacia un lado.
  • Descarga las fuentes web cuando sea posible: sabemos que las fuentes web, como la fuentes de Google, ayudan a que tu página se vea bonita, pero si las descargas y no las enlazas con los servidores de Google te ayudarán a garantizar que cada navegador pueda cargarlas más rápidamente.
  • Reduce los scripts de terceros y minimiza JavaScript tanto como sea posible: los scripts pueden retrasar el tiempo de respuesta de la red, por lo que mantenerlos al mínimo ayudará significativamente.

Ahora, y después de este “breve artículo informativo”, espero que hayas adquirido una mejor comprensión de qué son los Core Web Vitals y cómo hacer para mejorar tus páginas para obtener una buena puntuación de Google.

Compártelo con tus contactos, quedarás bien.

Tabla de contenidos

Entradas Relacionadas:

El autor de este artículo:

También puedes leer sobre: