Como diferir scripts al footer y evitar bloqueo de renderizado en WordPress

Contents

Introducción

Uno de los problemas más habituales que afectan al rendimiento de sitios WordPress es el bloqueo del renderizado por scripts (render‑blocking JavaScript). Cuando el navegador encuentra etiquetas ltscriptgt en el head sin atributos como defer o async, detiene el parseo del HTML hasta descargar y ejecutar esos scripts, lo que retrasa la primera pintura útil de la página. En WordPress, temas y plugins suelen encolar scripts automáticamente, y muchos los colocan en el head por defecto.

Objetivo de este tutorial

Explicar, con código práctico, cómo diferir scripts al footer y añadir atributos defer o async de forma segura en WordPress, sin romper dependencias ni funcionalidades. Incluye técnicas para scripts propios y para scripts inyectados por terceros, recomendaciones operativas y una lista de comprobación final.

Por qué y cuándo diferir scripts

  • Mejora de la primera carga: mover scripts al footer o marcar como defer permite al navegador construir el DOM y pintar la UI antes de ejecutar scripts.
  • Dependencias: algunos scripts (por ejemplo jQuery) pueden ser requeridos por inline scripts en el head, por lo que hay que tratarlos con cuidado.
  • Compatibilidad: document.write y otros patrones antiguos impiden defer/async.

Diagnóstico

Usa Lighthouse, PageSpeed Insights o WebPageTest para identificar scripts que bloquean el renderizado. Revisa las etiquetas ltscriptgt en el código fuente y controla cuáles vienen del tema, plugins o CDN externos.

Estrategias principales

  1. Encolar scripts en el footer usando wp_enqueue_script con el parámetro in_footer = true.
  2. Añadir atributo defer o async a scripts que sean compatibles, mediante el filtro script_loader_tag.
  3. Recolocar o volver a encolar scripts registrados por plugins (wp_dequeue_script wp_enqueue_script).
  4. Cargar scripts de terceros de forma asíncrona mediante inserción dinámica con JavaScript.
  5. Usar preload/preconnect para recursos críticos y reducir latencia.
  6. Probar y validar (Lighthouse, verificar dependencias, pruebas funcionales).

1) Mover scripts al footer: wp_enqueue_script

Siempre que puedas, registra o encola scripts con in_footer = true. Así WordPress imprime la etiqueta al final, reduciendo bloqueo inicial.

Ejemplo: en functions.php, encolar tu script propio en el footer:

Re-encolar scripts de plugins o del tema que están en head

Si un plugin inyecta un script en el head, puedes descargarlo (dequeue) y volver a encolarlo en el footer. Hazlo con precaución y prueba funcionalidad.

2) Añadir defer o async de forma selectiva

El filtro script_loader_tag permite modificar la etiqueta ltscriptgt antes de imprimirse. Añade defer (recomendado para la mayoría de scripts que no necesitan ejecutarse inmediatamente) o async para scripts independientes.

Ejemplo: añadir defer solo a ciertos handles:

Para añadir async sustituye defer por async o combina según necesidad. Ten cuidado: async puede provocar ejecución fuera de orden y romper dependencias.

Evitar romper jQuery y scripts que esperan ejecución sincronizada

No añadas defer/async a jQuery si existen inline scripts en el head que dependen de él. Si decides mover jQuery al footer, asegúrate que no haya inline scripts ejecutándose antes en el head.

Advertencia: esto puede romper plugins o scripts inyectados en head. Preferible es ajustar solo scripts propios y coordinar con plugins.

3) Añadir atributos adicionales (integrity, crossorigin)

Puedes usar el mismo filtro para añadir otros atributos como crossorigin o integrity:

 sha384-xxxx,
        mi-script-principal => sha384-yyyy,
    )

    if ( isset( integrity_map[ handle ] ) ) {
        // Añadir integrity y crossorigin
        integrity = integrity_map[ handle ]
        tag = str_replace(