Cómo añadir un preloader en WordPress: Guía paso a paso

Tabla de contenidos

Actualizado mayo 2026.

TL;DR: Una animación de preloader llena el hueco mientras se cargan los recursos pesados. En 2026, el plugin adecuado es WP Smart Preloader o un fragmento personalizado ligero — pero omítelo si tu sitio ya es rápido, porque un preloader mal ajustado perjudica activamente el LCP.

¿Deberías añadir un preloader en 2026?

Antes de explicar el proceso, déjame darte la respuesta honesta: la mayoría de los sitios no deberían añadir un preloader.

Las Core Web Vitals de Google miden el Largest Contentful Paint (LCP) — con qué rapidez aparece el contenido más visible. Un preloader literalmente retrasa ese renderizado cubriendo la pantalla con una animación. Si el preloader se ejecuta aunque sea 1,5 segundos, eso supone 1,5 segundos de penalización garantizada en el LCP en cada carga de página.

Cuándo tiene sentido un preloader:

• Tu sitio es genuinamente pesado — grandes vídeos hero, mapas interactivos, animaciones basadas en canvas — y el estado en blanco puro tiene mal aspecto sin uno.
• Tienes una barra de carga o indicador de progreso que ofrece retroalimentación real a los usuarios, no solo un spinner estético.

Cuándo omitirlo por completo:

• Tienes un blog típico, portafolio o tienda WooCommerce. Acelera el sitio en su lugar: carga diferida de imágenes, usa una CDN, cambia a un servidor más rápido.
• Tu LCP ya es inferior a 2,5 s. Añadir un preloader solo lo empeorará.

Si aun así quieres continuar, así se hace correctamente en la era Gutenberg / Full Site Editing.

¿Qué es un preloader?

Un preloader es un elemento de interfaz — habitualmente un spinner animado, barra de progreso o animación del logotipo de la marca — que se muestra mientras el navegador descarga y renderiza los recursos de la página. El texto y el HTML cargan rápido; las imágenes y el vídeo incrustado tardan más. El preloader llena ese hueco para que los usuarios vean algo en lugar de un diseño en blanco o parcialmente renderizado.

En WordPress antiguo (la era del editor clásico anterior a la versión 5.0), los preloaders se añadían habitualmente editando header.php directamente. En 2026, con Gutenberg y los temas FSE, editar los archivos del tema directamente está fuertemente desaconsejado — las actualizaciones del tema borran tus cambios. Usa un plugin o el método de Code Snippets.

Cómo añadir un preloader en WordPress (métodos para 2026)

Método 1 — Plugin WP Smart Preloader

WP Smart Preloader es un plugin gratuito en el repositorio de WordPress.org que funciona con temas clásicos y temas de bloques. Verifica que sigue siendo mantenido activamente y es compatible con tu versión actual de WordPress antes de instalarlo — el estado de mantenimiento de los plugins puede cambiar; comprueba la fecha «Última actualización» en su página del repositorio.

1. En tu panel de WordPress ve a Plugins → Añadir nuevo y busca «WP Smart Preloader».
2. Instálalo y actívalo.
3. Ve a Ajustes → WP Smart Preloader.
4. Elige un estilo de preloader entre las opciones integradas, o pega tu propio HTML/CSS personalizado.
5. En «Show only on Home Page» — actívalo si solo quieres la animación en la página de inicio. Ejecutar un preloader en cada página multiplica el coste en el LCP en todo tu sitio.
6. Establece la Duración de visualización del loader. El valor predeterminado es 1500 ms. Te recomiendo reducirlo — 800–1000 ms como máximo. Cuanto más tiempo se ejecute, peor será tu puntuación LCP.
7. Haz clic en Guardar cambios y prueba con PageSpeed Insights antes y después. Si el LCP sube, elimina el plugin.

Método 2 — Código personalizado mediante el plugin Code Snippets

Si quieres control total sin un plugin dedicado al preloader, usa el plugin Code Snippets (gratuito, ampliamente mantenido) para inyectar el marcado y los estilos sin tocar los archivos del tema.

Paso 1 — Añadir el fragmento HTML (PHP)

En Code Snippets, crea un nuevo fragmento configurado para ejecutarse solo en el «Front-end»:

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Nota: wp_body_open solo se activa en temas que llaman a wp_body_open() en su plantilla. La mayoría de los temas de bloques modernos y los temas clásicos mantenidos lo hacen. Si tu preloader no aparece, comprueba si tu tema admite este hook.

