Prueba de Cumulative Layout Shift (CLS)
La prueba de Cumulative Layout Shift de SEOptimer muestra el CLS de tu página comparándolo con los umbrales de Google y utiliza los propios datos de campo de Google de visitantes reales.
Audita cualquier sitio web con SEO en cuestión de segundos
+ Herramientas SEO / GEO completas para cada función
Realiza más de 100 comprobaciones en tu sitio web de SEO On-Page, usabilidad, rendimiento, redes sociales y enlaces. Ahora con GEO en todos los informes. SEOptimer también ofrece investigación de palabras clave, seguimiento de posiciones, análisis de backlinks y un rastreador web completo.
Acerca del cambio de diseño acumulado
¿Qué es el cambio de diseño acumulado?
El cambio de diseño acumulado mide cuánto se mueve la página mientras se carga. Cada vez que un elemento visible salta a una nueva posición sin que el visitante lo provoque, se le asigna una puntuación y las puntuaciones se acumulan.
Es la métrica cuyo síntoma resulta más familiar: intentar hacer clic en un enlace y pulsar otra cosa porque un anuncio o una imagen se ha cargado encima y ha desplazado la página hacia abajo.
A diferencia de las otras dos, no se mide en tiempo. Es una proporción que describe cuánto se ha movido la pantalla y a qué distancia, por eso los valores son pequeños y una puntuación de 0,1 ya representa un movimiento visible.
¿Qué se considera un buen CLS?
Google considera que un valor de 0,1 o menos es bueno, que los valores entre 0,1 y 0,25 necesitan mejoras y que cualquier valor superior a 0,25 es deficiente, según el percentil 75 de las cargas de páginas reales.
Los desplazamientos que provoca el propio visitante no cuentan. Abrir un acordeón o cerrar un banner mueve la página de forma legítima, y solo se ignora el movimiento que se produce durante el medio segundo posterior a una interacción, que es aproximadamente el intervalo en el que una persona atribuye el movimiento a su propia acción.
Este suele ser el más fácil de conseguir de los tres. Mientras que el LCP y el INP requieren trabajo de optimización del rendimiento, la mayoría de los desplazamientos del diseño se solucionan reservando espacio, lo que implica modificar el marcado en lugar de la arquitectura.
Qué suele provocar el desplazamiento del diseño
- Imágenes y vídeos sin atributos de ancho y alto, por lo que no se reserva espacio hasta que se cargan.
- Anuncios y elementos incrustados insertados en un contenedor que no tenía un tamaño definido.
- Fuentes web que se cargan con un tamaño diferente al de la fuente alternativa y provocan el reajuste del texto.
- Banners, avisos y barras de cookies insertados encima del contenido existente.
- Contenido insertado mediante un script después de que la página ya se haya renderizado.
El patrón común a todos ellos es el mismo: algo llega tarde y ocupa un espacio que no se había reservado. Todo lo que hay debajo se desplaza hacia abajo y cualquier elemento que el visitante estuviera a punto de tocar cambia de posición.
Cómo mejorarlo
- Define el ancho y el alto de todas las imágenes y vídeos para que el navegador reserve el espacio.
- Asigna a los espacios publicitarios y al contenido incrustado un tamaño mínimo fijo, incluso cuando estén vacíos.
- Precarga las fuentes clave y haz coincidir las métricas de la fuente alternativa para que el cambio no provoque un reajuste.
- Inserta los banners y avisos debajo del contenido existente o superpónlos en lugar de desplazarlo.
- Reserva espacio para todo lo que un script vaya a añadir posteriormente.
- Compruébalo en dispositivos móviles, donde una columna estrecha convierte un pequeño desplazamiento en uno grande.
Qué comprueba esta herramienta
La prueba de CLS lee los datos de campo de Google para la página —mediciones recopiladas de visitantes reales en Chrome— y muestra cómo se sitúa con respecto a los umbrales anteriores.
Si no se muestra ningún resultado, no hay suficiente tráfico a la página para que Google pueda proporcionar datos. Mientras tanto, el cambio de diseño es la única métrica que puedes comprobar de forma fiable manualmente: carga la página en un teléfono, con una conexión lenta, y observa qué elementos se mueven.
Para las otras dos métricas, o para las tres juntas, usa los Prueba de Core Web Vitals.
Qué hacer a continuación
La mayoría de los cambios de diseño se deben a imágenes y recursos que llegan tarde. Comprueba las optimización de imágenes de la página, cuánto pesa mediante la comprobación de tamaño del archivo de la página web y cómo se comporta en un teléfono con la prueba de adaptable a dispositivos móviles.
Caja de herramientas SEO completa con más de 55 herramientas
Comprueba los títulos, las meta descripciones, los encabezados, los datos estructurados, las Core Web Vitals, el SSL y el archivo robots.txt. Genera metaetiquetas, mapas del sitio y reglas .htaccess, minimiza el CSS, el JS y el HTML, y redacta textos con nuestras herramientas de redacción con IA, al instante y gratis.
Más información
Más información
Core Web Vitals - ¿Qué son? ¿Por qué son tan importantes para el SEO?
Para ofrecer una experiencia perfecta a los usuarios, debes optimizar tus páginas web. Pero ¿cómo se puede medir la calidad de la experienci...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...