Consejos sencillos para evitar grandes desplazamientos [No Dev Required]

Los grandes cambios de diseño en tu sitio web pueden dar lugar a una mala experiencia de usuario y provocar que los visitantes abandonen la página. Ocurren cuando los elementos se mueven inesperadamente mientras se carga la página, haciendo que los usuarios pulsen botones o enlaces equivocados.

Esto también puede afectar a tu puntuación de Desplazamiento de diseño acumulativo, una métrica importante en la iniciativa Core Web Vitals de Google.

Afortunadamente, puedes mejorar los tiempos de carga y garantizar un diseño estable aplicando buenas prácticas como la asignación de dimensiones y el uso de marcadores de posición estructurales.

En este artículo, exploraremos las causas, su impacto y estrategias sencillas para evitar grandes desplazamientos del diseño.

¿Qué son los cambios de disposición?

Un gran desplazamiento de diseño se produce cuando un sitio web no está optimizado correctamente, haciendo que las cosas de la página se muevan mucho mientras se carga.

Esto hace que las imágenes, vídeos, fuentes o botones se muevan inesperadamente, dificultando a los visitantes el uso del sitio. Incluso puede hacer que se vayan antes de poder ver el contenido.

Perder visitantes debido a una mala experiencia de usuario ya es duro. El Desplazamiento de diseño acumulativo (CLS) lo empeora al perjudicar tu puntuación de Google Core Web Vitals. Recuerda que la estabilidad visual influye directamente en la puntuación de Google Core Web Vitals y en el SEO de un sitio web.

Herramientas como PageSpeed Insights, Lighthouse o Chrome DevTools pueden identificar grandes cambios de diseño y señalar los elementos problemáticos.

Ejecutar una auditoría de rendimiento de WordPress puede proporcionarte información valiosa sobre cualquier problema que cause grandes cambios de diseño en tu sitio. Esto te permite localizar y corregir los elementos problemáticos para mejorar el rendimiento de tu sitio.

Explicación de CLS (Desplazamiento de diseño acumulativo)

El término CLS significa Cumulative Layout Shift, que es una métrica de Core Web Vitals utilizada para medir los cambios inesperados de diseño, y forma parte de Actualización de la Experiencia de Página de Google.

La puntuación CLS de un sitio web refleja lo bien que gestiona los cambios inesperados de diseño, evaluando la estabilidad del contenido y midiendo la distancia a la que se han desplazado los elementos afectados en la ventana gráfica.

Estos datos se utilizan para calcular una puntuación CLS precisa.

¿Qué es una puntuación CLS correcta?

Bien, aquí tienes las puntuaciones de Google para CLS:

• Bien - Inferior o igual a 0.1 segundos
• Necesita mejorar - Inferior o igual a 0.25 segundos
• Pobre - Más de 0.25 segundos.

Una buena puntuación CLS es crucial para tener una buena posición en las SERPs de Google y cumplir los criterios de Core Web Vitals.

¿Cómo afectan los cambios de diseño al rendimiento de la página?

Cuando los usuarios visitan una página Web, esperan interactuar rápidamente con diversos elementos, como botones, formularios de contacto, imágenes y vídeos. Sin embargo, los cambios de diseño inesperados pueden hacer que estos elementos se muevan, ajusten o reubiquen mientras se carga la página.

Esto puede llevar a que los usuarios hagan clic o pulsen accidentalmente sobre contenidos no deseados, especialmente en dispositivos móviles con espacio de pantalla limitado. Estos cambios de diseño hacen que la página sea visualmente inestable.

Dado que CLS forma parte de Web Vitals, que refleja la experiencia general de la página, reducir los cambios de diseño y mejorar las puntuaciones de CLS es esencial para aumentar la satisfacción del usuario y optimizar el rendimiento de la página.

¿Cómo evitar grandes cambios de diseño?

Una vez que hayas identificado los cambios de disposición que afectan a tus puntuaciones CLS, es hora de solucionarlos. Aquí tienes algunos métodos para evitar grandes cambios de disposición.

