Categories
SEO

¿Qué es CLS y por qué es importante?

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).

img-semblog

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

> 4S

eNjC9IasrVB4HKemq3mCaJvaYl-YLQSh4CkIn1L5JxkJq3gKseDOA3quT62G8fzPTH6a9ukVXyWuFVhzBcZyzhfGAldRoED2kmHsu64r4aVsdhZHOHl2wAQWSIqpmsPq1yCrGmX6

FID

≤100ms

≤300ms img-semblog

> 300ms

CLS

≤0.1

≤0.25

> 0.25 l7zgIScUGcN0w1xGc5cF2YZ8Nf-BARHxANcG7JtZcsV1YkxxvaQh0l_vkBFzCvn-1unR4YWj61zOTl0g8svdJ33OG8b4EhqnamdOFEZJtW6A1R8BOEwRkUMSt-Au7qnwLbofp60V

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.

Cómo verificar el desplazamiento de diseño acumulado CSH2Jg66Jf1X14KN-P4qY2MnjEkyvpmwdotcurQ5X9zBTaZXeANVUA3k-IgnmsTp_lZgpMQs8GewJJdDCP7_jXxSvzG7elOOYsgZK8tlFxXhd0j6lArRuDu4dCIBMucPn99waV6B 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

Google define oficialmente las puntuaciones de CLS en los siguientes rangos: Buenos CLS: por debajo de 0.10 NECESITA UNA MEJORA DE MEJORA CLS: entre 0.10 y 0.25 POOR CLS: por encima de 0.25 BnQgYJGJX0gYbi4FxQ4ys0L8vXC9jRAkL_Y_SGt8d3L9s5iPLsYRwmwswO5n3uXSsRX62YJGaLYS3ZUoF5T5wCURdUCFcs_i364tOCbpmxTdWTrN3O8sZ2rfVryyHeW8kUAJMwsQ ¿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.

para imágenes e incrustos sin dimensiones, simplemente identificando esas imágenes y luego agregando las dimensiones conocidas a su El código ayudará a evitar turnos de diseño. Si no sabe FOsRMvK5MiuvOYYVLcsVPUWK8e1hmvgBxG2u3kjWbeWpKy6a6E2RfqeR9tw2kuAjo9_w00EfmbKW1q8COEZwgiWoleHi_OxqGystAIGd3J2XAqtAowtuIfnFY36hY8WNrgWVk0zs 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.

zHqJ_mw6wOOcplil7cS53cBz6MIRgwv-b6jbn-Lea3ifdKo-e4swIwRr6M5VUkFb4ZbgJ2cvUxixhVfjeuFBgeOB9icqZfGDaLrsAZcFpR5-UIXkRNQvzdZCiB_DKCbdAxjr4Tio

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

Cómo inspeccionar los turnos Para optimizar el CLS, debe entender lo que está causando turnos. vK05R2ke3L8qasOKen70Fv5IQ4eonh_MfVOASpGyGOo5TMm-kcdoFei4Ylg31q1y3mo3Xn_ZQTafWtDST2RFiGZ6mGsXSS9ImLItMBu8GMRchOkAreeqOhdv6WjIOb20mB7stw3n

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!

Leave a Reply

Your email address will not be published. Required fields are marked *