Cumulative Layout Shift mide el aumento en todos los cambios de marco que ocurren en un sitio web mientras se carga.
¿Alguna vez te has encontrado con una página donde el contenido cambia repentinamente? Sin previo aviso, el texto se mueve, hay espacios en blanco adicionales y has perdido tu lugar.
Probablemente hayas tenido esa molesta experiencia debido al 'Cambio de diseño acumulativo'.
Lighthouse introdujo Cumulative Layout Shift como una métrica de rendimiento en 2020.
Posteriormente, CLS también se convirtió en una de las métricas que componen Core Web Vitals.
En esta publicación de blog, aprenderemos qué es Cumulative Layout Shift (CLS), por qué es parte del Elementos fundamentales de la Web métrica, cómo sucede, cómo medirla y cómo los webmasters pueden optimizarla.
¿Qué es el cambio de diseño acumulativo?
Entendamos esta métrica de rendimiento desglosándola:
Acumulativo: Significa un aumento en cantidad
Diseño (Layout): es el marco de página web
Shift: Es el cambio de posición
Por lo tanto, Cumulative Layout Shift mide el aumento en todos los cambios de marco que ocurren en un sitio web mientras se carga.
Cada vez que se carga una página, pocos elementos de la misma tienden a cambiar inesperadamente, lo que a menudo afecta la forma en que los usuarios interactúan con la página web. Estos elementos podrían ser:
- Botón
- Formularios de suscripción
- Formularios de contacto
- Imágenes
- Fuentes
- Videos
Un sitio web que tiene un buen cambio de diseño acumulativo tiene una visualización de página estable donde los elementos no se mueven y, más bien, garantiza una carga estable de todo el contenido y los elementos del sitio web.
De acuerdo con Google,
"CLS es una métrica importante centrada en el usuario para medir la estabilidad visual porque ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios inesperados en el diseño; un CLS bajo ayuda a garantizar que la página sea atractiva".
Cambio de diseño esperado versus inesperado
Los cambios de diseño en una página web pueden ser tanto esperados como inesperados. Es importante que los propietarios de sitios web conozcan la diferencia entre los dos:
Cambio de diseño esperado: ocurre en respuesta a la entrada de un usuario. Por ejemplo, cuando un usuario hace clic en el botón de suscripción pero hay un cambio de diseño en respuesta a esto.
Cambio de diseño inesperado: sucede debido a contenido de terceros, elementos dinámicos en la página e imágenes adimensionales. Por ejemplo, de repente aparece un anuncio y desplaza el contenido del texto hacia abajo en la página.
El movimiento inesperado de contenido ocurre principalmente cuando los recursos se cargan de forma asincrónica. También podría suceder cuando los elementos DOM se agregan dinámicamente junto con el contenido existente.
Por lo general, el culpable en estos casos es un widget de terceros, una fuente, una imagen o un vídeo con dimensiones desconocidas.
Cómo calcular la puntuación CLS
La puntuación acumulativa del cambio de diseño se puede calcular multiplicando la fracción de impacto por la fracción de distancia:
Cambio de diseño acumulativo (CLS) = Fracción de impacto x Fracción de distancia Si, la fracción de impacto es 0.645 y la fracción de distancia es 0.179 A continuación, CLS = 0.645 x 0.179 CLS = 0.1154.
¿Qué causa los problemas de cambios de diseño acumulativos?
Según Google, hay cinco razones principales para el cambio de diseño acumulativo:
Imágenes y Vídeos sin dimensiones
Es recomendable especificar siempre el ancho y alto de tus imágenes y vídeos.
También puede utilizar cuadros de relación de aspecto CSS para permitir que el navegador asigne la cantidad correcta de espacio en la página web mientras se carga la imagen.
Anuncios, inserciones e iframes sin dimensiones
Los tamaños de los anuncios pueden aumentar los ingresos gracias a una alta CTR.
Sin embargo, esto puede comprometer la calidad de la experiencia del usuario al empujar el contenido hacia abajo en la página.
Este cambio de diseño se puede mitigar reservando espacio para los espacios publicitarios, eliminando los cambios reservando el tamaño más grande posible para el espacio publicitario o eligiendo el mejor tamaño posible del espacio publicitario en función de los datos históricos.
Contenido inyectado dinámicamente
Evite insertar contenido nuevo encima del existente. contenido, a menos que sea en respuesta a la interacción del usuario.
Esto garantizará que siempre se esperen los cambios de diseño que se produzcan en lugar de provocar que la imagen o el texto se muevan inesperadamente.
Fuentes web que causan FOIT / FOUT
Intente usar valores de fuente: visualización con sus fuentes personalizadas, como automática, intercambio, bloque, respaldo y opcional, para evitar cambios de diseño innecesarios.
Para asegurarse de que no haya ningún cambio de diseño, utilice font:display junto con el enlace rel=preload.
Cualquier elemento que utilice esa fuente quedará oculto hasta que el recurso de fuente se haya descargado por completo, lo que se conoce como FOIT (Flash de texto invisible).
Acciones que esperan una respuesta de la red antes de actualizar DOM
Elija siempre animaciones de "transformación" para animaciones de propiedades que desencadenan cambios de diseño.
Prueba de cambio de diseño acumulativo
Las métricas acumulativas del rendimiento del cambio de diseño del sitio web se pueden medir de cualquiera de las siguientes maneras:
- El cambio de diseño acumulativo se puede medir utilizando lo siguiente herramientas de campo:
- Informe de experiencia del usuario de Chrome
- PageSpeed Insights
- Búsqueda Consola (Informe Core Web Vitals)
2. CLS también se puede medir a través de estos Herramientas de laboratorio:
¿Cómo mejorar el cambio de diseño acumulativo?
Nota que las auditorías particulares que se mencionan a continuación probablemente sean las que más contribuyan a su CLS; sin embargo, la puntuación CLS de su página también puede verse afectada por otras optimizaciones que no se mencionan aquí.
Mejore su puntuación CLS incorporando buenas prácticas en su flujo de trabajo de desarrollo, como:
- Especificación de dimensiones de imagen
Especifique siempre, ambos, ancho y alto para los elementos de imagen y video de su sitio web para que se utilice el espaciado correcto para las imágenes/vídeos.
Alternativamente, puedes usar cuadros de relación de aspecto CSS para hacer lo mismo. Para obtener más información sobre esto, lea este artículo. - Reducir los cambios de diseño causados por anuncios, incrustaciones e iframes
Para reducir los cambios de diseño causados por anuncios, incrustaciones e iframes, haga cosas como:
Reserve el tamaño del espacio publicitario (preferiblemente el más grande) antes de cargar la biblioteca de anuncios.
Mueva los anuncios al final o fuera de la ventana gráfica.
Utilice marcadores de posición cuando no haya ningún anuncio disponible para mostrar.
Aprender más, lea este artículo. - Evitar insertar contenido nuevo encima del contenido existente
Intente evitar insertar contenido dinámico (por ejemplo, pancartas, formularios, etc.) encima del contenido existente a menos que sea en respuesta a la interacción del usuario. Esto ayuda a evitar cambios inesperados en el diseño.
Aprender más, lea este artículo. - Prevención del destello de texto invisible (FOIT)
El problema del Flash de texto invisible (FOIT) también puede afectar el CLS de su página. Asegúrese de que su texto permanezca visible durante las cargas de fuentes web precargando fuentes web y/o usando el atributo font-display.
Obtenga más información sobre esto aquí. - Evitar animaciones no compuestas
Donde sea posible, solo realizar animaciones compuestas a reducir el trabajo del hilo principal y evitar que los píxeles se vuelvan a pintar durante la carga de la página.
Conclusión
Comprender Cumulative Layout Shift (CLS) lo ayudará a ofrecer una mejor experiencia de usuario en los próximos días.
Dado que la métrica es parte de Core Web Vitals para mejorar la UX y está previsto que se convierta en una señal de clasificación en 2021, es importante comprender su importancia e impacto en su sitio.
Preguntas
Cumulative Layout Shift (CLS) mide cuánto cambia inesperadamente una página web con el tiempo. Si un visitante de un sitio web carga una página y, mientras la lee, se carga un banner, lo que hace que la página salte hacia abajo, eso resultaría en una puntuación CLS alta.
CLS es una métrica importante para medir la estabilidad visual, porque mide la frecuencia con la que los usuarios experimentan cambios inesperados en el diseño. Un CLS bajo garantiza que los usuarios disfruten de la página.
Los cambios de diseño ocurren cuando un elemento de su página cambia de tamaño o posición, lo que afecta la posición del contenido a su alrededor. Es posible que el cambio sea intencionado, como cuando un contenedor se expande como resultado de una acción del usuario.
Shubham es un especialista en marketing digital con amplia experiencia trabajando en la industria de la tecnología publicitaria. Tiene una amplia experiencia en la industria programática, impulsando la estrategia comercial y escalando funciones que incluyen, entre otras, crecimiento y marketing, operaciones, optimización de procesos y ventas.
