Core Web Vitals Que Es 2021

‘Evaluando la experiencia de la página para una mejor web’. Descubre lo que significarán los aspectos vitales de la web para tu tienda de Shopify.

Este artículo se publicó por primera vez en mayo de 2020 y se actualizó en 20 de Junio 2021.

Los estudios de Google y las investigaciones del sector han demostrado que los usuarios prefieren sitios web con una gran experiencia de página. Google siempre está estudiando qué factores debe tener en cuenta en los resultados de clasificación, como la velocidad de carga de la página y la facilidad de uso para los dispositivos móviles. La próxima actualización de la experiencia de la página tiene en cuenta una serie de factores que ponen al usuario en el centro. Estos «elementos vitales de la web» ayudarán a Google a ofrecer a los buscadores el mejor contenido.

Experiencia de la página y vitalidad de la web – Core Web Vitals

Las Core Web Vitals son un conjunto de métricas que ayudan a los propietarios de sitios web a medir dimensiones de la experiencia del usuario como el tiempo de carga, la interactividad y la estabilidad del contenido durante la carga. Google ha proporcionado detalles sobre un próximo cambio en la clasificación de las búsquedas que incorporará estas métricas de experiencia de la página.

Se está introduciendo una nueva señal que, según Google, «combina Core Web Vitals con nuestras señales existentes para la experiencia de la página a fin de proporcionar una imagen holística de la calidad de la experiencia de un usuario en una página web».

Estos cambios se han implementado en junio de 2021.

Además, cada año se incorporarán más señales de experiencia de página a medida que evolucionen las expectativas de los usuarios y aumente la capacidad de Google para medir más aspectos.

Clasificación de la experiencia de la página

¿Cuál es la idea detrás de esto? Esencialmente, tener una buena experiencia permite a la gente conseguir lo que quiere, y una mala experiencia podría impedir que alguien encuentre la información que busca. Google quiere seguir siendo el lugar de referencia para las personas que buscan información y, por lo tanto, tiene que ofrecer la mejor experiencia de búsqueda.

Al añadir la experiencia de la página a todas las demás señales, el objetivo es facilitar que los usuarios de los sitios web encuentren lo que buscan.

Métricas de la página de nivel superior

Los tres componentes principales de la experiencia de la página son:

  • ¿Qué tan rápido se carga la página?
  • ¿Con qué rapidez reacciona la página ante los usuarios?
  • ¿Cómo de estable es la página (los elementos saltan mientras se carga)?

Ahora podemos repasar algunas de las métricas de primer nivel para descifrar su significado. (Las 3 primeras son lo que se denomina «núcleo vital de la web»).

Core Web Vitals

  • Pintura de mayor contenido (LCP): esta métrica busca la imagen o el bloque de texto más grande. Mide el tiempo que se tarda en cargar ese elemento en la ventana gráfica. Puede tratarse de una imagen principal o de una gran sección de texto. (Lo ideal es que sea inferior o igual a 2,5 segundos).
  • Desplazamiento acumulado del diseño (CLS): esta métrica mide la estabilidad visual. En otras palabras, mide cuánto se desplaza el contenido a medida que se carga la página, dificultando la lectura o la visualización del contenido. (Es conveniente que sea inferior o igual a 0,1).
  • Retraso de la primera entrada (FID): se refiere a la rapidez con la que la página responde a un usuario (tras el clic de un botón, por ejemplo). Lo ideal es que sea inferior o igual a 100 ms.

También vale la pena tener en cuenta las siguientes métricas como medidas útiles de la eficacia de una página:

  • Primera pintura del contenido (FCP): esta métrica mide el tiempo que tarda en cargarse el texto de la parte superior de la página. Este es el contenido que se ve sin necesidad de desplazarse. Demasiadas fuentes y archivos de fuentes grandes afectarán a esta puntuación. Al igual que la lentitud en la carga de fuentes desde recursos externos.
  • Índice de velocidad (SI): esta métrica registra cuándo se detienen los cambios visuales por encima del pliegue. Esto significa que los vídeos y las imágenes principales afectan a la puntuación del índice de velocidad.
  • Tiempo de interacción (TTI): esta métrica mide el tiempo que tarda la página en estar lista para la entrada del usuario. Las aplicaciones que tardan en cargarse y los scripts de seguimiento o análisis afectan a esta métrica.
  • Tiempo total de bloqueo (TBT): esta métrica es como el TTI, pero mide la cantidad total de tiempo de bloqueo en la página. Se refiere a que el usuario no puede hacer clic en elementos o desplazarse por la página.

Es importante recordar que estos elementos vitales de la web no son en absoluto la única forma en que se juzgará su sitio. Hay muchos factores que Google tiene en cuenta a la hora de evaluar sus páginas.

