Cómo aplazar JavaScript en WordPress para mejorar la velocidad de la página

Publicado por

En 15 de abril de 2025

Comentarios desactivados

Una de las principales razones por las que las páginas de WordPress tardan en cargar es el JavaScript que bloquea la renderización. Estos scripts retrasan la velocidad con la que el navegador muestra el contenido, especialmente en la parte superior de la página. Al retrasar la carga de JavaScript, puedes mejorar la velocidad de la página, la experiencia del usuario y el rendimiento en herramientas como PageSpeed Insights.

¿Qué es JavaScript que bloquea la representación?

Cuando un navegador encuentra un archivo JavaScript en el HTML <head>Pausa el renderizado para descargar, analizar y ejecutar el script. Esto retrasa la visibilidad de la página para el usuario.

Fuentes comunes de JS que bloquea la representación:

Scripts de temas y complementos (como controles deslizantes, ventanas emergentes y animaciones)
Scripts externos (Google Analytics, Facebook Pixel, etc.)

¿Cuál es la diferencia entre? `aplazar` y `asíncrono`?

asíncronoDescarga el script sin bloquear el análisis de HTML. Lo ejecuta inmediatamente después de la descarga; puede causar conflictos si el orden es importante.
aplazar:También se descarga sin bloqueos, pero retrasa la ejecución hasta que se completa el análisis del HTML: más seguro y mejor para scripts dependientes.

Cómo identificar JavaScript problemático

Utilice estas herramientas para ver qué scripts están bloqueando la representación:

Información sobre PageSpeed
Chrome DevTools → Pestaña Lighthouse
Chrome DevTools → Red → Filtrar por JS

Centrarse en la carga de archivos JS en el <head> y marcado como "bloqueo de renderizado".

Cómo aplazar JavaScript en WordPress

Opción 1: Agregar aplazamiento con código (sin complementos)

Añade este código al tema de tu hijo funciones.php Para aplicar aplazar a todos los scripts excepto jQuery:

función add_defer_attribute($tag, $handle) {
// Omitir jQuery
si ('jquery-core' === $handle || 'jquery' === $handle) {
devuelve $tag;
}
devolver str_replace(' src ', ' aplazar src', $tag);
}
add_filter('etiqueta_del_cargador_de_script', 'add_defer_attribute', 10, 2);

Opción 2: Usar Async

De manera similar a aplazar, puedes utilizar asíncrono En su lugar, simplemente cambie `defer` por `async` en el código anterior. Pero tenga cuidado: algunos scripts dependen del orden de carga y podrían fallar.

LEER Corrija el exceso de datos ocultos de WordPress y aumente la velocidad de su sitio

Uso de complementos (con precaución)

Si no desea tocar el código, estos complementos le permiten diferir o asincrónico JS:

**WP Rocket** – Interfaz sencilla, funciona bien, pero es de pago.
**Limpieza de activos**: le permite aplazar o deshabilitar manualmente scripts específicos.
**Scripts voladores**: livianos y enfocados en diferir JS después de un retraso.

⚠️ Pruebe siempre después de habilitar: posponer el script incorrecto puede dañar el diseño o la funcionalidad de su sitio.

Cómo probar el impacto

Utilice PageSpeed Insights o GTmetrix antes/después
Abra su sitio en una ventana de incógnito para detectar cualquier problema visible
Utilice DevTools → pestaña Red → verifique el orden y el tiempo de carga

Conclusión: Aplazar estratégicamente

Aplazar JavaScript es una de las técnicas más sencillas y potentes para acelerar tu sitio de WordPress. Empieza con scripts seguros, evita aplazar jQuery (a menos que lo inlinees) y realiza pruebas exhaustivas.

¿Quieres ir más allá? Solicite una auditoría de rendimiento gratuita de SpeedWP Pro y le ayudaremos a optimizar sus scripts y su estrategia de carga para obtener los máximos resultados.

Blog