Paso 2 — Añadir el CSS

Crea un segundo fragmento configurado en «Front-end only → CSS»:

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

Paso 3 — Añadir el JavaScript de cierre

Crea un tercer fragmento configurado en «Front-end only → JavaScript»:

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

Esto elimina el preloader en el evento window.load — después de que las imágenes y los submarcos hayan cargado — en lugar de en DOMContentLoaded, que se activa demasiado pronto.

Método 3 — Tema de bloques / FSE: Usa un bloque de superposición de carga o un plugin

Si usas un tema de Full Site Editing (Twenty Twenty-Four, Kadence, GeneratePress en modo bloque, etc.), algunos plugins de maquetadores (Elementor, Kadence Blocks, Spectra) tienen opciones de preloader o pantalla de carga integradas en sus ajustes. Consulta primero la documentación de tu tema o maquetador — duplicar un preloader con un plugin adicional encima de uno ya integrado provocará una superposición doble.

Lista de comprobación de rendimiento antes de publicar

Antes de publicar un preloader, verifica todo lo siguiente:

1. Ejecuta una prueba de PageSpeed Insights en una página sin el preloader. Anota tu LCP.
2. Activa el preloader y ejecuta la misma prueba. Si el LCP empeora más de ~100 ms, reconsidera.
3. Mantén la duración del preloader en 1000 ms o menos. Cualquier cosa más larga es un pasivo de UX y posicionamiento.
4. Prueba con una conexión móvil 4G limitada (Chrome DevTools → Red → 4G rápido). Los preloaders se sienten mucho más largos en conexiones lentas.
5. Asegúrate de que el preloader está oculto para los lectores de pantalla (aria-hidden="true") y no atrapa el foco del teclado.

Preguntas frecuentes sobre preloaders en WordPress — 2026

¿Un preloader perjudica el SEO?

Sí, puede. Las Core Web Vitals de Google — específicamente el LCP — son una señal de posicionamiento confirmada. Un preloader que se sitúa delante de tu contenido retrasa el LCP. Para la mayoría de los sitios WordPress estándar lo omitiría por completo e invertiría el tiempo en la optimización de imágenes y el caché. Si tu sitio es lo suficientemente pesado como para necesitar uno genuinamente, mantén la duración corta y monitoriza las CWV en Google Search Console.

¿Los plugins de preloader funcionan con los temas de Full Site Editing (Gutenberg)?

La mayoría sí, siempre que el tema llame a wp_body_open(). El editor de bloques de WordPress en sí no cambia el funcionamiento de los eventos de carga de página en el navegador. Comprueba la versión «Probado hasta» del plugin en el repositorio de WordPress.org para confirmar la compatibilidad con tu versión de WordPress instalada — verifica esto en el momento de la instalación, ya que el estado de compatibilidad cambia.

¿Puedo añadir un preloader sin un plugin en 2026?

Sí — el método de Code Snippets descrito arriba es el enfoque más limpio sin plugin. Sobrevive a las actualizaciones del tema, es fácil de deshabilitar y te da control completo sobre el marcado y el tiempo. Evita editar header.php directamente en tu tema activo o hijo; añade deuda de mantenimiento y se rompe si cambias de tema.

Mi preloader aparece en todas las páginas. ¿Cómo lo limito solo a la página de inicio?

En WP Smart Preloader, activa «Show only on Home Page» en los ajustes. Para el método de código personalizado, envuelve la llamada add_action con una condicional:

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Lectura relacionada:

• Cómo acelerar tu sitio WordPress
• Mejores plugins de WordPress
• WordPress.com vs. WordPress.org

Esta guía es parte de alejandrorioja.com — escrita por Alejandro Rioja, que ahora construye sistemas de agentes de IA para fundadores. Incluyendo el agente que mantiene este sitio actualizado. Cómo funciona →

Actualizado para mayo 2026

Una breve nota de mayo de 2026: el flujo de trabajo que describe este artículo fue verificado con el estado actual de las herramientas y plataformas subyacentes. Donde herramientas, interfaces o funciones específicas han evolucionado, el consejo estructural sigue siendo válido — la implementación tendrá un aspecto ligeramente diferente en 2026. Si encuentras un paso que no coincide con lo que ves en pantalla, probablemente sea una actualización de la interfaz, no un cambio fundamental de enfoque. Déjame una nota a través del formulario de contacto y lo parchearé explícitamente.