Aunque el énfasis aquí es ciertamente la experiencia del usuario, Google ha dicho que tener un gran contenido seguirá siendo la consideración más importante: tratará de clasificar las páginas con la mejor información general, incluso si la experiencia de la página no es la mejor de las mejores.

Google no ha dicho cuánto se pondera cada factor, pero ha confirmado que «una buena experiencia de página no anula un contenido excelente y relevante». Sin embargo, si todos los demás factores son iguales, la experiencia de la página podría ser el factor decisivo para su visibilidad.

Actualización de Search Console

Google ha añadido una nueva sección a Search Console llamada «Core Web Vitals» que informa sobre el rendimiento de su sitio en relación con estas nuevas métricas de «Experiencia de página». Este informe le indicará en qué aspectos debe mejorar y cómo implementar esas mejoras.

Google ha actualizado sus herramientas como Lighthouse y PageSpeed Insights para que los propietarios de sitios web puedan medir mejor su propio rendimiento y mejorar la experiencia de la página para sus visitantes. Nuestro artículo sobre las auditorías de velocidad de los sitios web ofrece un buen resumen de las diferentes herramientas que puedes utilizar, además de sus ventajas y limitaciones a la hora de evaluar tu sitio.

Cómo prepararse para el Core Web Vitals (no todo es aplicable a las tiendas de Shopify)

1. Pintura de mayor contenido (LCP)

Posible problema: Tiempos de respuesta lentos del servidor

¿Como solucionar este problema?

a) Almacenar activos en caché: si su HTML es estático, el almacenamiento en caché puede evitar que se vuelva a crear cuando no es necesario, reduciendo el uso de recursos.

b) Dirigir a los usuarios a una CDN: una red de distribución de contenidos utiliza servidores en muchos lugares del mundo, lo que elimina el problema de que los usuarios experimenten un sitio más lento por estar lejos de un único servidor.


Posible problema: Tiempos de carga de recursos lentos

¿Como solucionar este problema?

a) Optimiza y comprime tus imágenes con tinypng: reduce el tamaño de los archivos sin sacrificar la calidad, por lo que se cargan más rápidamente pero siguen teniendo un buen aspecto.

b) Utilizar una CDN de imágenes: esto disminuirá la carga de imágenes, entregará imágenes adaptadas a cada dispositivo que las solicite y enviará imágenes desde el borde de la red.


Posible problema: Renderización del lado del cliente

¿Como se puede solucionar?

a) Reduzca su JavaScript y aplace el que no utilice

b) Utilizar el renderizado del lado del servidor si es posible


Posible problema: JavaScript y CSS

¿Como podemos solucionarlo?

a) Minifica tu CSS – Los archivos CSS suelen contener caracteres para facilitar su lectura pero que no son necesarios para el navegador. Minificarlos los elimina y los despeja por lo que mejorará el tiempo necesario para renderizar la página.

b) Descargar y servir la cantidad mínima de JavaScript necesaria a los usuarios. Reducir la cantidad de JavaScript que bloquea significa una renderización más rápida y, por lo tanto, una mejor LCP.


2. Desplazamiento acumulado de la disposición (CLS)

Posible problema: Cambios inesperados en el diseño

¿Como se puede solucionar?

a) Incluir atributos de tamaño en activos como el vídeo y las imágenes, para que el navegador asigne la cantidad adecuada de espacio al objeto antes de que se cargue.

b) Asegurarse de que el contenido inyectado dinámicamente sólo se inserta debajo del contenido existente para que no provoque cambios inesperados en el diseño.


3 Primer retardo de entrada (FID)

Posible problema: El navegador no responde rápidamente al usuario (probablemente porque todavía está ejecutando JavaScript)

¿Como podemos solucionar este problema?

a) Divide el código de larga duración en tareas más pequeñas. Las tareas largas hacen que la página no responda mientras se ocupa de ellas. Dividirlas en trozos más manejables puede ayudar a reducir el retraso de la entrada.

b) Reducir aún más el tiempo de ejecución de JavaScript aplazando el JS no utilizado. Si el navegador no necesita el código para renderizar la página, difiéralo – esto significará que la página está lista para la interacción del usuario más rápidamente.


Si necesitas apoyo para asegurarte de que tu SEO, contenido o sitio web se adhiere a las últimas directrices, ponte en contacto conmigo. Como experto en diseño, desarrollo y SEO de Shopify estaré encantado en ofrecerte una solución y ayuda. También te puede interesar mi servicio para optimizar la velocidad en Shopify.

quien-soy3

MIHAI DOBRE

Diseñador web Freelance experto en WordPress con más de 7 años de experiencia, ayudo a pequeñas empresas y particulares dentro y fuera de España a conseguir clientes en internet a través de una web profesional. ¿Necesitas mi ayuda?