Siete de cada diez sitios que suspenden PageSpeed Insights se ralentizan por culpa del JavaScript de terceros. Scripts externos, analíticas, redes publicitarias, chats, fuentes tipográficas, banners de cookies bloquean el renderizado y retrasan segundos el First Contentful Paint. Y no puede desactivarlos: la analítica alimenta a marketing, el chat genera leads, sin un banner de cookies el sitio no pasa una auditoría.

Existe una solución: la carga diferida. El script se carga solo cuando el contenido principal ya se ha mostrado al usuario. El navegador no espera, las métricas de Core Web Vitals entran en zona verde y la funcionalidad del sitio no se resiente.

Hemos recopilado todos los métodos que funcionan, desde atributos HTML nativos hasta técnicas programáticas y plugins de WordPress. Con ejemplos de código que puede copiar y aplicar hoy mismo.

💡 Resumen rápido:

• Comprenda defer y async: la tabla muestra con claridad la diferencia entre atributos
• Domine la carga programática en el evento load: una versión moderna del método de Patrick Sexton
• Configure Intersection Observer para scripts bajo el pliegue: chats, mapas, comentarios
• Optimice WordPress sin tocar código: plugins Flying Scripts y Asset CleanUp

Cómo ralentizan la carga los scripts de terceros

El navegador analiza el HTML de arriba abajo. Cuando encuentra <script src="..."> sin atributos, el análisis se detiene: el navegador carga el script, lo ejecuta y solo después continúa analizando la página. Esto bloquea el renderizado.

Para el usuario, el resultado es una pantalla en blanco. La métrica First Contentful Paint (FCP), el tiempo hasta que se muestra el primer contenido, depende directamente de lo rápido que el navegador despache todos los scripts bloqueantes. El FCP forma parte de las Core Web Vitals y afecta directamente al posicionamiento en buscadores.

Los scripts de terceros golpean más fuerte que los propios: están alojados en servidores externos y usted no controla su velocidad de entrega ni su disponibilidad. Consulta DNS, handshake TCP, handshake TLS, descarga: cada etapa suma decenas o cientos de milisegundos. Según datos de HTTP Archive de 2024, la mediana de sitios en dispositivos móviles carga 21 scripts externos, y tres de ellos son bloqueantes.

La solución es dar al navegador una instrucción clara: «carga el script en segundo plano y ejecútalo más tarde». Justo para eso están diseñados los atributos defer y async.

Defer y async: dos mecanismos nativos

Ambos atributos se escriben en la etiqueta <script> y modifican el comportamiento de carga. De maneras fundamentalmente distintas.

Defer: ejecución diferida con garantía de orden

El atributo defer le dice al navegador: «carga el script en segundo plano, ejecútalo tras el análisis completo del HTML». Se preserva el orden de ejecución: los scripts se ejecutan exactamente en la secuencia indicada en el marcado.

1
<script src="https://example.com/analytics.js" defer></script>
2
<script src="https://example.com/chat-widget.js" defer></script>

La opción ideal para scripts que deben ejecutarse en un orden específico: librería, luego su plugin, luego la inicialización. defer garantiza que el DOM está listo en el momento de la ejecución. El evento DOMContentLoaded se dispara después de todos los scripts con defer.

Async: independencia total

async carga el script en paralelo al análisis y lo ejecuta inmediatamente después de cargar, sin esperar a otros. No se garantiza el orden: el script que el servidor entregue primero se ejecuta primero.

1
<script src="https://example.com/independent-widget.js" async></script>

Adecuado para scripts completamente independientes: contadores de visitas, botones de redes sociales, banners publicitarios. Si el script no depende del DOM ni de otros scripts, use async.

Matiz importante: un script con async puede ejecutarse antes de que el DOM esté construido. Si referencia elementos de la página que aún no existen, obtendrá null y un error en la consola. Verifíquelo siempre.

Carga programática en el evento load: el método de Patrick Sexton

¿Qué ocurre si el script no admite defer/async o usted no controla el marcado? Por ejemplo, el script se inserta mediante Google Tag Manager o está incrustado en el plugin de un tercero. El método programático viene al rescate.

La idea es simple: crear un elemento <script> mediante JavaScript y añadirlo al DOM solo después de que la página haya cargado por completo. El autor del enfoque, Patrick Sexton, describió la técnica por primera vez en varvy.com.

La versión moderna de este código:

1
function loadScriptOnPageLoad(src) {
2
  const script = document.createElement('script');
3
  script.src = src;
4
  script.async = false;
5
  document.body.appendChild(script);
6
}
7
 
