Corregir los saltos de maquetación: las causas más frecuentes
Una maquetación que salta es el fallo que los visitantes más notan y que los desarrolladores menos ven, porque en un equipo rápido y con la caché llena no salta nada. Seis causas cubren casi todos los casos.
Lo esencial
- Seis causas cubren casi todos los casos: imágenes sin medidas, tipografías que cargan después, contenidos externos incrustados, avisos que aparecen más tarde, CSS que llega tarde y contenidos insertados de forma dinámica.
- El valor se mide con demasiada indulgencia en el propio equipo: conexión rápida, caché llena, otro tamaño de pantalla.
- La medida aislada más eficaz es dar a cada imagen y a cada elemento incrustado medidas fijas o una proporción.
- Una barra de aviso que aparece tras la carga y empuja el contenido hacia abajo es la segunda causa más frecuente, y la más fácil de corregir.
Las seis causas
1. Imágenes sin medidas
Sin width ni height, el navegador no sabe cuánto espacio reservar: el texto se desplaza en cuanto llega la imagen.
Corrección: poner ambos atributos y añadir height: auto en el CSS para conservar el escalado.
2. Tipografías que cargan después
El texto aparece primero en la tipografía de reserva y salta al cambiar, porque ambas ocupan un ancho distinto.
Corrección: precargar la tipografía, font-display: swap, y ajustar las métricas de la de reserva a las de la definitiva.
3. Contenidos externos incrustados
Vídeos, mapas y widgets de reseñas llegan sin altura conocida y empujan todo hacia abajo al aparecer.
Corrección: reservar un hueco con proporción fija donde se cargue el contenido.
4. Avisos que aparecen después
Un banner de consentimiento o una barra promocional que aparece arriba tras la carga y empuja toda la página hacia abajo.
Corrección: reservar el espacio desde el principio, o mostrarlo superpuesto en lugar de insertado.
5. CSS que llega tarde
Si la hoja de estilos surte efecto solo después del primer renderizado, la página se muestra una vez sin formato y luego con él.
Corrección: entregar pronto las reglas necesarias para la zona visible, completas y no a medias.
6. Contenidos insertados de forma dinámica
Un aviso, una lista o un bloque que JavaScript inserta tras la carga por encima del contenido existente.
Corrección: insertar por debajo de la zona visible o reservar el espacio.
¿Sabías que…?
La causa cinco es la más traicionera, porque en local casi nunca aparece: con una conexión rápida, la hoja de estilos llega antes del primer renderizado y no salta nada. Con una conexión lenta llega después, y toda la página se construye dos veces.
Entregar solo una parte del CSS por adelantado no basta: si falta una regla que afecta a la zona visible, salta justo ese elemento. O completo para la zona visible o nada; aquí las soluciones a medias son peores que ninguna.
Medir bien
| Vía de medición | Qué muestra | Trampa |
|---|---|---|
| Equipo propio, herramientas de desarrollo | pistas gruesas | demasiado rápido, caché llena |
| Prueba de laboratorio en una herramienta | un valor reproducible | una condición, no la realidad |
| Datos de campo de visitantes reales | lo que ocurre de verdad | requiere suficiente tráfico |
| Móvil con conexión limitada | la prueba aislada más honesta | hay que configurarla a conciencia |
Un caso que se queda grabado: una página tenía en local un valor impecable y en la herramienta de prueba uno muy malo. La causa era una hoja de estilos entregada parcialmente por adelantado: le faltaban tres reglas de bloques de la zona visible.
En local nunca llamó la atención, porque el archivo completo llegaba antes que el primer renderizado. Con la conexión limitada llegaba después, y tres bloques saltaban. La lección: con saltos de maquetación, la impresión local no es una contraprueba sino otro escenario, y por lo general el menos realista.
El orden de las correcciones
- Revisar todas las imágenes.
widthyheightpuestos,height: autoen el CSS. Suele ser la mitad del problema. - Encuadrar los contenidos externos incrustados. Un hueco con proporción fija.
- Revisar los avisos que se muestran. Superpuestos en lugar de insertados.
- Revisar la carga de tipografías. Precargar, ajustar la de reserva.
- Revisar la entrega del CSS. Completa para la zona visible.
- Volver a medir, con conexión limitada. Y hacerlo tras cada paso por separado, o no se sabrá qué ha surtido efecto.
Ayúdame a encontrar y corregir los saltos de maquetación en nuestra web. Datos: - Valor medido de desplazamiento de maquetación: [valor, herramienta, móvil o escritorio] - Elementos que se desplazan según la medición: [lista, si se conoce] - ¿Imágenes con atributos width/height? [sí / no / en parte] - ¿Cómo se entrega el CSS? [archivo externo / incrustado por adelantado / parcialmente por adelantado] - Contenidos externos incrustados: [vídeos, mapas, reseñas, chat] - ¿Aparece algo tras la carga? [banner, aviso, barra promocional] - ¿Cómo se cargan las tipografías? [indicación] Tareas: 1. Asigna cada elemento que se desplaza a una de las seis causas: imágenes sin medidas, tipografías que cargan después, contenidos externos incrustados, avisos que aparecen después, CSS que llega tarde, contenidos insertados de forma dinámica. 2. Nombra para cada causa la corrección concreta con un ejemplo de código. 3. Si el CSS solo se entrega en parte por adelantado: explica por qué eso puede ser peor que nada, y qué hay que revisar. 4. Dame un orden según efecto por unidad de esfuerzo. 5. Dime cómo debería medir tras cada paso para saber qué ha surtido efecto. No inventes valores de medición.
Conclusión
Seis causas, y la primera —imágenes sin medidas— suele suponer la mitad. Se corrige en media hora y surte efecto de inmediato.
La parte más difícil es medir: quien comprueba en local mide un escenario que casi ningún visitante vive. Medir con la conexión limitada, tras cada paso por separado; si no, se corrigen tres cosas y no se sabe cuál de ellas ha funcionado.
Preguntas frecuentes
¿Por qué salta el contenido al cargar una página?
Casi siempre por una de seis causas: imágenes sin medidas, tipografías que cargan después con otro ancho, contenidos externos incrustados sin altura conocida, barras de aviso que aparecen más tarde, CSS que surte efecto tarde, y contenidos insertados por JavaScript por encima de la zona visible.
¿Cuál es la medida aislada más eficaz?
Dar a cada imagen width y height y añadir height: auto en el CSS. El navegador reserva así el espacio correcto desde el principio y el escalado se conserva. En la práctica, esta medida suele suponer la mitad del problema.
¿Por qué el valor es mejor en local que en la herramienta de prueba?
Porque en el propio equipo la conexión es rápida y la caché está llena: hojas de estilo, tipografías e imágenes llegan antes del primer renderizado y no salta nada. En condiciones realistas llegan después; por eso hay que medir con la conexión limitada.
¿Puede perjudicar un CSS entregado en parte por adelantado?
Sí. Si en la parte entregada por adelantado falta una regla que afecta a un bloque de la zona visible, ese elemento salta en cuanto llega la hoja completa. O completo para la zona visible o nada; aquí las soluciones a medias son peores que ninguna.
¿Cómo se corrige un banner de consentimiento que hace saltar la página?
Mostrándolo superpuesto en lugar de insertado, es decir, por encima del contenido sin empujarlo hacia abajo. También se puede reservar el espacio desde el principio. Esta causa es de las más frecuentes y a la vez la más fácil de corregir.
Marketing que se configura solo
La beta del Studio Engine está abierta. Reserva tu plaza y participa desde el principio.
Unirse a la beta →