Core Web Vitals ❤️

Se trata de Métricas esenciales para que un sitio se considere “saludable”. Web Vitals es una iniciativa de Google para brindar una guía unificada de indicadores de calidad que son indispensables para brindar una excelente experiencia de usuario en la web.

The Real life 👉 Los 3 puntos claves que desde hoy deben importarte son la respuesta, la velocidad y la estabilidad visual. Este es el foco de las agencias y departamentos digitales para mejorar la experiencia de usuario.

Vamos al punto ¿Qué es Core Web Vitals y que afecta estas métricas?

Primero debemos saber y entender que Core Web Vitals es un FACTOR DE CLASIFICACIÓN desde 2020 y que las métricas que lo componen evolucionarán con el tiempo.

Es parte de una actualización más completa llamada 'señal de experiencia de la página’, que agrupa varios factores como una navegación segura, el comportamiento responsive, las pautas intrusivas, la seguridad HTTPS y los principales web vitals.

Actualmente estas métricas se centran en estos 🔥 3 elementos: carga, interactividad y estabilidad visual

Pintura con contenido más grande o Largest Contentful Paint (LCP) - Es el tiempo para el despliegue del contenido más extenso y mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los 2,5 segundos desde que la página comienza a cargarse.

La LCP a menudo se ve afectada por:

JavaScript y CSS que bloquean la representación de elementos.

Tiempos de carga de elementos individuales.

Tiempos de respuesta del servidor lentos.

 

Cambio de diseño acumulativo o First Input Delay (FID) - Es la demora para la primera entrada y mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.

La FID a menudo se ve afectada por:

Elementos (por ejemplo, imágenes) sin dimensiones especificadas en el código.

Agregar dinámicamente nuevo contenido al contenido existente.

 

Retardo de la primera entrada o Cumulative Layout Shift (CLS) - Es el cambio acumulativo en el diseño y mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.

El CLS a menudo se ve afectado por:

Código de terceros.

Tiempo de ejecución de JavaScript.

 

#TASKYDATO 💡 Un umbral indicado para medir es el percentil 75 de cargas de página, segmentado en dispositivos móviles y escritorio.

¿Qué herramientas se pueden utilizar para medir los principales elementos vitales de la web?

• Chrome User Experience Report
• PageSpeed - Estadísticas de velocidad de página
• Search Console
• Lighthouse
• Web Vitals Extension
• Chrome DevTools

Lo que nos importa...La implementación en Shopify

Separemos las tres métricas y veamos cómo podemos trabajarlas en nuestra tienda en Shopify 🤔

🤖 LCP ¿Cómo puedo mejorar la pintura más grande con contenido para mi tienda Shopify?

• Para comenzar a optimizar el LCP de nuestra tienda, primero debemos saber dónde está el peor problema revisando y analizando nuestras métricas Core Web Vitals en Search Console. 

• Cuando tengamos identificado qué páginas tienen el peor LCP, podemos usar PageSpeed ​​Insights para averiguar cuál es el contenido más grande en la página que está analizando, lo encontramos en el área de Diagnóstico. 

• Nuestro último paso será averiguar por qué se carga tarde y cómo cargarlo antes.

Nuestras recomendaciones

Una estrategia común para solucionar problemas de LCP es agregar sugerencias de precarga a su código HTML.

🤖 FID ¿Cómo puedo mejorar el cambio de diseño acumulativo para mi tienda Shopify?

El FID no suele ser un problema para la mayoría de las tiendas en Shopify, pero si de nuestro análisis surge que un código de terceros podría estar causando un FID lento, recomendamos minimizar el uso de aplicaciones. 

Recordemos que al agregar un APP al sitio, agregamos un script sobre el que no tenemos control. Este código puede tardar tanto en cargarse que el navegador se congela.

🤖 CLS ¿Cómo puedo mejorar el retardo de la primera entrada para mi tienda Shopify?

• Para comenzar a optimizar el CLS de nuestra tienda, primero debemos saber dónde está el peor problema revisando y analizando nuestras métricas Core Web Vitals en Search Console. 

• Cuando tengamos identificado qué páginas tienen el peor CLS, podemos usar PageSpeed ​​Insights para averiguar qué elementos de esas páginas están causando cambios en el diseño, lo encontramos en el área de Diagnóstico. 

• Nuestro último paso será averiguar por qué estos elementos están cambiando el contenido y cómo debemos prevenirlo.

Nuestras recomendaciones

Evitemos tantas alertas o ventanas emergentes que se muevan por la pantalla del visitante ya que si se mueven, activarán un cambio de diseño.

Especificar las dimensiones de las imágenes y otros elementos. Esto permite al navegador trazar el diseño aun si los elementos tardan en cargarse en él.

👉 Optimizar nuestra tienda para mejorar el Core Web Vitals hace que el sitio sea más fácil de usar para los clientes, más rápido y más estable.

Conclusiones sobre la optimización de web vitals en nuestros sitios de Shopify

El algoritmo de core web vitals muta y avanza continuamente, esto nos puede significar un tanto agobiante. Lo bueno es que hay pautas fijas que podemos seguir para prevenir inconvenientes, por ejemplo:

• Usar las herramientas indicadas de medición para determinar las páginas con los problemas más importantes y solucionar eso  primero.
• Analizar y ver el problema concreto que afecta nuestro sitio.  Pueden existir numerosos motivos por los que nuestra puntuación es baja.
• Mantener nuestro sitio saludable, verificar las métricas mensualmente, aun si creemos que está todo bien. 

¿Buscas una funcionalidad especial para tu tienda? No dudes en contactarnos o echar un vistazo a nuestro catálogo de tareas.