Mejorar el CLS (Cumulative Layout Shift) es fundamental para ofrecer una experiencia de usuario fluida y evitar saltos inesperados de contenido que son especialmente molestos en versión móvil.

En este artículo voy a explicarte qué es el skeleton screen y otras estrategias útiles para mejorar el CLS de tu web así que, si tus Core Web Vitals dan pena, quédate hasta el final.

¿Qué es un Skeleton Screen?

Un skeleton screen es una versión «fantasma» del contenido que se muestra mientras se carga el contenido real, creando una especie de marco anticipado del contenido que se está cargando.

En lugar de mostrar un loader tradicional (como un spinner o un icono de «cargando…»), se presenta una interfaz mínima que simula la forma, disposición y jerarquía del contenido real.

A nivel de SEO técnico, Google ha dejado muy claro que la experiencia de usuario es un factor clave de posicionamiento, y la UX se mide en gran parte a través de las Core Web Vitals.

Estos KPIs cobran especial importancia si hablamos de webs mastodonte como El Corte Inglés o MediaMarkt.

El CLS (Cumulative Layout Shift) es uno de los indicadores clave de Pagespeed Insight, y es aquí donde surge la idea de utilizar el skeleton screen como estrategia de optimización de UX y rendimiento web.

¿Cómo optimiza un Skeleton Screen el CLS de una web?

Así es como un skeleton screen puede ayudar a mejorar el rendimiento web.

Reserva el espacio visual del contenido real

Uno de los grandes causantes de un mal CLS es el «efecto empujón» que se produce cuando los elementos de la página cambian de posición repentinamente mientras se cargan recursos como imágenes, fuentes o bloques dinámicos.

El skeleton screen actúa como un placeholder estático: define de forma anticipada el tamaño y la posición de los elementos futuros. Así, cuando el contenido real se carga, no cambia la estructura del layout, evitando saltos molestos y puntuaciones negativas en CLS.

Evita movimientos bruscos causados por contenido dinámico

Muchas webs cargan parte del contenido mediante JavaScript (productos destacados, noticias recientes, comentarios, etc.). Si esos elementos no tienen reservado su espacio, se insertan de golpe en el layout y generan un desplazamiento.

Con un skeleton screen, esos espacios ya están visualmente ocupados desde el primer momento, y el contenido simplemente reemplaza al esqueleto de forma progresiva.

Mejora la percepción de velocidad y estabilidad

Aunque técnicamente el contenido tarde lo mismo en cargarse, el cerebro del usuario interpreta que la web es más rápida y confiable si hay una estructura visible desde el inicio.

Esta percepción de velocidad tiene un valor brutal en términos de experiencia de usuario, reduce el porcentaje de rebote y mejora las métricas de interacción.

Evita el uso de loaders que no informan al usuario

Los spinners o loaders animados suelen ser abstractos y no aportan contexto. El usuario no sabe si está cargando una imagen, un párrafo, una lista o un formulario.

El skeleton screen, en cambio, ofrece una vista previa de lo que vendrá, lo que mejora la comprensión, reduce la frustración y ayuda al usuario a orientarse en la página.

Ejemplo de Skeleton Screen

Ver en acción en CodePen.

No, no es que se haya bugueado la carga si no que, efectivamente, esto que ves es el skeleton screen.

La estructura HTML y CSS que renderiza este esqueleto es esta:

Ahora la gran pregunta, ¿cómo sustituyo el esqueleto por contenido real? Tienes 2 formas de hacerlo; una simple para curiosos y entornos de pruebas, y una más profesional para implementar en cualquier proyecto.

Ejemplo básico: simulación temporal

Esta es la opción más básica, útil cuando el contenido ya está incluido en el HTML pero se mantiene oculto inicialmente (con un display:none). No requiere conexión a un servidor ni la carga de datos externos.

Este método es perfecto para entornos de prueba, entradas de blog en WordPress o demostraciones rápidas, pero no es recomendable para entornos en producción o sitios con perspectivas de escalado, ya que simula una carga artificial mediante un temporizador fijo.

En este ejemplo se trata de insertar un script setTimeout que espera a que se cargue el DOM, mantiene visible el skeleton durante 2 segundos y luego lo reemplaza por el contenido definitivo.

Me ahorro ponerte aquí el script para que lo copypastes. Te recomiendo que lo pruebes en tu entorno de pruebas, con ayuda de ChatGPT, o bien busques a un desarrollador pro si tienes dudas si no tienes seguridad plena de cómo toquetear tu CMS.

Importante: en un sitio grande, lo ideal es mostrar el contenido justo en el momento en que los datos reales están disponibles. Usar un setTimeout puede dar una falsa sensación de rapidez, o incluso generar una pantalla vacía si los datos no están listos, pero hace el apaño cuando el contenido a mostrar no requiere de petición porque ya está en el HTML.

