Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • ¡Registro!

  • Índice
    1. Por qué CLS es diferente
    2. Establecer ancho y alto en imágenes e iFrames
    3. La nueva aspect-ratiopropiedad CSS
    4. Hacer uso liberal demin-height
    5. Verificar elementos alternativos
    6. Las fuentes web provocan cambios en el diseño
    7. Plantillas iniciales para páginas renderizadas del lado del cliente
    8. Asegúrese de que las interacciones del usuario se completen en 500 ms
    9. JavaScript sincrónico
    10. Conclusión
      1. Más recursos

    La iniciativa Core Web Vitals de Google ha arrasado en los mundos del SEO y el rendimiento web y muchos sitios están ocupados optimizando la experiencia de su página para maximizar el factor de clasificación. La métrica Cumulative Layout Shift está causando problemas a muchos sitios, así que echemos un vistazo a las formas de abordar cualquier problema relacionado con esa métrica.

     

    Cumulative Layout Shift (CLS) intenta medir esos movimientos discordantes de la página a medida que el contenido nuevo, ya sean imágenes, anuncios o lo que sea, entra en juego más tarde que el resto de la página. Calcula una puntuación en función de la cantidad de página que se mueve inesperadamente y con qué frecuencia. Estos cambios de contenido son muy molestos, te hacen perder tu lugar en un artículo que has empezado a leer o, peor aún, ¡te hacen hacer clic en el botón equivocado!

    En este artículo, analizaré algunos patrones de front-end para reducir CLS . No voy a hablar demasiado sobre la medición de CLS porque ya lo cubrí en un artículo anterior . Tampoco hablaré demasiado sobre la mecánica de cómo se calcula CLS: Google tiene buena documentación al respecto , y La guía casi completa para el cambio de diseño acumulativo de Jess Peck también es una inmersión profunda e increíble en eso. Sin embargo, daré algunos antecedentes necesarios para comprender algunas de las técnicas.

     

    Por qué CLS es diferente

    CLS es, en mi opinión, el más interesante de los Core Web Vitals, en parte porque es algo que nunca antes habíamos medido u optimizado. Por lo tanto, a menudo se requieren nuevas técnicas y formas de pensar para intentar optimizarlo. Es una bestia muy diferente a los otros dos Core Web Vitals.

    Mirando brevemente los otros dos Core Web Vitals, Largest Contentful Paint (LCP) hace exactamente lo que sugiere su nombre y es más bien una variación de las métricas de carga anteriores que miden qué tan rápido se carga la página. Sí, hemos cambiado la forma en que definimos la experiencia del usuario en la carga de la página para observar la velocidad de carga del contenido más relevante , pero básicamente se trata de reutilizar las técnicas antiguas para garantizar que el contenido se cargue lo más rápido posible. Cómo optimizar su LCP debería ser un problema relativamente bien comprendido para la mayoría de las páginas web.

    El retardo de la primera entrada (FID) mide cualquier retraso en las interacciones y parece no ser un problema para la mayoría de los sitios . La optimización suele ser una cuestión de limpiar (¡o reducir!) su JavaScript y suele ser específico del sitio. Eso no quiere decir que resolver problemas con estas dos métricas sea fácil, pero son problemas razonablemente bien comprendidos.

    Una razón por la que CLS es diferente es que se mide a lo largo de la vida útil de la página : ¡esa es la parte "acumulativa" del nombre! Los otros dos Core Web Vitals se detienen después de que el componente principal se encuentra en la página después de la carga (para LCP) o durante la primera interacción (para FID). Esto significa que nuestras herramientas tradicionales de laboratorio, como Lighthouse, a menudo no reflejan completamente el CLS, ya que solo calculan el CLS de carga inicial. En la vida real, un usuario se desplazará hacia abajo en la página y es posible que aparezca más contenido, lo que provocará más cambios.

    CLS también es un número un poco artificial que se calcula en función de la cantidad de página que se mueve y con qué frecuencia. Mientras que LCP y FID se miden en milisegundos, CLS es un número sin unidades generado mediante un cálculo complejo . Queremos que la página sea 0.1 o inferior para pasar este Core Web Vital. Cualquier valor superior a 0,25 se considera "pobre".

    Los turnos causados ​​por la interacción del usuario no se cuentan . Esto se define como dentro de los 500 ms de un conjunto específico de interacciones del usuario, aunque se excluyen los eventos de puntero y el desplazamiento . Se supone que un usuario que hace clic en un botón podría esperar que aparezca contenido, por ejemplo, expandiendo una sección contraída.

    CLS trata de medir cambios inesperados . El desplazamiento no debería hacer que el contenido se mueva si una página está construida de manera óptima y, de manera similar, pasar el cursor sobre la imagen de un producto para obtener una versión ampliada, por ejemplo, tampoco debería hacer que el resto del contenido salte. Pero, por supuesto, hay excepciones y esos sitios deben considerar cómo reaccionar ante esto.

    CLS también evoluciona continuamente con ajustes y correcciones de errores. Se acaba de anunciar un cambio mayor que debería dar un respiro a las páginas de larga duración , como las aplicaciones de una sola página (SPA) y las páginas de desplazamiento infinito, que muchos consideraron penalizadas injustamente en CLS. En lugar de acumular turnos a lo largo de todo el tiempo de la página para calcular la puntuación CLS como se ha hecho hasta ahora, la puntuación se calculará en función del conjunto más grande de turnos dentro de una ventana de tiempo específica.

     

    Esto significa que si tiene tres fragmentos de CLS de 0,05, 0,06 y 0,04, anteriormente esto se habría registrado como 0,15 (es decir, por encima del límite "bueno" de 0,1), mientras que ahora se puntuará como 0,06. Sigue siendo acumulativo en el sentido de que la puntuación puede estar formada por cambios separados dentro de ese período de tiempo (es decir, si esa puntuación CLS de 0,06 fue causada por tres cambios separados de 0,02), pero ya no es acumulativo durante la vida útil total de la página. .

    Dicho esto, si resuelve las causas de ese cambio de 0,06, entonces su CLS se informará como el siguiente más grande (0,05), por lo que seguirá analizando todos los cambios durante la vida útil de la página; simplemente elige informar solo. el más grande como puntuación CLS.

    Con esa breve introducción a algunas de las metodologías de CLS, ¡pasemos a algunas de las soluciones ! Básicamente, todas estas técnicas implican reservar la cantidad correcta de espacio antes de cargar contenido adicional, ya sea contenido multimedia o contenido inyectado con JavaScript, pero hay algunas opciones diferentes disponibles para que los desarrolladores web hagan esto.

    Establecer ancho y alto en imágenes e iFrames

    He escrito sobre esto antes , pero una de las cosas más fáciles que puedes hacer para reducir CLS es asegurarte de tener widthatributos heightestablecidos en tus imágenes . Sin ellos, una imagen hará que el contenido posterior se desplace para dejarle paso después de descargarse:

    Cambio de diseño después de cargar la imagen. ( Vista previa grande )

    Esto es simplemente una cuestión de cambiar el marcado de tu imagen de:

    img src="hero_image.jpg" alt="..."

    A:

    img src="hero_image.jpg" alt="..." 

    Puede encontrar las dimensiones de la imagen abriendo DevTools y colocando el cursor sobre (o tocando) el elemento.

    Chrome DevTools muestra las dimensiones de la imagen y las relaciones de aspecto al pasar el cursor sobre un elemento. ( Vista previa grande )

    Recomiendo usar el Tamaño intrínseco (que es el tamaño real de la fuente de la imagen) y el navegador luego los reducirá al tamaño renderizado cuando use CSS para cambiarlos.

     

    Consejo rápido : si, como yo, no puedes recordar si es ancho y alto o alto y ancho, piensa en ello como coordenadas X e Y , de modo que, como X, el ancho siempre se indica primero.

    Si tiene imágenes responsivas y usa CSS para cambiar las dimensiones de la imagen (por ejemplo, para restringirla al max-width100% del tamaño de la pantalla), entonces estos atributos se pueden usar para calcular, heightsiempre que recuerde anular esto autoen su CSS:

    img { max-width: 100%; height: auto;}

    Todos los navegadores modernos admiten esto ahora, aunque no lo hicieron hasta hace poco, como se trata en mi artículo . Esto también funciona para pictureelementos e srcsetimágenes (establezca widthy heighten el imgelemento alternativo), aunque aún no para imágenes de diferentes relaciones de aspecto; se está trabajando en ello y, hasta entonces, aún debe configurar widthy, heightya que cualquier valor será mejor que el 0de 0valores predeterminados!

    Esto también funciona en imágenes nativas con carga diferida (aunque Safari aún no admite la carga diferida nativa de forma predeterminada).

    La nueva aspect-ratiopropiedad CSS

    La técnica widthy heightanterior, para calcular la altura de las imágenes responsivas, se puede generalizar a otros elementos usando la nueva aspect-ratiopropiedad CSS, que ahora es compatible con los navegadores basados ​​en Chromium y Firefox , pero también está en Safari Technology Preview, así que con suerte eso significa que Llegará pronto a la versión estable.

    Así que podrías usarlo en un vídeo incrustado, por ejemplo, en una proporción de 16:9:

    video { max-width: 100%; height: auto; aspect-ratio: 16 / 9;}
    video controls poster="..." source src="/media/video.webm" type="video/webm" source src="/media/video.mp4" type="video/mp4" Sorry, your browser doesn't support embedded videos./video

    Curiosamente, sin definir la aspect-ratiopropiedad, los navegadores ignorarán la altura de los elementos de video responsivos y usarán una relación de aspecto predeterminada de 2:1 , por lo que lo anterior es necesario para evitar un cambio de diseño aquí.

    En el futuro, incluso debería ser posible configurar aspect-ratio dinámicamente en función de los atributos del elemento mediante el uso aspect-ratio: attr(width) / attr(height);, pero lamentablemente esto aún no es compatible.

    O incluso puede utilizar aspect-ratioun divelemento para algún tipo de control personalizado que esté creando para que responda:

    #my-square-custom-control { max-width: 100%; height: auto; width: 500px; aspect-ratio: 1;}
    div/div

    Para aquellos navegadores que no son compatibles, aspect-ratiopuede usar el antiguo truco de relleno inferior pero, con la simplicidad del aspect-ratiosoporte más nuevo y amplio (especialmente una vez que pasa de Safari Technical Preview a Safari normal), es difícil justificar ese método anterior. .

     

    Chrome es el único navegador que envía CLS a Google y admite aspect-ratioun significado que resolverá sus problemas de CLS en términos de Core Web Vitals. No me gusta priorizar las métricas sobre los usuarios, pero el hecho de que los otros navegadores Chromium y Firefox tengan esto y, con suerte, Safari lo tenga pronto, y que se trate de una mejora progresiva significa que diría que estamos en el punto en el que Puede dejar atrás el truco del fondo acolchado y escribir código más limpio.

    Hacer uso liberal demin-height

    Para aquellos elementos que no necesitan un tamaño responsivo sino una altura fija, considere usar min-height. Esto podría ser para un encabezado de altura fija , por ejemplo, y podemos tener diferentes encabezados para los diferentes puntos de interrupción usando consultas de medios como de costumbre:

    header { min-height: 50px;}@media (min-width: 600px) { header { min-height: 200px; }}
    header .../header

    Por supuesto, lo mismo se aplica a min-widthlos elementos colocados horizontalmente, pero normalmente es la altura la que causa los problemas de CLS.

    Una técnica más avanzada para contenido inyectado y selectores CSS avanzados es apuntar cuando el contenido esperado aún no se ha insertado. Por ejemplo, si tuviera el siguiente contenido:

    div div.../div/div

    divY se inserta un extra vía JavaScript:

    div div.../div div.../div/div

    Luego, podría usar el siguiente fragmento para dejar espacio para contenido adicional cuando el main-contentdiv se represente inicialmente.

    .main-content:first-child { margin-top: 20px; }

    En realidad, este código creará un desplazamiento hacia el main-contentelemento ya que el margen cuenta como parte de ese elemento, por lo que parecerá desplazarse cuando se elimine (aunque en realidad no se mueva en la pantalla). Sin embargo, al menos el contenido que se encuentra debajo no se cambiará, por lo que debería reducirse el CLS.

    Alternativamente, también puedes usar el ::beforepseudoelemento para agregar el espacio y evitar el cambio en el main-contentelemento:

    .main-content:first-child::before { content: ''; min-height: 20px; display: block; }

    Pero, sinceramente, la mejor solución es tener el divHTML y utilizarlo min-height.

    Verificar elementos alternativos

    Me gusta utilizar mejoras progresivas para proporcionar un sitio web básico, incluso sin JavaScript siempre que sea posible. Desafortunadamente, esto me sorprendió recientemente en un sitio que mantengo cuando la versión alternativa sin JavaScript era diferente a cuando se activó JavaScript. Vinos de Granada

    El problema se debió al botón de menú "Tabla de contenido" en el encabezado. Antes de que se active JavaScript, hay un enlace simple, diseñado para parecerse al botón que lo lleva a la página Tabla de contenido. Una vez que JavaScript se activa, se convierte en un menú dinámico que le permite navegar directamente a cualquier página a la que desee ir desde esa página.

     

    Un componente de encabezado de tabla de contenido que inicialmente se representa como un enlace simple (arriba) y luego se mejora con JavaScript para ser un menú dinámico (abajo). ( Vista previa grande )

    Utilicé elementos semánticos y, por lo tanto, utilicé un elemento de anclaje ( a href="#table-of-contents") para el enlace alternativo, pero lo reemplacé con un buttonpara el menú dinámico basado en JavaScript. Estos fueron diseñados para verse iguales, ¡pero el enlace alternativo era un par de píxeles más pequeño que el botón!

    Esto era tan pequeño, y el JavaScript generalmente se activaba tan rápido, que no me había dado cuenta de que estaba desactivado. Sin embargo, Chrome lo notó al calcular el CLS y, como estaba en el encabezado, desplazó toda la página hacia abajo un par de píxeles. Entonces, esto tuvo un gran impacto en la puntuación CLS, suficiente para colocar todas nuestras páginas en la categoría "Necesita mejorar".

    Esto fue un error de mi parte, y la solución fue simplemente sincronizar los dos elementos (también podría haberse solucionado configurando un min-heighten el encabezado como se mencionó anteriormente), pero me confundió un poco. Estoy seguro de que no soy el único que ha cometido este error, así que tenga en cuenta cómo se representa la página sin JavaScript. ¿No crees que tus usuarios desactivan JavaScript? Todos sus usuarios no son JS mientras descargan su JS .

    Las fuentes web provocan cambios en el diseño

    Las fuentes web son otra causa común de CLS debido a que el navegador calcula inicialmente el espacio necesario en función de la fuente alternativa y luego lo vuelve a calcular cuando se descarga la fuente web. Por lo general, el CLS es pequeño, siempre que se utilice una fuente alternativa de tamaño similar, por lo que a menudo no causan un problema suficiente como para fallar en Core Web Vitals, pero de todos modos pueden resultar discordantes para los usuarios.

    Artículo de Smashing Magazine con fuente alternativa y con fuentes web completas. ( Vista previa grande )

    Desafortunadamente, incluso precargar las fuentes web no ayudará aquí ya que, si bien eso reduce el tiempo que se usan las fuentes alternativas (por lo que es bueno para el rendimiento de carga - LCP), todavía lleva tiempo recuperarlas , por lo que las fuentes alternativas se seguirán usando. por el navegador en la mayoría de los casos, por lo que no evita CLS. Dicho esto, si sabe que se necesita una fuente web en la página siguiente (digamos que está en una página de inicio de sesión y sabe que la página siguiente usa una fuente especial), puede buscarla previamente .

    Para evitar por completo cambios de diseño inducidos por las fuentes , por supuesto, no podríamos usar fuentes web en absoluto, incluido el uso de fuentes del sistema o font-display: optionalno usarlas si no las descargamos a tiempo para el renderizado inicial. Pero, para ser honesto, ninguno de ellos es muy satisfactorio.

    Otra opción es asegurarse de que las secciones tengan el tamaño adecuado (p. ej., con min-height), de modo que si bien el texto en ellas puede cambiar un poco, el contenido debajo no se empujará hacia abajo incluso cuando esto suceda. Por ejemplo, establecer un min-heighten el h1elemento podría evitar que todo el artículo se desplace hacia abajo si se cargan fuentes ligeramente más altas, siempre que las diferentes fuentes no causen un número diferente de líneas. Esto reducirá el impacto de los cambios; sin embargo, para muchos casos de uso (por ejemplo, párrafos genéricos) será difícil generalizar una altura mínima.

     

    Lo que más me entusiasma para resolver este problema son los nuevos descriptores de fuentes CSS que le permiten ajustar más fácilmente las fuentes alternativas en CSS:

    @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400;}@font-face { font-family: "Lato-fallback"; size-adjust: 97.38%; ascent-override: 99%; src: local("Arial");}h1 { font-family: Lato, Lato-fallback, sans-serif;}

    Antes de esto, ajustar la fuente alternativa requería usar la API de carga de fuentes en JavaScript, lo cual era más complicado, pero esta opción que saldrá muy pronto finalmente puede brindarnos una solución más fácil y con más probabilidades de ganar terreno. Consulte mi artículo anterior sobre este tema para obtener más detalles sobre esta próxima innovación y más recursos al respecto.

    Plantillas iniciales para páginas renderizadas del lado del cliente

    Muchas páginas renderizadas del lado del cliente, o aplicaciones de una sola página, renderizan una página básica inicial usando solo HTML y CSS, y luego "hidratan" la plantilla después de que JavaScript se descarga y ejecuta.

    Es fácil que estas plantillas iniciales no estén sincronizadas con la versión de JavaScript, ya que se agregan nuevos componentes y funciones a la aplicación en JavaScript, pero no se agregan a la plantilla HTML inicial que se representa primero. Esto provoca CLS cuando JavaScript inyecta estos componentes.

    Así que revise todas sus plantillas iniciales para asegurarse de que sigan siendo buenos marcadores de posición iniciales. Y si la plantilla inicial consta de divcorreos electrónicos vacíos, utilice las técnicas anteriores para asegurarse de que tengan el tamaño adecuado para tratar de evitar cambios.

    Además, la inicial divque se inyecta con la aplicación debe tener una min-heightpara evitar que se represente con una altura 0 inicialmente incluso antes de que se inserte la plantilla inicial.

    div/div

    Siempre que min-heightsea más grande que la mayoría de las ventanas gráficas , esto debería evitar cualquier CLS para el pie de página del sitio web, por ejemplo. CLS solo se mide cuando está en la ventana gráfica y, por lo tanto, afecta al usuario. De forma predeterminada, un vacío divtiene una altura de 0 px, así que dale una altura min-heightmás cercana a la altura real cuando se cargue la aplicación.

    Asegúrese de que las interacciones del usuario se completen en 500 ms

    Las interacciones del usuario que hacen que el contenido cambie se excluyen de las puntuaciones CLS. Estos están restringidos a 500 ms después de la interacción. Entonces, si hace clic en un botón y realiza un procesamiento complejo que demora más de 500 ms y luego genera contenido nuevo, su puntuación CLS se verá afectada.

     

    Puede ver si el turno se excluyó en Chrome DevTools usando la pestaña Rendimiento para registrar la página y luego buscando los turnos como se muestra en la siguiente captura de pantalla. Abra DevTools, vaya a la pestaña Rendimiento , muy intimidante (¡pero muy útil una vez que lo domine!) y luego haga clic en el botón de grabación en la parte superior izquierda (encerrado en un círculo en la imagen a continuación) e interactúe con su página y deje de grabar una vez. completo.

    Usar la pestaña Rendimiento en Chrome Dev Tools para ver si los turnos se excluyen debido a entradas recientes. ( Vista previa grande )

    Verá una tira de película de la página en la que cargué algunos de los comentarios en otro artículo de Smashing Magazine, por lo que en la parte que he marcado con un círculo, puede ver cómo se cargan los comentarios y el pie de página rojo que se desplaza hacia abajo fuera de la pantalla. Más abajo en la pestaña Rendimiento , debajo de la línea Experiencia , Chrome colocará un cuadro de color rosado rojizo para cada turno y cuando hagas clic en él obtendrás más detalles en la pestaña Resumen a continuación.

    Aquí puede ver que obtuvimos una puntuación enorme de 0,3359 , muy por encima del umbral de 0,1 que pretendemos alcanzar, pero la puntuación acumulativa no ha incluido esto porque la entrada reciente está configurada en Usos.

    Garantizar que las interacciones solo cambien el contenido dentro de los límites de 500 ms en lo que el retardo de la primera entrada intenta medir, pero hay casos en los que el usuario puede ver que la entrada tuvo un efecto (por ejemplo, se muestra un control giratorio de carga), por lo que el FID es bueno, pero el contenido puede no se agregará a la página hasta después del límite de 500 ms, por lo que CLS es malo.

    Idealmente, toda la interacción finalizará en 500 ms, pero puedes hacer algunas cosas para reservar el espacio necesario usando las técnicas anteriores mientras se lleva a cabo el procesamiento, de modo que si toma más de los mágicos 500 ms, entonces tendrás ya manejó el turno y por lo tanto no será penalizado por ello. Esto es especialmente útil cuando se recupera contenido de la red que podría ser variable y estar fuera de su control.

    Otros elementos a tener en cuenta son las animaciones que duran más de 500 ms y, por lo tanto, pueden afectar a CLS. Si bien esto puede parecer un poco restrictivo, el objetivo de CLS no es limitar la "diversión", sino establecer expectativas razonables de la experiencia del usuario y no creo que sea poco realista esperar que estas demoren 500 ms o menos. Pero si no está de acuerdo o tiene un caso de uso que tal vez no hayan considerado, el equipo de Chrome está abierto a recibir comentarios al respecto .

    JavaScript sincrónico

    La última técnica que voy a analizar es un poco controvertida ya que va en contra de consejos conocidos sobre rendimiento web, pero puede ser el único método en determinadas situaciones. Básicamente, si tienes contenido que sabes que va a provocar cambios, entonces una solución para evitarlos es no renderizarlo hasta que se haya estabilizado.

    El siguiente HTML ocultará divinicialmente, luego cargará algo de JavaScript que bloquea la representación para completarlo divy luego lo mostrará. Como JavaScript bloquea el procesamiento, no se procesará nada debajo de esto (incluido el segundo stylebloque para mostrarlo), por lo que no se producirán cambios.

     

    style.cls-inducing-div { display: none;}/stylediv/divscript.../scriptstyle.cls-inducing-div { display: block;}/style

    Es importante alinear el CSS en el HTML con esta técnica, para que se aplique en orden. La alternativa es mostrar el contenido con JavaScript, pero lo que me gusta de la técnica anterior es que aún muestra el contenido incluso si JavaScript falla o el navegador lo desactiva.

    Esta técnica también se puede aplicar con JavaScript externo, pero esto causará más demora que una en línea scriptcuando se solicita y descarga el JavaScript externo. Ese retraso se puede minimizar precargando el recurso JavaScript para que esté disponible más rápido una vez que el analizador llegue a esa sección de código:

    head...link rel="preload" href="cls-inducing-javascript.js" as="script".../headbody...style.cls-inducing-div { display: none;}/stylediv/divscript src="cls-inducing-javascript.js"/scriptstyle.cls-inducing-div { display: block;}/style.../body

    Ahora, como digo, estoy seguro de que esto hará que algunas personas de rendimiento web se estremezcan, ya que el consejo es usar async, deferlas versiones más nuevas type="module"(que tienen defer- de forma predeterminada) en JavaScript específicamente para evitar bloquear el render , mientras que aquí estamos haciendo lo contrario. ! Sin embargo, si el contenido no puede ser predeterminado y va a causar cambios discordantes, entonces no tiene mucho sentido renderizarlo temprano.

    Utilicé esta técnica para un banner de cookies que se cargaba en la parte superior de la página y movía el contenido hacia abajo:

    Un aviso de cookies en la parte superior de la página u otro banner puede desplazar el contenido hacia abajo. ( Vista previa grande )

    Esto requirió leer una cookie para ver si se mostraba el banner de cookies o no y, si bien eso se podía completar en el lado del servidor, este era un sitio estático sin capacidad de alterar dinámicamente el HTML devuelto.

    Los banners de cookies se pueden implementar de diferentes maneras para evitar CLS. Por ejemplo, colocándolos en la parte inferior de la página o superponiéndolos encima del contenido, en lugar de desplazar el contenido hacia abajo. Preferimos mantener el contenido en la parte superior de la página, por lo que tuvimos que utilizar esta técnica para evitar los cambios. Hay otras alertas y pancartas que los propietarios de sitios prefieren que aparezcan en la parte superior de la página por diversos motivos.

    También utilicé esta técnica en otra página donde JavaScript mueve el contenido a las columnas "principal" y "aparte" (por razones que no explicaré, no fue posible construir esto correctamente en el lado del servidor HTML). Ocultar nuevamente el contenido, hasta que JavaScript lo haya reorganizado, y solo entonces mostrarlo, evitó los problemas de CLS que estaban arrastrando hacia abajo la puntuación CLS de estas páginas. Y nuevamente, el contenido se muestra automáticamente incluso si JavaScript no se ejecuta por algún motivo y se muestra el contenido no desplazado.

    El uso de esta técnica puede afectar otras métricas (particularmente LCP y también First Contentful Paint), ya que retrasa la renderización y también bloquea potencialmente el precargador de anticipación de los navegadores, pero es otra herramienta a considerar en aquellos casos en los que no existe otra opción.

    Conclusión

    El cambio de diseño acumulativo se debe a que el contenido cambia las dimensiones o se inyecta contenido nuevo en la página debido a la ejecución tardía de JavaScript. En esta publicación, analizamos varios consejos y trucos para evitar esto. Me alegra que los Core Web Vitals hayan puesto el foco en este irritante tema: durante demasiado tiempo los desarrolladores web (y definitivamente me incluyo en esto) hemos ignorado este problema.

    Limpiar mis propios sitios web ha dado como resultado una mejor experiencia para todos los visitantes. Le animo a que también analice sus problemas con CLS y, con suerte, algunos de estos consejos le serán útiles cuando lo haga. Quién sabe, ¡puede que incluso consigas llegar a la elusiva puntuación CLS de 0 para todas tus páginas!

    Más recursos

    Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

    Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

    Implemente rápidamente. Implementar inteligentemente ¡Registro! Índice Por qué CLS es diferente

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-solucionar-problemas-de-cambio-de-diseno-acumulativo-cls-1102-0.jpg

    2024-05-22

     

    Cómo solucionar problemas de cambio de diseño acumulativo (CLS)
    Cómo solucionar problemas de cambio de diseño acumulativo (CLS)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20