Core Web Vitals en PrestaShop

Esto lo hace Carlos Cámara CTO de hepta.es, desarrollador web especializado en PrestaShop y Joomla! y  Antonio Torres CTO de devblinders.com, analista programador especializado en PrestaShop.

Core Web Vitals en PrestaShop

¿Qué son las core web vitals?

Es un conjunto de métricas de rendimiento que se aplican a todas las páginas webs, es el resultado medible de todo el proceso interno que realizan los navegadores para que cualquier usuario visualice la web, este proceso Google lo ha desglosado en 3 grandes aspectos y ha medido o valorado los resultados según sus criterios.

Google explica en su documentación que estas métricas irán evolucionando y cambiando con el tiempo, por lo que una cosa que hoy es buena puede que mañana no lo sea tanto.

¿Cómo medir las core web vitals?

• Google PageSpeed
• Lighthouse
• Chrome Dev Tools

LCP: Large content paint

Este parámetro está relacionado con el tiempo de carga en el sitio. Cuanto más bajo sea este valor mejor que mejor, pero en cualquier caso, se considera un buen valor de LCP tener un máximo de 2.5s.

Está métrica (LCP) informa del tiempo de procesamiento de la imagen o el bloque de texto más grande visible dentro de la ventana gráfica, en relación con el momento en que la página comenzó a cargarse .

Elementos que son considerados dentro del LCP

• Elementos <img>
• Elementos de <image>
• Elementos de <video>
• Un elemento con una imagen de fondo cargada a través de CSS
• Elementos a nivel de bloque que contienen nodos de texto u otros elementos secundarios de texto a nivel de línea.

Tamaño de los elementos

El tamaño de los elementos mencionados anteriormente se determinan con el espacio que ocupe en la ventana visible, independientemente del tamaño real del elemento.

FID: First Input Delay

Esta métrica mide la interactividad con la página web, es decir, el tiempo desde que un usuario interactúa por primera vez con una página hasta el momento en que el navegador puede comenzar a procesar controladores de eventos en respuesta a esa interacción.

¿Cómo mejorar el FID?

El navegador no puede responder a la mayoría de las entradas del usuario mientras ejecuta JavaScript en el hilo principal. En otras palabras, el navegador no puede responder a las interacciones del usuario mientras el hilo principal está ocupado. Para mejorar esto:

• Divide las tareas largas
• Optimiza tu página para que esté lista para la interacción
• Utiliza un web workers para trabajar en segundo plano
• Reduce el tiempo de ejecución de JavaScript

CLS: Comulative Layout Shift

CLS mide la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página.

Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente

¿Todos los cambios de diseño en la web afectan al CLS?

No todos los cambios de diseño son malos. De hecho, muchas aplicaciones web dinámicas cambian con frecuencia la posición inicial de los elementos de la página.

Un cambio de diseño solo es malo si el usuario no lo espera. Por otro lado, los cambios de diseño que ocurren en respuesta a las interacciones del usuario (hacer clic en un enlace, presionar un botón, escribir en un cuadro de búsqueda y similares) generalmente están bien, siempre que el cambio ocurra lo suficientemente cerca de la interacción que la relación es clara para el usuario.

Por ejemplo, si la interacción de un usuario desencadena una solicitud de red que puede tardar un tiempo en completarse, es mejor crear algo de espacio de inmediato y mostrar un indicador de carga para evitar un cambio de diseño desagradable cuando se complete la solicitud. Si el usuario no se da cuenta de que algo se está cargando, o no tiene una idea de cuándo estará listo el recurso, puede intentar hacer clic en otra cosa mientras espera, algo que podría moverse debajo de él.

¿Cómo mejorar el CLS?

Para la mayoría de los sitios web, puede evitar todos los cambios de diseño inesperados si sigue algunos principios rectores:

• Siempre incluya atributos de tamaño en sus imágenes y elementos de video, o reserve el espacio requerido con algo como cuadros de relación de aspecto CSS . 
• Nunca inserte contenido por encima del contenido existente, excepto en respuesta a la interacción del usuario. 
• Realizar animaciones de una forma continua y estable entre las transiciones

Documentación oficial para ampliar todo el conocimiento sobre las core web vital en https://web.dev/vitals/

FEEDBACK

Jose moviltecno.com
Gracias Carlos por tus recomendaciones sobre la seguridad que debemos tener todas las tiendas Online. Saludos.

Y esto es todo en este último podcast y te pedimos por favor que nos ayudes escribiendo tu feedback sobre qué te ha parecido este podcast y tus críticas, así como temas que te gustaría que hablásemos, tanto en redes sociales como Apple Podcast, o con tus me gusta en Ivoox

Recordarte también que hemos creado un nuevo canal de Youtube, en el grupo de Telegram sobre PrestaShop, y el nuevo grupo de Signal sobre PrestaShop