¿Cuántas veces has leído un artículo y el contenido se movió hacia abajo debido a nuevos anuncios?
¿O alguna vez trató de hacer clic en un botón y terminó haciendo clic en un enlace diferente porque una nueva imagen grande de repente empujó el contenido hacia abajo? Todos estos ejemplos son cambios de diseño: son causados por algunos elementos en la página que son inestables y cambian su posición en la página. Los elementos cambian de posición por varias razones. Por ejemplo, una nueva imagen o anuncio que se carga "en la parte superior de la página" obliga a parte del contenido a moverse hacia abajo y ocupar otra sección de la página, como contenido nuevo, ya sean imágenes, anuncios o lo que sea que entre en juego más adelante. que el resto de la página. Calcula una puntuación basada en la cantidad de la página que se mueve inesperadamente y con qué frecuencia.
Discutiré algunos patrones de front-end para reducir CLS. No hablaré demasiado sobre la medición de CLS, ya que 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 sobre esto, y The Almost-Complete Guide to Cumulative Layout Shift de Jess Peck también es una excelente inmersión en eso.
Cómo corregir un error CLS alto en Web Vitals
Si las imágenes tardan en cargarse y el contenido ocupa espacio para las imágenes. Luego, cuando se carga el contenido, lo desplaza hacia abajo y provoca inestabilidad en el diseño
- Para las imágenes de Jank, reserve el espacio requerido con cuadros de relación de aspecto CSS. Este enfoque garantiza que el navegador pueda asignar la cantidad correcta de espacio en el documento mientras se carga el medio.
- Las imágenes cargadas de forma diferida también pueden causar el problema, pueden crear un gran espacio antes de ocupar el espacio de la imagen.
- Si coloca anuncios en el contenido, asegúrese de que se eliminen los turnos reservando el tamaño del espacio. Utilice un marcador de posición si no se devuelve ningún anuncio en lugar de contraer el espacio reservado. Si está utilizando WordPress, un buen complemento publicitario como Ad-Inserter se encargará de mantener el espacio publicitario correcto para que no tenga que preocuparse.
- Evita el contenido dinámico, el contenido dinámico es el que se inserta después de cargar la página. Especialmente el contenido en la mitad superior de la página, por ejemplo, boletines, suscripciones, publicaciones relacionadas en el contenido DOM. Recurre a cargar este tipo de contenido en la mitad superior de la página, si es posible intenta usar Pop-up Box.
- La respuesta HTTP lenta del servidor también podría causar inestabilidad en el contenido. Si está utilizando un CDN y tarda muchos milisegundos en cargar los elementos sangrados y esto hace que el contenido salte, entonces necesita crear un espacio en el DOM o sincronizar la carga con otros elementos.
Muchas gracias por visitarme. Sin usted, esta web no existiria, espero que le haya gustado y vuelva ☺️
Fecha actualizacion el 2022-03-31. Fecha publicacion el 2022-03-31. Categoria: Cómo solucionar el problem Autor: Oscar olg Mapa del sitio Fuente: bollyinside