8
window.addEventListener('load', () => {
9
  loadScriptOnPageLoad('/wp-content/plugins/chat/chat.js');
10
  loadScriptOnPageLoad('/wp-content/plugins/analytics/tracker.js');
11
});

Dos diferencias clave respecto al código de hace una década. Primera: escuchamos load, no DOMContentLoaded. El evento load ocurre más tarde, cuando todas las imágenes, estilos y fuentes están cargados. Un script diferido así garantiza no afectar al FCP ni al LCP. Segunda: nada de window.attachEvent. Este método solo era necesario para Internet Explorer 8 e inferiores, que ya no existen. El moderno addEventListener funciona en todos los navegadores actuales.

Tres situaciones donde el enfoque programático es insustituible

defer y async solo funcionan en etiquetas <script> escritas directamente en el HTML. El método programático le salva cuando:

• El script se inserta mediante Google Tag Manager u otro gestor de etiquetas, usted no ve el marcado.
• No puede editar la plantilla: es un plugin o tema de un tercero con una estructura rígida.
• Necesita carga condicional: por ejemplo, un script de formulario de contacto solo en las páginas que tienen un formulario.

Intersection Observer: carga bajo demanda

Para algunos scripts, incluso defer es demasiado pronto. Un widget de chat no se necesita hasta que el usuario se desplaza hasta el pie de página. Un mapa, hasta que llega al bloque de la dirección. Los comentarios, hasta que lee la sección de discusión.

La API Intersection Observer resuelve exactamente esta tarea: el script se carga solo cuando el elemento objetivo aparece en el viewport.

1
const chatTarget = document.getElementById('chat-container');
2
 
3
if (chatTarget) {
4
  const observer = new IntersectionObserver((entries) => {
5
    entries.forEach((entry) => {
6
      if (entry.isIntersecting) {
7
        const script = document.createElement('script');
8
        script.src = '/wp-content/plugins/chat/chat.js';
9
        document.body.appendChild(script);
10
        observer.unobserve(entry.target);
11
      }
12
    });
13
  }, { rootMargin: '200px' });
14
 
15
  observer.observe(chatTarget);
16
}

El parámetro rootMargin: '200px' carga el script 200 píxeles antes de que el elemento aparezca en pantalla, el usuario no percibe ninguna demora. Antes, los desarrolladores usaron durante años listeners de scroll con getBoundingClientRect(), pero estos se disparaban en cada píxel de desplazamiento y sobrecargaban el hilo principal.

Intersection Observer funciona de forma asíncrona y prácticamente no supone carga para el navegador. Es compatible con todos los navegadores modernos, incluido Safari desde la versión 12.1. IE11 no es compatible, pero su cuota a fecha de junio de 2026 se aproxima al error estadístico.

WordPress: carga diferida sin editar código

Si el sitio está en WordPress, puede implementar la carga diferida de tres maneras, de la más simple a la más flexible.

Plugins para carga diferida de scripts

Dos opciones que funcionan, probadas en miles de sitios.

Flying Scripts, un plugin gratuito de Gijo Varghese, más de 30 000 instalaciones activas, versión 1.2.4 (actualizado en mayo de 2026). Puede retrasar JavaScript hasta la primera interacción del usuario: movimiento del ratón, clic, desplazamiento, toque en móvil. Usted especifica palabras clave de la URL del script y el plugin retrasa su ejecución. Hay un tiempo de espera: si el usuario no interactúa con la página, los scripts se ejecutan después de un plazo definido. Máxima ganancia en métricas, pero el chat o el formulario de llamada deben excluirse del retraso, ya que se necesitan de inmediato.

WP Rocket, un plugin premium de caché con funcionalidad integrada de retraso en la carga de JavaScript. Añade defer o async a los scripts seleccionados a través de la interfaz de administración. Usted especifica la URL y el plugin cambia el atributo al renderizar la página. Adecuado para quienes ya usan WP Rocket para caché y no quieren multiplicar los plugins.

Gancho script_loader_tag en functions.php

Si no desea instalar un plugin adicional, WordPress permite filtrar la salida de la etiqueta <script> mediante el gancho script_loader_tag. El código siguiente añade defer a todos los scripts excepto jQuery y el panel de administración:

1
add_filter('script_loader_tag', function($tag, $handle) {
2
    if (is_admin()) {
3
        return $tag;
4
    }
5
    $skip = ['jquery', 'jquery-core', 'jquery-migrate'];
6
    if (in_array($handle, $skip, true)) {
7
        return $tag;
8
    }
9
    return str_replace(' src', ' defer src', $tag);
10
}, 10, 2);

