Nueva actualización de Google CORE WEB VITALS: cómo acelerar Magento 2

¿Qué tan rápida es tu tienda online ? Si no lo sabes, ¡compruébalo ahora !

De hecho, deberías saber qué tan rápido es su comercio electrónico para el próximo mes de mayo. ¿Por qué? Porque hace unos meses, Google anunció que cambiará sus algoritmos y calificará sitios en tres parámetros adicionales:

  • carga
  • interactividad
  • estabilidad visual

Estas métricas, llamadas Core Web Vitals, se están convirtiendo en nuevas señales de ranking de clasificación que entrarán en acción en mayo de 2021.

Velocidad y SEO

Los días en que el SEO se trataba de llenar su sitio web con una larga lista de palabras clave y backlink han terminado. Hoy, de hecho, Google está empezando a prestar más atención a un hecho nuevo: Web Performance.

En mayo de 2020, Google realizó un estudio que mostró que los usuarios exigen una mejor experiencia de usuario, con sitios rápidos y tiempos de espera reducidos. Sin embargo, la velocidad siempre ha sido un indicador importante para una buena experiencia de usuario y ahora más que nunca será un factor de discriminación para el SEO.

A partir de mayo de 2021 , de hecho, además de afectar la tasa de conversión, la velocidad y por tanto también el rendimiento web, se contabilizarán para SEO. Esto se medirá en una serie de nuevas métricas, conocidas como Core Web Vitals.

¿Qué significa Core Web Vitales?

Estas métricas se diseñaron para ayudar a Google a comprender la experiencia que tienen los usuarios cuando acceden a sus páginas web. Esencialmente, es una evaluación de la experiencia del usuario basada en tres pilares:

  • carga (LCP)
  • interactividad (FID)
  • estabilidad visual (CLS)

En pocas palabras, cada métrica depende de la velocidad de su sitio web.

Las métricas de Core Web Vitals para Google se basan en estos criterios:

  • ¿Qué tan rápido aparece el contenido en la pantalla? (LCP)
  • ¿Qué tan rápido reacciona la página a la interacción del usuario? (FID)
  • ¿El contenido se mueve por la pantalla mientras se carga el sitio? (CLS)

Es por esto que los Core Web Vitals también pueden convertirse en una ventaja para su tienda. Por ejemplo, si usted y su competidor tienen contenido similar y relevante, Google recompensará un sitio que se cargue más rápido.

Pero ahora veamos en detalle las singularidades de cada métrica.

Largest Contentful Paint (LCP)

Mucha gente confunde esta métrica con el tiempo que tarda la página en cargarse por completo. Sin embargo, tenga en cuenta que LCP no es simplemente el tiempo de carga de una página, sino más bien el tiempo que tarda el contenido más pesado en aparecer en la pantalla.

Cuando alguien entra en un Ecommerce y hace clic en un artículo, llega a la página del producto. Esta página contiene; encabezado, logo, texto e imagen. Las imágenes suelen ser bastante grandes y ocupan más espacio en la pantalla. El LCP sería entonces el tiempo que lleva cargar completamente la imagen.

Entonces, básicamente, ¿cómo se puede controlar el LCP?

Google ofrece una serie de herramientas que lo ayudan a identificar el elemento más grande en una página web. También hay muchas otras herramientas para verificar esto. Si quieres saber cuáles son, lee nuestro artículo 4 Herramientas para medir la velocidad de Magento y optimizar su rendimiento 

Encontrarás mucha información para poder comprobar la velocidad de tu tienda y, sobre todo, una útil descripción general de los problemas críticos presentes.

Una vez que haya verificado su puntaje LCP, compárelo con los datos de Google. De hecho, según la empresa de motores de búsqueda, no debería tardar más de 2,5 segundos.

lcp-velocità-magento

¿Cómo optimizar el LCP?

