Soy Alex Amigo y llevo más de 15 años peleando con las métricas de Google. Hoy te voy a explicar directamente cómo solucionar cls cuando las imágenes, los anuncios o las tipografías destrozan la estabilidad de tu diseño. Lo que evaluamos con el Cumulative Layout Shift es cuánto saltan los elementos de tu página mientras se carga. Si un texto se mueve de repente y el usuario hace clic donde no quería, tienes un problema grave de experiencia de usuario. Superar el umbral de 0,1 te va a penalizar.
Ataca el problema de las imágenes sin dimensiones
En mi experiencia con clientes, el fallo más repetido es subir fotografías sin declarar su tamaño en el código. Cuando el navegador no sabe cuánto ocupa una imagen, pinta el resto del contenido y, al cargar el archivo gráfico, empuja todo hacia abajo violentamente. Para evitar esto tienes que incluir siempre los atributos de alto y ancho en tu HTML. Si usas WordPress, te alegrará saber que plugins de optimización como WP Rocket o LiteSpeed te automatizan esta tarea. Lo que hacen es reservar el espacio exacto antes de que la foto se renderice por completo.
 (1).jpg)
Controla los contenedores de anuncios e iframes
He visto que las inserciones dinámicas son otro dolor de cabeza constante. Los bloques de AdSense, los vídeos o los formularios de terceros suelen inyectarse tarde, desplazando párrafos enteros si no has sido previsor. La solución práctica pasa por definir contenedores estáticos. Si sabes que tu anuncio ocupará 500 píxeles de alto, créale un espacio reservado de 510 píxeles. Herramientas como Ad Inserter te permiten fijar estas cajas vacías de antemano. Así, cuando el elemento dinámico termine de cargar, simplemente rellenará el hueco sin alterar la posición del resto del diseño.
Elimina los saltos provocados por fuentes web
El temido efecto FOIT o FOUT ocurre cuando el navegador oculta el texto o muestra una tipografía genérica hasta que consigue descargar tu fuente personalizada. Como cada familia tipográfica tiene sus propias proporciones, el cambio final reajusta las líneas de texto y dispara tu inestabilidad visual. Lo que mejor me ha funcionado para mitigar esto es optimizar la visualización mediante el intercambio progresivo. Esto consiste en mostrar la fuente del sistema primero y luego aplicar la tuya. Para rematar la faena, te recomiendo alojar las fuentes de Google localmente en tu propio servidor usando plugins como OMGF. Al servirlas desde tu propia máquina reduces tanto el tiempo de carga que el usuario apenas percibirá el baile de letras.
Preguntas frecuentes
¿Qué valor de CLS se considera correcto para Google?
Para ofrecer una buena experiencia de usuario y no ser penalizado, tu métrica de Cumulative Layout Shift debe ser igual o inferior a 0,1.
¿Cómo evito que los anuncios dinámicos muevan mi contenido?
Tienes que reservar el espacio exacto del anuncio antes de que se inyecte en la página. Puedes usar plugins que definan un contenedor con el alto y ancho específico para absorber la carga sin desplazar elementos.
¿Por qué las fuentes web empeoran la estabilidad visual?
Cuando una tipografía personalizada termina de cargar, reemplaza a la fuente del sistema y cambia el tamaño real que ocupan las palabras. Esto ajusta las líneas de texto y desplaza los elementos inferiores.