Google publica un vídeo sobre cómo mejorar la experiencia de la página a través de Cumulative Layout Shift (CLS)

El desplazamiento de diseño acumulativo (CLS) es una métrica clave de la puntuación de la experiencia de página. Este video es una gran introducción a CLS.
SIA Team
October 20, 2021

Ayer, en el canal de YouTube de Search Central de Google , se publicó un video, titulado, Cómo mejorar el cambio de diseño acumulativo para una mejor experiencia de página.

Cumulative Layout Shift, o CLS, como me referiré a él a partir de ahora, es una parte de Page Experience, que es una métrica general que subyace a la actualización de Page Experience.

Básicamente, Google quiere que cada página de su sitio transmita una buena experiencia de usuario, o Experiencia de página.

(Dicho esto, la experiencia del usuario, como concepto, es más amplia que la experiencia de página, lo que significa que puede incluir cosas que no forman parte de la experiencia de página. Pero eso está más allá del alcance de esta noticia).

¿Qué es CLS?

La mejor manera de describirlo, como se describe en la apertura del video, es usar una experiencia que estoy seguro de que has tenido:

Vas a una página web (generalmente en un dispositivo móvil) y, a medida que comienzas a leer (o ver), los elementos de la página cambian.

Esto puede ser un poco discordante, porque supongamos que estabas a punto de hacer clic en algo, pero luego … el enlace se mueve.

El diseño cambió, y el cambio acumulativo del diseño de la página es … Sí… CLS.

CLS es una métrica a nivel de página, por lo que cada página de su sitio puede tener una puntuación CLS diferente.

Ahora, es posible que se pregunte si el proceso de mejorar CLS puede ser tedioso, porque es posible que desee mejorar el CLS de más de una página.

Sí, eso es cierto, por lo que pensaría que el enfoque más eficiente en el tiempo para esto es usar una plataforma (como un tema de WordPress ligero y bien codificado si está utilizando WordPress) que optimiza varios aspectos técnicos de su sitio.

De esta manera, el CLS de cada página está lo más optimizado posible (dado con lo que tiene que trabajar).

Este video ofrece una serie de consejos y procedimientos útiles para minimizar (y con suerte, eliminar) CLS.

¿Qué es un buen puntaje CLS? (0…O, al menos apunta a 0.1)

Idealmente, 0, pero, como se menciona en el video, es 0.1: “… un gran número al que aspirar es [para] el 75% o más de las vistas que tiene una página, tiene un CLS de 0.1 o menos. Si estás por debajo de eso, lo estás haciendo muy bien”.

Entonces, en otras palabras, 0.1.

Simplemente apunte a un 0.1 consistente o inferior, y eso debería (con suerte) ser suficiente.

Cómo eliminar, o (más probablemente, reducir) CLS

Solo para estar seguro, el video es una fuente de información más detallada y completa sobre esto, pero tengo un poco de comprensión técnica de HTML, por lo que me gustaría ofrecer algunos consejos:

Primero, determine su puntaje CLS

Primero, al igual que cuando apuntas a metas en la vida, tienes que saber dónde estás ahora si quieres llegar a algún lugar.

Del mismo modo, debe conocer su puntaje CLS actual.

CLS se puede medir en el campo y en el laboratorio. Las herramientas de medición de campo son aquellas que miden de acuerdo con la experiencia de un usuario real, mientras que las herramientas de laboratorio miden dentro de un entorno sintético.

Las herramientas enumeradas a continuación se encontraron en esta URL: https://web.dev/cls/#how-to-measure-cls

Herramientas de campo

Herramientas de laboratorio

Segundo, considere sus opciones

¿Decidirá deshacerse de cualquier anuncio intersticial, banner u otros elementos que puedan afectar el diseño de su(s) página(s)? (Estos pueden hacer que el diseño cambie, especialmente si se cargan después de que el diseño se carga por primera vez).

¿Ha pensado en las sugerencias dadas en el video e hizo una lista de cómo a usted (y a su equipo, si tiene uno) le gustaría abordar esto?

Tercero, ¡Juega!

Tal vez haga una página de prueba (es posible que desee no indexarla, ya que es solo una página de prueba) y juegue. Pruebe ciertas cosas y vea lo que encuentra.

Tome medidas iterativas para ver cómo progresa.

Cuarto, tomar medidas y decidir

Hiciste una lista de opciones y luego hiciste algunos experimentos. Ahora, es el momento de tomar medidas.

Sí, esto puede parecer intimidante, pero si tienes un sitio con muchas páginas, solo comienza por mejorar las que son más importantes.

También puedes mejorar tu proceso de creación de contenido, para que, a partir de ahora, tu nuevo contenido tenga mejores puntuaciones CLS.

Le deseo éxito.

Fuente: Canal de YouTube de Google Search Central