Realizar modificaciones en el diseño web puede crear una experiencia frustrante para tus visitantes, ya que hacen que tu página parezca visualmente discordante por que los elementos de la página aparecen repentinamente, se mueven y afectan la forma en que tus visitantes interactúan con ella.

Evitar grandes cambios de diseño es esencial para crear una experiencia fluida y optimizada para sus visitantes.

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

Cuando un usuario visita tu página web, generalmente busca interactuar rápidamente con botones, formularios de contacto, imágenes, videos u otros tipos de contenido.

A veces, justo cuando están a punto de hacer clic/tocar algo, la pantalla se ha movido hacia abajo y terminaron haciendo clic/tocando algo completamente distinto.

Esta modificacion del diseño web afecta la forma en que los usuarios interactúan con tu sitio web, particularmente en dispositivos móviles; un puntaje CLS bajo indica que su página es visualmente inestable (lo que se conoce en la industria como janky).

Aunque CLS no tiene un alto impacto en el Performance Score (solo 5%), su inclusión en Web Vitals significa su importancia como una métrica útil que refleja la experiencia de tu página.

¿Cómo se activa esta auditoría?

Esta auditoría está altamente correlacionada con el cambio de diseño acumulativo de tu página y detalla qué elementos de la página contribuyeron a ello.

¿Cómo evitar grandes cambios en el diseño web?

Evite grandes cambios de diseño incorporando buenas prácticas en su flujo de trabajo de desarrollo, como:

• 1) Especificación de las dimensiones de la imagen

Siempre especifique tanto el ancho como la altura de los elementos de imagen y video de su sitio web para que se use el espacio correcto para las imágenes/videos.

Alternativamente, puede usar cuadros de relación de aspecto CSS para hacer lo mismo

• 2) Reducir los cambios de diseño causados ​​por anuncios, incrustaciones e iframes

Para reducir los cambios de diseño causados ​​por anuncios, incrustaciones e iframes, haga lo siguiente:

• Reserve el tamaño del espacio publicitario (preferiblemente el más grande) antes de cargar la biblioteca de anuncios.
• Mueva los anuncios a la parte inferior o fuera de la ventana gráfica.
• Utilice marcadores de posición cuando no haya ningún anuncio disponible para mostrar.

Para obtener más información, lea este artículo.

• 3) Evitar insertar contenido nuevo sobre contenido existente

Intente y evite insertar contenido dinámico (por ejemplo, pancartas, formularios, etc.) sobre el contenido existente a menos que sea en respuesta a la interacción del usuario. Esto ayuda a evitar cambios de diseño inesperados.

Para obtener más información, lea este artículo.

• 4) Prevención del destello de texto invisible (FOIT)

El problema de Flash of Invisible Text (FOIT) también puede afectar el CLS de su página. Asegúrese de que su texto permanezca visible durante las cargas de fuentes web precargando fuentes web y/o usando el atributo font-display.

Obtenga más información sobre esto aquí.

• 5) Evitar animaciones no compuestas

Siempre que sea posible, solo realice animaciones compuestas para reducir el trabajo del subproceso principal y evitar que se vuelvan a pintar los píxeles durante la carga de la página.