Ejemplo de carga dinámica con fetch

Si los datos de tu página no están escritos directamente en el HTML (por ejemplo, si se obtienen desde un servidor, CMS o archivo externo), puedes usar fetch para cargarlos dinámicamente.

fetch es una función nativa de JavaScript que permite realizar peticiones HTTP para obtener datos de otras fuentes (como archivos .html, .json o APIs).

Te doy un ejemplo simple de script que carga el contenido desde un archivo externo:

<script>
  window.addEventListener('DOMContentLoaded', () => {
    fetch('producto.html')
      .then(response => response.text())
      .then(data => {
        const placeholder = document.getElementById('placeholder-producto');
        placeholder.outerHTML = data;
      })
      .catch(error => {
        console.error('Error al cargar el contenido:', error);
      });
  });
</script>

Este script se ejecuta una vez que el contenido HTML de la página ha terminado de cargarse (DOMContentLoaded) y su función principal es reemplazar un bloque de contenido temporal (como un skeleton screen) por contenido real proveniente de un archivo externo llamado producto.html.

Utiliza fetch para llamar al contenido de ese archivo externo y, cuando la respuesta llega correctamente, se transforma en texto (en este caso, HTML), y luego se busca en el DOM un elemento con el identificador placeholder-producto; este elemento es sustituido completamente por el contenido recibido, utilizando outerHTML.

Si ocurre algún error durante la carga (por ejemplo, si el archivo no se encuentra o hay un problema de conexión), se captura y se muestra un mensaje en la consola con detalles del fallo.

Aunque este script es solo un ejemplo, la carga dinámica con fecth es realmente la opción recomendable en webs profesionales como tiendas online, blogs, directorios, páginas de servicios, etc. Puedes reutilizar esta lógica para cargar cualquier tipo de contenido externo de manera asincrónica.

¿En qué casos utilizar un Skeleton Screen?

Una estructura skeleton no es siempre lo que tu web necesita para mejorar su rendimiento o, al menos, no es la panacea.

Estos son los casos más comunes donde la mayoría de expertos recomiendan implementar este tipo de estructura fantasma.

Listados de productos en tiendas online

En páginas de categorías o resultados de búsqueda de productos, es habitual que el contenido se cargue a través de JavaScript desde una API.

Si no se reserva el espacio desde el inicio, los productos pueden aparecer de golpe, haciendo que el contenido se desplace. Esto genera un CLS elevado y una sensación de inestabilidad.

See the Pen Skeleton Screen with CSS by Razvan Caliman (@oslego) on CodePen.

El uso de skeletons en este contexto permite mostrar tarjetas vacías con la forma de los productos reales mientras se cargan los datos.

De esta forma, el usuario mantiene una referencia visual clara y no sufre interrupciones visuales.

Entradas de blog o artículos de noticias

En blogs o medios digitales, los artículos suelen venir acompañados de una miniatura, un titular y un resumen. Si estos datos no se cargan a la vez, el contenido puede saltar de forma inesperada.

Utilizar skeletons para representar los bloques de imagen y texto desde el principio ayuda a estabilizar el diseño, especialmente en móviles, donde cualquier desplazamiento es más notorio.

Este enfoque también mejora el tiempo de permanencia, ya que el visitante ve que hay contenido en camino y tiene menos probabilidades de abandonar la página.

Comentarios, reseñas y perfiles de usuario

Los módulos de valoración o comentarios suelen tardar en cargar porque dependen de scripts externos o procesos adicionales. Esto es especialmente común en webs que integran plataformas de terceros (como Trustpilot, Google Reviews o widgets sociales).

Con skeletons, se puede simular el avatar del usuario, su nombre y el texto del comentario, manteniendo la estructura visible desde el principio. Cuando se sustituyen por el contenido real, no se produce ningún cambio de tamaño ni reposicionamiento de elementos.

Galerías de imágenes o portafolios

Las imágenes de alta calidad tardan más en cargarse y, si se usan técnicas como lazy loading, pueden introducir saltos visuales importantes si no se define un alto fijo o se reserva espacio.

Los skeleton screens permiten mostrar marcos rectangulares o cuadrados con proporciones similares a las imágenes reales, lo que estabiliza la galería y mejora el flujo visual.

Este enfoque es muy recomendable en webs de fotografía, diseño gráfico o arquitectura, donde las imágenes son el contenido principal.

Navegación dinámica, filtros o menús AJAX

Muchos sitios modernos utilizan menús interactivos, pestañas con carga diferida o filtros que muestran contenido sin recargar la página completa.

