9 Estrategias Fáciles para Evitar Grandes Cambios de Diseño [No Requiere Desarrollo]

Los grandes cambios de diseño en tu sitio web pueden dar lugar a una mala experiencia de usuario, provocando potencialmente que los visitantes se marchen. Se producen cuando los elementos se mueven inesperadamente mientras se carga la página, lo que lleva a los usuarios a pulsar 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 cambios de diseño.

¿Qué son los turnos de disposición?

Un gran desplazamiento del diseño ocurre 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, los vídeos, las fuentes o los botones se muevan inesperadamente, dificultando a los visitantes el uso del sitio. Incluso puede hacer que se marchen 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 del 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 de diseño inesperados, y forma parte de la 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 aprobar el CLS?

Bueno, aquí están las puntuaciones de Google para CLS:

• Bueno – Inferior o igual a 0,1 segundos
• Necesita mejorar – Inferior o igual a 0,25 segundos
• Deficiente – Más de 0,25 segundos.

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

Evita grandes cambios de diseño con el alojamiento WordPress de Cloudways

Garantiza un rendimiento constante del sitio web y elimina los cambios de diseño con nuestra pila optimizada. Consigue puntuaciones CLS bajas para velocidades de carga rápidas y altas clasificaciones en las SERP.

PRUEBA AHORA

¿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 inesperados de diseño 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 contenido no deseado, 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 desplazamientos 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 disposición?

Una vez que hayas identificado los desplazamientos de disposición que afectan a tus puntuaciones CLS, es hora de solucionarlos. He aquí algunos métodos para evitar grandes desplazamientos de la 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, un banner que se carga más despacio que la página puede provocar un cambio significativo en el diseño, lo que lleva 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ás» o«Actualizar» para activar la carga de contenidos.
• Precarga el 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

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 código que aparece a continuación:

<link rel="preload" href="/yourwebfont" as="font" type="font/format" crossorigin>

Toma:

• «/tufuenteweb» 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. Utilizando el Atributo font-display:

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

Por ejemplo, si eres usuario de WordPress, aquí tienes cómo puedes utilizar la propiedad 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 control de WordPress.
• Ve 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 assets/css/.

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

• Busca un archivo que contenga la 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 de 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 fuentes web» ya no debería aparecer en tu informe de Google PageSpeed Insights, lo que indica que la optimización de la carga de fuentes de tu sitio web se ha realizado correctamente.

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«ABC Corporation», incluir sólo «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. Definir propiedades de altura mínima:

Además, considera la posibilidad de establecer propiedades de altura mínima adecuadas para las secciones del sitio web, con el fin de mitigar los cambios de diseño inducidos por las fuentes. Por ejemplo, aplicar una altura a elementos como <h1 > puede estabilizar los diseños, impidiendo que el contenido de debajo 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 animaciones no compuestas» aplicando cambios sencillos como añadir la «Propiedad Will-Change».

Permíteme compartir un ejemplo rápido para que te resulte más fácil entender cómo puedo implementar la Propiedad Will-Change. Si accedo a mi panel de control de WordPress y navego hasta Apariencia > Personalizar, en la sección«CSS adicional«, puedo ver algo de 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ñade 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 renderizació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 los 500 milisegundos siguientes a la acción del usuario. Si tarda más, tu puntuación del Desplazamiento de diseño acumulativo (CLS) podría verse afectada.

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

En la captura de pantalla anterior de Apple.com, puedes ver que obtuvimos una puntuación de 0,0004175, que está por debajo del umbral de 0,1.

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 vas a obtener 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.

Otro aspecto 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 estás mejorando el rendimiento de tu sitio web, sino también proporcionando una mejor experiencia de usuario en general.

5. Utilizar 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.

Así es como 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 LCP y First Contentful Paint, 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 la implementación, asegúrate de que el CSS está inline dentro del HTML para mantener el orden adecuado. Como alternativa, 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 a JavaScript externo, pero puede introducir un retraso adicional mientras se solicitan y descargan los scripts. Para mitigarlo, precarga el recurso JavaScript en la sección > de la cabecera de tu HTML <.

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.

WordPress gestionado más rápido para evitar grandes cambios de diseño

Experimenta velocidades de servidor ul trarrápidas con la pila híbrida Cloudways LAMP + NGINX. Mejora tu Core Web Vitals para evitar los molestos cambios de diseño de WordPress.

PRUEBA AHORA

6. Especifica las dimensiones de la imagen y el vídeo

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 varias 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 perturbadores.

Para remediarlo:

• Selecciona tu imagen de la Mediateca o Súbela y añádela a cualquier página o entrada.

• Selecciona la imagen con el cursor para mostrar el 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 opción Escalar Imagen en el panel de Configuración.
• Actualiza las dimensiones de imagen que desees.
• Pulsa 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 un espacio dedicado a la publicidad

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 los anuncios pueden no aparecer inmediatamente, lo que podría interrumpir el diseño de tu sitio web y provocar la frustración de los usuarios.

En los casos en los que un anuncio no se cargue inmediatamente debido a un inventario de anuncios limitado, emplear marcadores de posición o banners alternativos que se ajusten a estas dimensiones reservadas puede 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.

Precarga de 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 la 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 tras 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 redujimos el CLS 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 la clasificación SEO. Por lo tanto, elige una solución de alojamiento de WordPress fiable como Cloudways.