InCorio

Durante el análisis inicial del sitio www.incorio.com como parte de su Pack de Rendimiento, propusimos a nuestro cliente enfocar el plan de acción en las Señales Web Esenciales (Core Web Vitals): Cumulative Layout Shift (CLS) y Largest Contentful Paint (LCP). Estos indicadores definidos por Google desempeñan un papel fundamental en la optimización del rendimiento web.

Cumulative Layout Shift (CLS) es una medida centrada en el usuario que evalúa la estabilidad visual de una página web al medir los cambios inesperados en la disposición (saltos visuales), siendo un CLS bajo indicativo de una experiencia de usuario de calidad.

Para In Corio, el CLS obtenido era mejorable, especialmente en la versión móvil de las páginas de categorías y productos. 

Nuestras acciones en este caso consistieron en : 

• Establecer tamaños de bloques para prevenir cualquier desplazamiento o redimensionamiento inesperado utilizando espacios reservados en la página web.
• Reparar una carga lenta ineficiente para mejorar el rendimiento de la página y evitar la visualización posterior a la carga de imágenes por encima del fold.
• Eliminar una imagen de carga tipo 'ampulleta' que obstaculizaba la buena experiencia del usuario.

Largest Contentful Paint (LCP) evalúa la velocidad de carga de las páginas midiendo el tiempo necesario para mostrar el elemento más grande de la página (por encima del fold).

Este indicador es crucial para mejorar la experiencia del usuario. Cuando una página tarda en cargarse debido a un elemento visual demasiado pesado o mal definido, la experiencia del usuario puede volverse negativa y la tasa de rebote de la página aumenta.

El tiempo de construcción está directamente relacionado con el resultado de LCP. Un aumento en el tiempo de construcción conlleva un aumento proporcional en el LCP. Para mejorar esto, ajustamos el sistema de caché Varnish (previamente implementado) estableciéndolo en 24 horas para las páginas de productos. De esta manera, las visitas a una página de producto tienen una mayor probabilidad de obtener una respuesta rápida gracias a una caché no expirada.

También llevamos a cabo mejoras en este indicador mediante las siguientes acciones :

• Codificación base64 de las 4 primeras imágenes de la página de categorías y de la miniatura de los productos.

La conversión de una imagen a base64 implica convertirla en una cadena de caracteres. De esta manera, la imagen original ya no existe como un archivo físico en el servidor, sino que se integra directamente en la página en forma de código.
Este proceso no se recomienda para imágenes demasiado pesadas (ya que podría hacer que la página sea demasiado pesada), por lo que solo trabajamos con imágenes ligeras.

• Redimensionamiento de la imagen principal y las miniaturas en el lado izquierdo de la página de categoría. Un archivo que coincide con el tamaño mostrado en la pantalla es más ligero y también evita que el navegador realice un cálculo de redimensionamiento. 
• Creación de una imagen específica para dispositivos móviles para la imagen principal de la página de categoría.

A continuación encontrarás los valores iniciales de los puntajes CLS y los tiempos LCP, así como los resultados obtenidos.

Es importante destacar que hemos optado por resaltar tanto los resultados generales como algunos detalles, tanto en la versión de escritorio como en la versión móvil. Los puntajes y tiempos obtenidos pueden variar según el dispositivo utilizado y la página analizada. 

Los indicadores que se presentan aquí representan el amplio espectro de mejoras realizadas.

Pour Para obtener más información sobre los indicadores LCP y CLS, te invitamos a leer el siguiente artículo dedicado a los Core Web Vitals, estos son señales web esenciales para el SEO de tu PrestaShop.