CLS, core web vitals al detalle

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.

CLS, core web vitals al detalle

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

CLS: Factores de rendimiento

• Imágenes sin dimensiones
• Anuncios, videos y otros objetos incrustados o iframes sin dimensiones
• Contenido inyectado dinámicamente
• CSS de carga tardía donde los estilos se aplican después de que se hayan cargado otros elementos
• Fuentes web que provocan destellos de texto invisible o sin estilo
• Elementos de la página que esperan a que se carguen otros elementos a través de la red antes de aparecer
• Animando elementos por «altura» y «ancho» en lugar de «transform: scale ()» de CSS
• Animando elementos por «arriba», «derecha», «abajo» o «izquierda» en lugar de «transform: translate ()» de CSS

CLS: Cómo mejorarlo

• Utilice siempre atributos de tamaño para imágenes, videos y otros elementos incrustados o iframes. Si un elemento se carga dinámicamente, use CSS para diseñar cualquier elemento contenedor con el mismo tamaño o relación de aspecto antes de que se cargue el contenido. Luego, cuando el contenido se carga en esos elementos contenedores, la página no se desplazará.
• Nunca inserte contenido dinámicamente por encima del contenido existente.
• Si usa CSS para animar elementos, prefiera «transformar» animaciones.
• Usa valores el atributo display:swap con sus fuentes personalizadas junto con un preload <link rel=preload>
• Utilizar http/2
• Contenido inyectado dinámicamente, nunca inyecte contenido por encima del contenido existente, excepto por la interacción del usuario.

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