Para intentar optimizar el LCP, aquí hay una pequeña lista que puede serle útil:

  • Optimizar las imágenes . Precargue, comprima y reduzca el peso de todos los elementos visuales que están presentes en su sitio. Cuanto menor sea el número de MB, menos tiempo tardará en cargarse.
  • Optimizar el servidor . Almacene en caché todos los archivos estáticos o utilice soluciones CDN listas para usar. La ventaja de la CDN es que entrega contenido desde el servidor más cercano al usuario. Por lo tanto, las imágenes y descripciones de los productos se cargan más rápido.
  • Optimizar JavaScript y CSS . Revise y elimine cualquier código innecesario de archivos CSS o JS. Es mejor dedicar un archivo CSS / JS separado para cada bloque en lugar de escribir toda la lógica y los estilos JS en un archivo voluminoso.
  • Optimizar el rendering del lado client. No utilice muchas operaciones de anidamiento de componentes en el árbol DOM. Intente usar menos funciones setTimeout para renderizar y agregar elementos al DOM en el caso de los eventos «document.ready» y «window.onload».

First Imput Delay (FID)

Esta métrica refleja la capacidad de respuesta de su sitio; básicamente, mide el tiempo que tarda en responder a cualquier interacción del usuario.

Por ejemplo, si el usuario entra en su tienda E-commerce, toca un botón y… no pasa nada, ¡algo anda mal! El usuario no está satisfecho y abandona su sitio.

Pero, ¿por qué sucede esto?

Por ejemplo, si el usuario entra en su tienda E-commerce, toca un botón y… no pasa nada, ¡algo anda mal! El usuario no está satisfecho y abandona su sitio.

Todo esto sucede cuando el navegador aún está realizando otras operaciones en segundo plano y simplemente no está listo para ejecutar un comando. Este tipo de retrasos son bastante comunes en los sitios de Magento. Esto se debe a que se solicita a los navegadores que ejecuten demasiados comandos JavaScript y los navegadores simplemente no pueden ejecutarlos rápidamente. Como resultado, los usuarios permanecen en espera hasta que hacer clic en el botón, seleccionar una opción o ingresar texto cambia algo en la pantalla.

¿Qué es el FID?

Es una medida de todas las interacciones del usuario que ocurren mientras su sitio todavía se está cargando. Google quiere que su sitio responda a la interacción del usuario incluso cuando aún no haya terminado de cargarse. Las únicas dos excepciones son el zoom y el desplazamiento; estas entradas del usuario no se incorporan en la puntuación FID.

Aquí hay un desglose de lo que Google considera receptivo:

Una cosa especial acerca de FID es que no se puede medir sin que los usuarios realmente interactúen con su sitio. Esto significa que Google no puede estimar su puntuación FID basándose únicamente en datos teóricos. Tomarán datos de usuarios reales, también conocidos como datos de campo.

Mejorar FID significa reducir JavaScript no utilizado (el lenguaje de codificación responsable de ejecutar comandos de usuario). Si elimina JavaScript innecesario y reduce el tiempo que lleva ejecutar sus tareas, avanzará mucho con su puntaje FID.

Sin embargo, la optimización de JavaScript es complicada. A veces, tendrá que sacrificar algunas de las funciones de su sitio para ver mejoras de rendimiento.

Cumulative Layout Shift (CLS)

A diferencia de las dos métricas anteriores, el Cumulative Layout Shift resuelve un problema diferente, directamente relacionado con la sensación del usuario.

De hecho, CLS mide todos los cambios de diseño de su sitio durante la carga. Mi spiego, se sei in un negozio online di smartphone, clicchi su un prodotto e anziché essere reindirizzato verso la scheda prodotto, entri su una scheda differente, con un diverso layout, che magari è legata ad un altro prodotto o addirittura ad una pubblicità!

E’ chiaro che quel punto, sono sicuro che sarai piuttosto infastidito e che probabilmente non concluderai l’acquisto.

Imagínese que está en una tienda online de teléfonos móviles y smartphones. Cuando ha encontrado el artículo que le interesa, hace clic en él y, en lugar de ser redirigido a la ficha del producto, aparece una pestaña diferente, con un diseño diferente, que quizás esté vinculado a otro producto o incluso ¡a un anuncio publicitario!

Está claro que encontrarse en una situación de este estilo resulta bastante molesto, y que muy probablemente no se llegará a completar la compra.

¿Por qué pueden cambiar los elementos de su sitio?