Aunque esto mejora la experiencia general, puede provocar reorganizaciones del layout si no se gestiona correctamente la reserva de espacio.

El uso de skeletons en submenús, pestañas o listas de filtros garantiza que la página se mantenga estable mientras llegan los nuevos datos. Además, permite guiar al usuario visualmente durante el proceso de carga.

Aplicaciones de una sola página (SPA)

En Single Page Applications (React, Vue, Angular…), cada interacción cambia solo una parte de la vista, pero el contenido puede tardar en actualizarse.

En lugar de mostrar una sección vacía o hacer desaparecer lo anterior mientras se carga lo nuevo, los skeletons ocupan ese lugar de forma transitoria.

Esto proporciona una transición visual coherente, ayuda a reducir el CLS y mejora la experiencia general, incluso en entornos complejos como paneles de control o herramientas SaaS.

Widgets de terceros o APIs externas

Widgets como mapas interactivos, vídeos incrustados o feeds sociales no siempre se cargan al mismo ritmo que el resto del contenido, y pueden generar movimientos al insertarse en el DOM.

See the Pen Card UI Skeleton Screen by Max Böck (@mxbck) on CodePen.

Si no se reserva un espacio para ellos la experiencia de usuario puede ser de lo más incómoda.

Los skeletons permiten definir un marco de carga idéntico en tamaño al componente final. De este modo, el contenido externo aparece de forma controlada, sin afectar el resto de la maquetación.

Mejores prácticas al implementar Skeleton Screens

Si no implementas correctamente tu pantalla skeleton, la puedes liar gorda. Esta es la guía básica que debes seguir a la hora de colocar esta arquitectura fantasma en tu web:

• No uses skeletons para elementos críticos como el título principal (H1), que debe cargarse rápido y sin intermediarios si quieres que Google lo lea correctamente.
• Usa skeletons solo para contenido que tarda más de ~300ms en aparecer. Si es instantáneo, no hace falta.
• Asegúrate de que el contenido real se renderiza exactamente en el mismo lugar y tamaño que su esqueleto.
• Evita scripts innecesarios para crear skeletons. Puedes hacerlo solo con HTML y CSS para mantener una carga rápida.

¿Necesita tu web un skeleton screen?

Usa skeleton screens si…

• Cargas contenido de forma diferida o dinámica.
• El contenido que cargas tiene altura o anchura variable.
• Usas lazy loading, AJAX o SPAs.
• Quieres mejorar la percepción de velocidad y evitar altas tasas de rebote.
• Estás intentando mejorar tus métricas de CLS y UX real para SEO.

Otras estrategias para mejorar el CLS de una web

Aunque la pantalla esqueleto es una de las estrategias más usadas y recomendadas a la hora de optimizar el CLS de una web, aquí van algunas acciones que también puedes implementar si te preocupa esta métrica en el rendimiento de tu página.

Define tamaños fijos para imágenes y vídeos

Siempre especifica el atributo width y height en HTML o CSS. Si usas aspect-ratio, es ideal para mantener el espacio reservado.

<img src="ejemplo.jpg" width="600" height="400" alt="Ejemplo"/>

Evita inyecciones tardías de contenido dinámico

Si cargas anuncios, popups, banners o elementos con JS, asegúrate de reservar el espacio desde el principio.

Usa min-height o contenedores con altura fija para estos elementos.

Carga fuentes correctamente

Las fuentes web (Google Fonts, etc.) pueden causar «FOIT» (Flash of Invisible Text) o «FOUT» (Flash of Unstyled Text).

Usa font-display: swap; para evitar retrasos en el renderizado del texto.

@font-face {
  font-family: 'TuFuente';
  src: url('tufuentepersonalizada.woff2') format('woff2');
  font-display: swap;
}

Animaciones y efectos bien pensados

Las transiciones o elementos que aparecen al hacer scroll deben estar predefinidos en tamaño. Evita animaciones que cambien dimensiones sin reservar espacio.

Carga diferida pero con previsión

Lazy load está genial, pero siempre con espacio reservado. Usa contenedores con tamaños fijos o placeholders como skeletons.

Auditoría continua con Lighthouse o GTMetrix

Te da métricas claras y sugerencias prácticas sobre elementos que causan desplazamientos.

Fuentes y referencias

Este artículo no hubiera sido posible sin el conocimiento que comparten estas fuentes:

• Skeleton Screens 101 – NNgroup
• Cumulative Layout Shift (CLS) – Google Web Dev
• Improving CLS by optimizing ad delivery – Google Web Dev
• The most effective ways to improve Core Web Vitals – Google Web Dev
• Understand the critical path – Google Web Dev
• Evolving Cumulative Layout Shift in web tooling – Google Web Dev