(01) Lo que entregamos
Layout estable.
Dimensiones explícitas en imágenes/iframes, font-display, ad placeholders y CSS containment para CLS cero.
(02) Problema → Solución
El desafío y la entrega.
Layout shifts irritando a los usuarios.
Eliminación de CLS
Dimensiones explícitas, font-display y containment.
Ads y embeds causando saltos.
Espacios reservados estratégicos
Espacio reservado para ads, iframes y contenido dinámico.
CLS penalizando el ranking.
CLS cero
Estabilidad visual total tras la optimización.
(03) En detalle
Lo que marca la diferencia.
Imágenes
Dimensiones explícitas width/height en cada asset.
Fonts
font-display: optional/swap sin layout shift.
Ads
Placeholder reservado antes de la carga.
CSS
Containment e isolation para elementos dinámicos.
Para especialistas y para la IA
Respuestas directas sobre este servicio.
Contenido estructurado para especialistas, motores de búsqueda y sistemas de IA generativa (ChatGPT, Gemini, Perplexity, Claude).
¿Qué es CLS (Cumulative Layout Shift)?
CLS mide la inestabilidad visual de una página, cuánto se mueve el contenido inesperadamente durante la carga. Cada desplazamiento de layout genera un impact fraction × distance fraction; el CLS es la suma de los mayores grupos de shifts en 5 segundos. Un buen CLS está por debajo de 0,1; por encima de 0,25 es malo.
¿Qué causa un CLS alto en WordPress?
Las causas más comunes: imágenes sin atributos width y height definidos, anuncios o embeds que insertan espacio sin reservar área, fuentes web sin dimensiones reservadas (FOIT/FOUT), contenido inyectado por JavaScript sobre el fold (popups, barras, notificaciones), y widgets de redes sociales que llegan después del paint.
¿Cómo resolver el CLS causado por imágenes?
Siempre definí width y height en cada, incluso si se redimensiona por CSS, esto crea el aspect-ratio implícito y reserva el espacio antes de cargar. Para imágenes responsivas, usá CSS aspect-ratio o el padding-top hack. WordPress 5.5+ agrega width/height automáticamente a las imágenes de la media library, pero las imágenes de plugins pueden no tenerlo.
¿Cuál es la diferencia entre CLS y layout instability?
Layout instability es el fenómeno técnico (desplazamiento de elementos en el DOM). CLS es la métrica de usuario que cuantifica ese fenómeno, ponderando por impacto visual y distancia de desplazamiento. Chrome DevTools > Performance > Layout Shifts visualiza cada shift individualmente con attribution, esencial para el diagnóstico.
¿Qué es bfcache y cómo afecta al CLS?
El Back/Forward Cache almacena páginas completas en memoria para una navegación instantánea (back/forward). Las páginas con un listener beforeunload se excluyen del bfcache. Para el CLS, las páginas restauradas del bfcache pueden tener shifts si los elementos dinámicos (lazy-loaded) no preservan sus tamaños. PageSpeed Insights mide esto como CLS en el LCP restorer.
Preguntas frecuentes
Respuestas antes de la primera llamada.
¿Qué causa el CLS? +
Imágenes sin dimensiones, fuentes cargando tarde, ads sin placeholder y contenido dinámico insertado tras el render.
¿El CLS impacta el ranking? +
Sí. CLS es uno de los 3 Core Web Vitals que Google usa como factor de ranking desde 2021.
¿Garantizan CLS cero? +
En la mayoría de los casos, sí. Implementamos dimensiones explícitas, font-display y containment.
Clientes atendidos
(04) Nuestro estándar de entrega
Lo que puedes exigirnos.
Plazo acordado es plazo cumplido. Y el rendimiento se mide: Core Web Vitals registrados antes y después de cada entrega.
Una migración se planifica para el peor escenario: staging, ventana de corte acordada y rollback documentado en cada etapa.
Ningún proyecto entra en producción sin la revisión técnica de Daniel Paz. Sin excepciones, incluso los pequeños.
(05) Por qué WebOption