1. Evita Insertar Nuevo Contenido Sobre Contenido Existente

Para evitar cambios inesperados en el diseño, evita insertar contenido dinámico, como banners o formularios, sobre el contenido existente, a menos que lo pida la interacción del usuario.

Por ejemplo, una pancarta que se cargue más despacio que la página puede provocar un cambio significativo en el diseño, lo que daría lugar a una mala experiencia del usuario y a puntuaciones CLS más altas.

Una posible solución: Iniciar la carga de nuevos contenidos con la interacción del usuario:

• Utiliza botones como "Cargar máso " "Actualiza" para activar la carga de contenidos.
• Precargar contenido antes de la interacción del usuario para garantizar una visualización inmediata.

Ejemplo: La función "Cargar más" del sitio web de Chloé carga dinámicamente contenido adicional sin provocar cambios inesperados en el diseño.

2. Gestiona cómo se cargan las fuentes en tu sitio web

Optimizar la carga de fuentes en tu sitio web es crucial para evitar problemas como el Flash de Texto Invisible (FOIT) y el Flash de Texto sin Estilo (FOUT), que pueden provocar grandes desplazamientos de diseño (CLS).

Para resolver este problema, puedes utilizar dos estrategias como:

1. Precargar fuentes web:

• Precargar las fuentes web garantiza que estén disponibles durante la carga de la página. Puedes conseguirlo añadiendo una etiqueta de enlace a la cabecera HTML y especificando el nombre de la fuente, el formato y el atributo de origen cruzado.

Por ejemplo, mira el siguiente código:

<link rel="preload" href="https://www.cloudways.com/yourwebfont" as="font" type="font/format" crossorigin>

Toma:

• "/tuwebfont" especifica el nombre de la fuente web que estás cargando.
• "formato" especifica el formato de fuente web concreto (por ejemplo, ttf, woff, woff2, etc.).

Puedes utilizar plugins de optimización como el plugin de caché Cloudways Breeze para precargar fuentes web y enlaces.

Con Breeze, puedes mejorar la velocidad de tu sitio web WordPress gracias a sus notables funciones. Utiliza la caché interna para acelerar la velocidad de carga de las páginas, garantizando que los visitantes no tengan que esperar mucho para acceder a tu contenido.

2. Usando el atributo font-display:

• El atributo font-display controla cómo se muestran las fuentes durante la carga. Opciones como auto, block, swap, fallback y optional te permiten gestionar la visibilidad del texto en función del estado de carga de la fuente.

Por ejemplo, si eres usuario de WordPress, puedes utilizar el atributo font-display: swap en tu CSS:

Si utilizas el tema Astra como yo, sigue estos pasos para añadir el atributo font-display: swap a tu archivo de tema:

• Accede a tu Panel de WordPress.
• Ir a Apariencia → Editor de archivos de temas.
• Aquí, localiza la hoja de estilo donde puedes hacer los cambios necesarios. Para el tema Astra, los archivos CSS se encuentran normalmente en el directorio directorio assets/css/.

• Accede a estos archivos utilizando un cliente FTP con tus credenciales de acceso FTP obtenidas de tu proveedor de alojamiento.
• Navega a wp-content/temas/astra/activos/css/ directorio.

• Busca un archivo que contenga Declaración @font-face.

• Descarga el archivo y ábrelo en un editor de texto.

• Añade font-display: swap a la Declaración @font-face para la fuente.

• Guarda los cambios y sube el archivo actualizado al servidor, sustituyendo al existente.
• Una vez completado, la advertencia "Garantizar que el texto permanezca visible durante la carga de WebFont" ya no debería aparecer en tu informe de Google PageSpeed Insights, lo que indica que se ha optimizado correctamente la carga de fuentes de tu sitio web.

Estrategias adicionales de gestión de fuentes:

1. Optimizar archivos de fuentes:

Personaliza los archivos de fuentes especificando qué caracteres se aplicarán. Esto es especialmente útil para elementos como logotipos o encabezados, en los que los caracteres específicos se conocen de antemano.