Coloque el código en el archivo functions.php del tema hijo o mediante el plugin Code Snippets. Antes de aplicarlo, haga una copia de seguridad. defer en jQuery romperá cualquier código que llame a $() o jQuery() antes de DOMContentLoaded. Empiece con scripts individuales y revise la consola en busca de errores después de cada cambio.

Control total: Asset CleanUp

Asset CleanUp, un plugin gratuito (versión 1.4.0.4, actualizado en mayo de 2026) que muestra TODOS los scripts y estilos cargados en una página. Con indicación del tamaño y el origen. Puede desactivar un script específico en una página concreta, cambiar el atributo de carga a defer/async o descargar por completo un activo innecesario.

La principal ventaja frente a Flying Scripts: Asset CleanUp ofrece una imagen completa de cada página. Usted ve exactamente qué se está cargando y toma decisiones con precisión. La versión Pro añade carga condicional por tipo de pantalla y traslado de scripts entre HEAD y BODY. Funciona junto a cualquier plugin de caché: WP Rocket, W3 Total Cache, WP Fastest Cache.

Un análisis más profundo sobre la aceleración de WordPress está en un artículo aparte: 21 consejos para mejorar la puntuación en PageSpeed Insights. Si el problema no son solo los scripts, sino la velocidad general del hosting, consulte formas de reducir el tiempo de carga de páginas WordPress. Y las herramientas para comprobar el rendimiento de WordPress le ayudarán a medir el efecto real de la optimización.

Vídeo: async y defer en la práctica

Un análisis de cinco minutos del canal xplodivity, con diagramas visuales de carga y ejemplos de código en vivo:

⁉️🤔 Preguntas frecuentes

defer o async, ¿cuál elegir para Google Analytics?**

async. Analytics.js y gtag.js son completamente independientes del DOM, no necesitan un orden de ejecución. GA4 recomienda oficialmente async, la librería gestiona la inicialización diferida por sí misma.

¿En qué se diferencia el evento load de DOMContentLoaded?

DOMContentLoaded se dispara cuando el HTML está completamente analizado y el árbol DOM construido; los estilos y las imágenes pueden seguir cargándose. load ocurre más tarde: cuando absolutamente todo está cargado, incluyendo imágenes, fuentes y hojas de estilo. Para la carga diferida de scripts, load es más seguro: para ese momento la página ya se le ha mostrado al usuario con certeza.

¿Se puede añadir defer a un script en línea?

No. El atributo defer solo funciona para scripts externos con el atributo src. Un script en línea (<script>code</script>) con defer será ignorado, el navegador lo ejecutará como un script bloqueante normal. Para diferir código en línea, envuélvalo en un listener de DOMContentLoaded o load.

¿Es seguro poner defer en todos los scripts de un sitio WordPress?

jQuery con defer romperá cualquier código que llame a $() o jQuery() antes de DOMContentLoaded. Esa es exactamente la razón por la que jQuery se excluye del procesamiento en el fragmento anterior. Comience con scripts no críticos: chat, redes sociales, anuncios. Amplíe la lista gradualmente, revisando la consola en busca de errores tras cada cambio.

Intersection Observer o defer, ¿qué es mejor?

Resuelven tareas diferentes. defer es para scripts que siempre se necesitan en la página pero no son críticos para la primera renderización: analíticas, tests A/B. Intersection Observer es para scripts vinculados a un bloque específico: mapa, chat en el pie de página, widget de comentarios. Regla simple: script en la parte superior de la página, defer; script por debajo del pliegue, Intersection Observer.

¿Qué hacer si Flying Scripts rompió alguna funcionalidad?

Excluya el script problemático de la lista de diferimiento en los ajustes del plugin. Flying Scripts permite especificar palabras clave para la inclusión; elimine la palabra clave del script problemático y se cargará normalmente. Para elementos críticos como formularios y chats, este es un paso obligatorio antes de activar el diferimiento.

Qué poner en su sitio: matriz de decisión

La elección se reduce a una sencilla tabla de decisión:

• El script está escrito en HTML, usted controla las etiquetas, defer si depende del orden, async si es completamente independiente.
• El script se inserta mediante GTM o un plugin de terceros, las etiquetas son inaccesibles, carga programática en el evento load.
• El script está vinculado a un bloque por debajo del pliegue, Intersection Observer con rootMargin: '200px'.
• WordPress, lo necesita sin código, Flying Scripts (gratuito, más de 30.000 sitios) o Asset CleanUp para un control total de los recursos.

Comience por lo más simple: abra PageSpeed Insights, encuentre los scripts externos bloqueantes y añádales defer. Un solo atributo, y el FCP puede pasar de rojo a verde. Y cuando domine los atributos, consulte nuestra revisión de herramientas para comprobar el rendimiento en WordPress, le ayudará a medir el efecto real.