El desplazamiento acumulado mide la cantidad total de cambios de diseño que se producen en una página web a medida que se carga y se interactúan con.
Google mide a CLS para juzgar la experiencia general de la página junto con los otros dos vitales web de dos núcleos, Primer retardo de entrada (FID) y Pintura contenta más grande (LCP).
Tener varios cambios de contenido en una página se suman a una peor puntuación CLS. Una experiencia ideal de página es una página con un CL mínimo CL.
Un desplazamiento de diseño, o un cambio de contenido, es en cualquier momento, algo en la página cambia visiblemente la posición dentro del marco.
Esto puede ser desde Cambio de fuente de texto, imágenes que se cargan lentamente y las ventanas emergentes que cambian la página a medida que se carga.
Aquí hay un ejemplo de lo que un pobre amouNT de CLS parece
En el verano 2021, Google confirmó que los tres vitales web principales son ahora parte del factor de clasificación de la experiencia de la página.
Por lo tanto, es importante asegurarse de que los vitales web principales de sus páginas caen dentro de los siguientes rangos que Google considera “bueno”.
|
BUENO |
Necesita mejoría |
Pobre |
LCP
≤2.5s
≤4s
FID
≤100ms
> 300ms
CLS
≤0.1
≤0.25
Si su medida vitales en la mejora de las necesidades o el rango deficiente, sus clasificaciones podrían sufrir y se recomienda que usted aborde el problema.
Hay muchas maneras de revisar el cambio acumulado de diseño de la página CLS. Puede usar las herramientas de Google como Faro
o el informe Core Web Vitals en Google Search Console, o podría verificar en Semrush usando la auditoría del sitio.
Definición de buenos o pobres CLS
¿Qué causa pobres CLS? Como se indicó anteriormente, los cambios de diseño pueden ser causados por muchas cosas. Los culpables más comunes son:
IMagos sin dimensiones Anuncios, incrustaciones y iframes sin dimensiones. Fuentes de contenido de contenido inyectado dinámicamente que causan
foit / fout
(flash de texto invisible y flash de texto sin estilo)
Todas estas causas viven en el código de su página y se pueden identificar en solo unos minutos de inspección.
Cómo corregir y evitar los cambios de diseño Para solucionar sus turnos de diseño acumulativo, primero debe identificar los elementos que causan los turnos.
Luego, su desarrollador puede tomar una serie de acciones para abordar el problema y optimizar la velocidad de la página.
El faro tiene algunas recomendaciones que podrían ayudarlo a usted y / o su equipo de desarrollo a tratar con turnos, tales como:
Evite las animaciones no compuestas
aseguran que el texto permanezca visible durante la carga de WebFont
Fije los elementos de imagen que no tienen anchura y altura explícitas
Hay dos formas de ver los turnos exactos:
Utilizando una recomendación especial en la auditoría de rendimiento del faro llamado “Evite los cambios de diseño grande” usando Trace
en ambas variantes, será fácil si lanza Una auditoría de rendimiento a través del faro.
Para abrir el faro, haga clic con el botón derecho en cualquier lugar de la página web y seleccione Inspeccione. Evita la Lay GrandeDesplazamientos Encuentre y abra la recomendación “Evite los cambios de diseño grandes”. Está disponible en la auditoría de rendimiento del faro si hubo al menos un cambio de tarea durante la carga. Simplemente desplácese hacia abajo para encontrarlo. Si expande el artículo, puede verificar la “contribución CLS” de cada elemento ” No se preocupe si ve un elemento con una contribución de CLS de 0.001, por ejemplo, porque realmente no lastimaría la experiencia del usuario. Sabemos que Google marca las páginas que tienen cualquier cosa hasta 0.010 turnos en total como páginas “buenas”. Visualización de la traza original Para averiguar qué parte de una página Cambios realizados en una línea de tiempo, puede ver la traza original en el faro. Primero, haga clic en Accidental Haga clic en Ver Rastreo original in el informe del faro. Esto abrirá la pestaña Performance. Mire a través de la pista de la experiencia o la pista de la WEB VIVALS para encontrar cuando ocurrieron esos turnos. Zoom y busque los cambios de diseño (LS) para ver qué parte de la página realizó estos cambios durante la carga. Medición de CLS en Semrush La auditoría del sitio de Semrosush le permite rastrear los cambios de diseño acumulativos, junto con los otros vitales web principales cuando auditan su sitio web. El gran beneficio de usar Semrush aquí es que ahorrará sus datos históricos en el Informe especial núcleo de los vitales web. Esto le permite inspeccionar primero sus vitales web principales, luego realizar cambios, y luego volver a ejecutar la auditoría y ver cómo mejoró sus puntajes. También encontrará un informe de rendimiento completo con más información sobre cómo mejorar la velocidad de carga general de su sitio web, junto con otros consejos de optimización. ¡Pruébalo hoy y obtén tu experiencia de página optimizada!