Por ejemplo, en un logotipo para "Corporación ABC,"sólo incluye "A", "B", "C", "&" y "-" en el archivo de fuentes reduce su tamaño, optimizando la velocidad de carga. Tenemos una guía sobre cómo utilizar Google Fonts personalizadas en WordPress que puede resultarte útil.

2. Define las propiedades de altura mínima:

Además, considera la posibilidad de establecer altura mínima de las secciones del sitio web para mitigar los cambios de diseño inducidos por la fuente. Por ejemplo, aplicar un altura a elementos como <h1> puede estabilizar los diseños, evitando que el contenido de abajo se desplace cuando se cargan fuentes diferentes.

header {
  min-height: 60px;
}
@media (min-width: 700px) {
  header {
    min-height: 220px;
  }
}

Aunque este enfoque puede no ser aplicable universalmente, combinarlo con otras técnicas de optimización como la precarga de fuentes y el uso de atributos de visualización de fuentes puede mejorar la experiencia del usuario al minimizar las interrupciones causadas por la carga de fuentes.

3. Conéctate pronto a las fuentes:

Si tus fuentes están alojadas en otro lugar de Internet (por ejemplo, en una red de distribución de contenidos o en un servicio de fuentes), puedes establecer una conexión rápida con esas fuentes. Esto ayuda a tu sitio web a encontrar las fuentes más rápidamente, para que todo esté listo antes.

3. Evita las animaciones no compuestas

Utiliza animaciones compuestas siempre que puedas. Esto ayuda a reducir el trabajo del hilo principal, evita repintar píxeles mientras se carga la página y reduce los desplazamientos del diseño.

Puedes solucionar el problema de "Evitar las animaciones no compuestas" aplicando cambios sencillos como añadir la función "Propiedad Will-Change".

Permíteme compartir un ejemplo rápido para que entiendas mejor cómo puedo implementar la Propiedad Will-Change. Si accedo a mi Panel de WordPress y navega hasta Apariencia > Personalizar, en la sección "CSS adicional", puedo ver algún código CSS que puede no estar optimizado para animaciones.

Debido a un CSS no optimizado, me encuentro con el error "Evitar animaciones no compuestas" en Page Speed Insights, como se muestra en la siguiente captura de pantalla.

Ahora, vamos a intentar optimizar el archivo CSS implementando la "Propiedad Will-Change".

Añadir la propiedad Will-Change

Esto permite al navegador conocer los próximos cambios de animación, lo que ayuda a mejorar el rendimiento de la representación.

.my-animation {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    will-change: transform, opacity; /* New line */
    animation: complexMove 5s linear infinite;
}

Tras la optimización, sustituye el código antiguo por el nuevo CSS optimizado en tu sección CSS adicional.

Este ajuste no alterará la animación, pero debería resolver el error. Comprueba para confirmar que el error se ha resuelto. Optimizar el código también puede mejorar la puntuación de rendimiento de tu sitio web.

4. Asegúrate de que las acciones del usuario finalizan en 500 ms

Cuando trabajes en tu sitio web, es importante asegurarte de que cuando los usuarios interactúen con tu contenido, las cosas no salten de repente en la pantalla. Esto puede ser realmente frustrante para ellos.

Para evitarlo, tienes que asegurarte de que cualquier cambio en el diseño se produzca en un plazo de tiempo rápido, concretamente en 500 milisegundos de la acción del usuario. Si tarda más, tu Desplazamiento de diseño acumulativo (CLS) podría sufrir.

Puedes comprobarlo utilizando DevTools de Chrome. Registra el rendimiento de tu página y busca cambios repentinos tras las interacciones del usuario. Si el cambio se produce más de 500 milisegundos después de la interacción, podría repercutir negativamente en tu puntuación CLS.

En la captura de pantalla anterior de Apple.compuedes ver que hemos obtenido una puntuación de 0.0004175 - que está bajo la 0,1 umbral.

Si tu puntuación supera el umbral, como 0.4004175, asegúrate de acelerar el procesamiento o la carga de contenidos para minimizar los retrasos.