Se puede acceder a esto, por ejemplo, cuando todo el contenido de la página parece estar completamente cargado y visible, pero la descarga de un elemento grande aún no ha finalizado. Mientras esto sucede, todo el resto del contenido se «empuja», lo que da como resultado cambios de diseño repentinos.

Otro factor importante que puede arruinar el layout de su contenido son los anuncios. A menudo ocupan mucho espacio en la pantalla y se cargan más lentamente que el resto del contenido. Y tan pronto como se cargan, todo el contenido del sitio está sujeto a cambios.

Aquí, el CLS se calcula en función de cuánto se han movido los elementos de su sitio y el impacto que el movimiento ha traído al cliente. Google considera que cualquier valor inferior a 0,1 es ‘bueno’, como puede ver según los criterios de CLS a continuación:

cls

Por supuesto, Google solo considera movimientos inesperados. Esto significa que si un comprador hace clic en su menú y algunos elementos de su página se mueven, no afectará su puntuación CLS.

La cuestión de las imágenes de los productos también es importante para obtener una buena puntuación CLS. Muchos desarrolladores olvidan especificar los atributos de ancho y largo de las imágenes, dejando que el navegador decida cómo deben aparecer en la pantalla. Dado que la descripción del producto generalmente se carga antes que las imágenes, los compradores en línea comienzan a leerla primero. Sin embargo, tan pronto como se carga una imagen, empuja el texto hacia arriba o hacia abajo y detiene el proceso de lectura. Si especifica el tamaño de la imagen mediante CSS o HTML, se reservará espacio para esa imagen durante los tiempos de carga y los clientes podrán navegar por su sitio sin interrupciones.

AMP y PWA

Lo interesante de la nueva actualización de Google es que AMP ya no es un requisito para ser incluido en la sección Top Stories. A partir de mayo de 2021, todas las tiendas en línea que cumplan con los criterios de Core Web Vitals serían elegibles para ingresar a la sección.

Esta es una noticia muy interesante porque muestra cómo Google realmente está haciendo lo que puede para garantizar una excelente experiencia de usuario. ¡Esta también es una gran noticia para todos los sitios web PWA! En 2015, el propio Google introdujo la tecnología PWA para crear sitios con una mejor experiencia de usuario.

Ahora, con claros beneficios para los usuarios de dispositivos móviles y un enfoque centrado en el usuario, las tiendas PWA tienen muchas posibilidades de ganar la batalla contra los sitios tradicionales y las AMP.

¿Quiere herramientas útiles para Core Web Vitals ?

Muchas herramientas ya están a mano. Google se ha asegurado de que los propietarios de sitios tengan todos los recursos que necesitan para adaptarse a los nuevos cambios. Aquí hay 6 formas esenciales de analizar y mejorar su sitio en Core Web Vitals.

  • Speed Hostgento. La nueva herramienta de Hostgento que te permite comprobar el rendimiento, la velocidad y los puntos críticos de tu tienda.
  • Chrome UX Report. La nueva API de Chrome le permite verificar el rendimiento de su sitio durante los últimos 28 días.
  • Search Console. Utilice el informe Core Web Vitals para identificar las páginas que necesitan mejoras.
  • PageSpeed ​​Insights. Una gran herramienta para obtener una rápida panorámica de todas las puntuaciones de Core Web Vitals.
  • Lighthouse. Obtenga orientación práctica sobre cómo optimizar las métricas de Core Web Vitals.
  • Chrome DevTools. Al igual que Lighthouse, la herramienta gratuita proporciona instrucciones sobre cómo mejorar sus puntuaciones de CWV.
  • Web Vitals Extension. Utilice esta extensión de calidad para ver las métricas clave de la experiencia del usuario para cualquier sitio que visite.

Conclusiones

Los comerciantes competirán en velocidad. Pero una cosa importante para recordar es que estos cambios no se están introduciendo para hacer que el mundo en línea sea más competitivo. El objetivo establecido Core Web Vitals es mejorar la experiencia online. Luego, utilice estas métricas como indicadores del éxito de su tienda online

La clave del éxito es intentar brindar siempre la mejor experiencia online a sus clientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.