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 directo de posicionamiento, y la UX de la una web está estrechamente ligada a las Core Web Vitals, especialmente si hablamos de webs mastodonte como El Corte Inglés o MediaMarkt.
El CLS (Cumulative Layout Shift) es uno de los indicadores clave 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
Aquí te explico, paso a paso, un ejemplo sencillo de cómo implementar un skeleton para una tarjeta de producto.
Primero inserta este CSS en tu web, ya sea en tu hoja de estilos o en el head:
<style>
.skeleton-card {
width: 100%;
max-width: 300px;
padding: 1rem;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.skeleton-image,
.skeleton-title,
.skeleton-text {
background: linear-gradient(90deg, #eee, #ddd, #eee);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px;
}
.skeleton-image {
height: 180px;
margin-bottom: 1rem;
}
.skeleton-title {
height: 20px;
width: 80%;
margin-bottom: 0.5rem;
}
.skeleton-text {
height: 14px;
width: 100%;
margin-bottom: 0.3rem;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
</style>
Añade este HTML donde quieras mostrar el placeholder (por ejemplo, en una tarjeta de producto mientras esperas la carga real):
<div class="skeleton-card" id="placeholder-producto">
<div class="skeleton-image"></div>
<div class="skeleton-title"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text" style="width: 90%;"></div>
<div class="skeleton-text" style="width: 60%;"></div>
</div>
Ya tienes la implementación de tu carga esquelética en tu PDP. Puedes copiar y pegarlo directamente en tu archivo .html o insertarlo desde JavaScript mientras se recuperan datos con fetch() o AJAX.
Haz la prueba y verás que tu pantalla se mantiene en «loading» con una estética similar a esta:
Ver en acción en CodePen.
No, no es que se haya bugueado la carga si no que, efectivamente, esto es el skeleton screen.
Ahora la gran pregunta, ¿cómo sustituyo esta visual de carga por contenido real? He cogido como ejemplo para ilustrar esta respuesta una página de producto de MediaMarkt.
Aquí te muestro cómo sustituir el skeleton con contenido real usando JavaScript, simulando una carga de datos de 2 segundos:
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
const placeholder = document.getElementById('placeholder-producto');
placeholder.outerHTML = `
<div class="product-card">
<img src="https://media.cdn.es.mediamarkt.io/mms/media/PHILIPS/Depiladoras/Lumea/BRI945.jpg" alt="Depiladora Philips Lumea" style="width: 100%; height: 180px; object-fit: cover;">
<h2 style="font-size: 1rem; margin: 0.5rem 0;">Depiladora IPL Philips Lumea S8000</h2>
<p style="color: #444;">450.000 pulsos, 2 cabezales, sensor SmartSkin</p>
</div>
`;
}, 2000);
});
</script>
En un caso real, lo ideal sería hacer esta sustitución tras recuperar los datos con una llamada a tu API o esperar a que el CMS cargue el contenido
La estructura HTML y CSS que renderiza este esqueleto es esta:
| Elemento | ¿Qué representa? | ¿Por qué es útil? |
|---|---|---|
.skeleton-image | Imagen del producto | Evita que el layout cambie bruscamente al cargar una imagen |
.skeleton-title | Título simulado | Permite predecir la posición del texto real |
.skeleton-text | Líneas de texto de descripción | Representa párrafos u otros textos variables |
@keyframes shimmer | Animación de fondo «brillante» | Mejora la percepción de actividad y carga fluida |
Si no tienes un ecommerce ni una web pero te da curiosidad ver qué tal queda un skeleton screen como visual de carga web, te muestro también una forma simple de probarlo con la que ni siquiera necesitas un CMS:
- Abre un editor de texto (como VS Code, Notepad++ o incluso el bloc de notas de Windows).
- Copia todo el código anterior unido (HTML + CSS + JS) y pégalo en un archivo nuevo.
- Guarda el archivo como
alicia-eres-la-mejor.html - Ábrelo en cualquier navegador.
- Y ahí lo tienes.
¿En qué casos utilizar un Skeleton Screen?
Quizá una estructura skeleton no es lo que tu web necesita para mejor su rendimiento. 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.
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.
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.
Conclusión: ¿cuándo deberías usar skeleton screens?
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 rebotes.
- 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 pequeñas 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
- 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
- ChatGPT