Por ejemplo, si estás obteniendo contenido de la red, intenta asignarle espacio de antemano. De este modo, no serás penalizado por ello aunque tarde más de 500 milisegundos en cargarse.

Otra cosa a tener en cuenta son las animaciones. Asegúrate de que sean breves -no más de 500 milisegundos- para evitar que afecten a tu puntuación CLS. Ya hemos explicado cómo evitar las animaciones no compuestas anteriormente en este blog. No dudes en volver a consultar esa sección para refrescar la memoria.

Al optimizar para CLS, no sólo mejoras el rendimiento de tu sitio web, sino que también proporcionas una mejor experiencia de usuario en general.

5. Utiliza JavaScript de forma sincrónica

El JavaScript síncrono ejecuta el código secuencialmente, bloqueando la ejecución posterior hasta que finalice la tarea actual.

He aquí cómo se aplica: Inicialmente, ocultas el contenido problemático mediante CSS. A continuación, utilizas JavaScript de bloqueo de renderizado para rellenar y mostrar el contenido, evitando cambios en el diseño hasta que esté completamente asentado.

Sin embargo, este enfoque puede afectar a métricas como el LCP y la Primera Pintura de Contenido ya que retrasa la renderización. No obstante, es una consideración que merece la pena cuando no existe ninguna otra solución para evitar los desplazamientos de diseño.

Para su implementación, asegúrate de que el CSS está alineado con el HTML para mantener el orden adecuado. Alternativamente, se puede utilizar JavaScript para revelar el contenido, pero el CSS en línea garantiza la visibilidad incluso si JavaScript falla o está desactivado.

<style>
.cls-inducing-div {
    display: none;
}
</style>

<div class="cls-inducing-div"></div>

<script>
// Your render-blocking JavaScript goes here to populate the div
...
</script>

<style>
.cls-inducing-div {
    display: block;
}
</style>

Esta técnica también puede extenderse al JavaScript externo, pero puede introducir un retraso adicional mientras se solicitan y descargan los scripts. Para mitigarlo, precarga el recurso JavaScript en el código HTML <head> sección.

Aunque va en contra del consejo común que oirías de los desarrolladores, el JavaScript síncrono puede ser útil en situaciones en las que los cambios de contenido son inevitables, aunque pueda retrasar la renderización.

6. Especifica las dimensiones de las imágenes y los vídeos

Para los navegadores modernos, como Firefox y Chrome, establecer unas dimensiones precisas para las imágenes y los vídeos es crucial para evitar que se desplacen durante la carga del sitio web. Un movimiento inesperado puede frustrar a los usuarios, empañando la apariencia de tu sitio web y la velocidad percibida.

En las tiendas de comercio electrónico, donde los productos presentan múltiples imágenes de distintos tamaños, es habitual encontrarse con este problema.

Sin embargo, especificar la anchura y la altura de cada elemento informa al navegador sobre el espacio que necesitan, garantizando una carga fluida sin cambios de diseño perjudiciales.

Para remediarlo:

• Selecciona tu imagen en el menú Biblioteca multimedia o Subir y añádelo a cualquier página o entrada.

• Selecciona la imagen con el cursor para mostrar la Panel de Configuración.

• Una vez cargada tu imagen, haz clic en Editar imagen.

Nota: Puedes ver el tamaño de la imagen y las dimensiones por defecto en el panel de configuración.

• Localiza la Imagen a escala en el panel de Configuración.
• Actualiza las dimensiones de imagen que desees.
• Haz clic en Escala para guardar los cambios.

Para cualquiera que utilice temas como WoodMart o cualquier otro tema para WordPress, el simple hecho de añadir la información correcta sobre el tamaño de tus imágenes y vídeos puede suponer una gran diferencia a la hora de reducir a 0 el CLS de las páginas web de WoodMart.

7. Tener espacio dedicado para anuncios

Establecer tamaños específicos para los anuncios de tu sitio web es crucial. Al decidir de antemano las dimensiones de cada anuncio, evitas inadvertidamente que otros elementos de tu página se desplacen.

Esto es especialmente útil porque es posible que los anuncios no aparezcan inmediatamente, lo que podría alterar el diseño de tu sitio web y provocar la frustración de los usuarios.

Para los casos en los que un anuncio no se cargue inmediatamente debido a un inventario de anuncios limitado, emplea marcadores de posición o banners alternativos que se ajusten a estas dimensiones reservadas pueden mantener la estabilidad del diseño de tu página.

Este método garantiza que la experiencia del usuario siga siendo coherente, incluso cuando los anuncios reales tarden más en cargarse o no se muestren.

Para reducir aún más el impacto de los anuncios, incrustaciones e iframes en el diseño de tu sitio:

Utiliza marcadores de posición: Implementa marcadores de posición para los espacios publicitarios cuando los anuncios no estén disponibles, manteniendo la coherencia del diseño y evitando desplazamientos.

Precargar tamaños: Antes de añadir anuncios a tu sitio web, decide el tamaño más grande que podría tener un anuncio y haz espacio para él. De esta forma, te aseguras de que ya hay espacio para el anuncio, y tu sitio web no tiene que mover las cosas inesperadamente cuando aparezca el anuncio.

Posicionamiento: Considera la posibilidad de colocar anuncios que no molesten demasiado a la gente, como en la parte inferior de la página o a un lado. Esto ayuda a que tu sitio web tenga buen aspecto y funcione sin problemas, porque los anuncios no estorbarán ni cambiarán la configuración de tu página.

Integrando estas estrategias, puedes mejorar significativamente la estabilidad del diseño de tu sitio web, mejorando la experiencia general del usuario.

8. Optimizar el contenido dinámico

Garantizar una experiencia de usuario fluida en tu sitio web implica una gestión cuidadosa del contenido dinámico, como anuncios, ventanas emergentes y notificaciones.

Reservar espacio para estos elementos es clave para mantener la estabilidad visual y evitar molestos cambios en el diseño. Este enfoque permite que tu sitio dé cabida a contenidos dinámicos sin alterar el diseño. Para los elementos emergentes automáticos, como los avisos de cookies, deslízalos desde el borde inferior. Es menos intrusivo y mantiene el contenido superior sin desordenar.

9. Reducir las dependencias de terceros

Para mejorar el rendimiento y la seguridad de tu sitio web, es esencial minimizar la dependencia de terceros.

• Empieza por auditar todos los scripts externos, iframes y otros servicios para comprender su impacto en tu sitio.
• Priorízalos en función de su necesidad y considera la posibilidad de eliminar los que no sean cruciales.
• Cambia a alternativas autoalojadas para reducir las peticiones externas, mejorar los tiempos de carga y controlar tus datos.

Para el resto de servicios de terceros:

• Implementa la carga lenta para que no entorpezcan el tiempo de carga inicial de tu sitio.
• Agiliza las integraciones de terceros para garantizar una experiencia web más rápida, segura y fácil de usar.

Resultados antes de aplicar las estrategias anteriores:

Resultados después de aplicar las estrategias anteriores:

Puedes ver que, al depender menos de herramientas de terceros, mejoramos la puntuación de rendimiento de nuestro sitio de 59 a 93 y CLS reducido de 0.024 a 0.

Conclusión

Los grandes cambios de diseño pueden ser molestos, provocar errores en el usuario o hacer que la gente pierda su lugar en una página. Evitarlos es esencial para mejorar la experiencia del usuario en tu sitio web y también puede ayudarte a posicionarte mejor en las SERPs de Google.

Poner en práctica los consejos prácticos que hemos compartido en este artículo puede ponerte en una mejor posición para evitar grandes cambios de diseño y mejorar la experiencia de usuario de tu sitio. Para una mayor optimización, consulta nuestra guía sobre el almacenamiento en caché de WordPress.

Por último, ten en cuenta que el alojamiento web puede afectar a las clasificaciones SEO. Por lo tanto, elige una solución de alojamiento de WordPress fiable como Cloudways.

Abdul Rehman

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.