¿Qué es JavaScript diferido en WordPress?

JavaScript diferido es una técnica que permite que determinados scripts se ejecuten después de que el navegador haya procesado el contenido principal de una página.

En WordPress, puede utilizarse para evitar que archivos JavaScript que no se necesitan inmediatamente retrasen la aparición del contenido.

La idea no es eliminar JavaScript, sino permitir que el navegador avance con la página antes de ejecutar determinados scripts.

¿Cómo funciona JavaScript diferido?

Cuando el navegador procesa una página, encuentra archivos JavaScript que pueden provenir de WordPress, el tema, los plugins o servicios externos.

Algunos scripts son necesarios desde el comienzo. Otros controlan funciones que pueden utilizarse más tarde y no necesitan ejecutarse inmediatamente.

Al diferir estos scripts, el navegador puede continuar procesando el contenido mientras descarga los archivos JavaScript y ejecutarlos posteriormente.

Por ejemplo, si una función ubicada al final de una página necesita JavaScript, puede no ser necesario ejecutar ese código antes de mostrar el título, las imágenes y el contenido inicial.

¿Qué JavaScript se puede diferir?

No existe una lista de scripts que siempre puedan diferirse. Depende de cómo funciona cada sitio y de las relaciones entre sus archivos JavaScript.

Algunos scripts pueden controlar:

• formularios;
• menús;
• sliders;
• ventanas emergentes;
• galerías;
• analítica;
• chats;
• funciones de WooCommerce.

Que una función aparezca más abajo en la página tampoco significa automáticamente que su JavaScript pueda retrasarse. Un script puede depender de otro o ser necesario para que funcionen diferentes elementos del sitio.

Por esta razón, es importante comprobar el funcionamiento de la página después de cambiar el momento en que se ejecutan los scripts.

¿Cómo se configura JavaScript diferido en WordPress?

La forma en que se cargan los scripts depende de WordPress, el tema, los plugins y el código utilizado en el sitio.

Algunos plugins de optimización permiten diferir determinados archivos JavaScript o excluir de esta configuración aquellos que necesitan ejecutarse antes.

También es posible configurar este comportamiento mediante código.

No es recomendable diferir todos los scripts sin comprobar primero qué función cumple cada uno. Una configuración incorrecta puede mejorar una prueba de rendimiento y, al mismo tiemp

JavaScript diferido y recursos que bloquean el renderizado

Algunos archivos JavaScript pueden formar parte de los recursos que bloquean el renderizado.

Esto ocurre cuando el navegador necesita procesar un script antes de poder continuar mostrando la página.

Diferir determinados scripts permite que el navegador avance con el contenido antes de ejecutarlos, reduciendo así su impacto sobre la visualización inicial.

Sin embargo, no todo el JavaScript bloquea el renderizado ni todos los scripts deberían diferirse.

¿JavaScript diferido elimina JavaScript no utilizado?

No. Son dos formas diferentes de optimizar JavaScript.

El JavaScript diferido retrasa la ejecución de un script que la página necesita, pero que no tiene que utilizarse desde el comienzo.

El JavaScript no utilizado es código que se carga aunque esa página no lo necesite.

Por ejemplo, si un plugin carga un script en todas las páginas, pero solo se utiliza en el formulario de contacto, diferirlo en las demás páginas únicamente cambia cuándo se ejecuta. El archivo sigue cargándose aunque no sea necesario.

En ese caso, sería mejor evitar que el script se cargue en las páginas donde no se utiliza.

¿Qué problemas puede causar JavaScript diferido?

Diferir un script que se necesita desde el comienzo puede afectar funciones como menús, formularios, botones o procesos de compra.

También pueden aparecer errores cuando un script depende de otro que todavía no se ha ejecutado.

Por esta razón, después de diferir JavaScript, es importante comprobar que las principales funciones del sitio sigan funcionando correctamente.

JavaScript diferido y rendimiento de WordPress

Diferir determinados scripts puede ayudar a que el navegador muestre antes el contenido inicial de una página.

Sin embargo, esta técnica no reduce el tamaño de los archivos ni evita que WordPress cargue JavaScript innecesario. Su función es cambiar el momento en que se ejecutan determinados scripts.

Si una página carga demasiado JavaScript, también puede ser necesario revisar el JavaScript no utilizado o aplicar técnicas como la minificación.

JavaScript diferido es una de las técnicas que pueden utilizarse dentro de la  optimización del rendimiento de WordPress.

Términos relacionados

• Recursos que bloquean el renderizado
• JavaScript no utilizado
• Minificación
• INP

Preguntas frecuentes sobre JavaScript diferido en WordPress

¿WordPress difiere JavaScript automáticamente?

La forma en que WordPress carga JavaScript depende del propio sistema, el tema, los plugins y las configuraciones utilizadas. Los plugins de optimización pueden modificar este comportamiento para diferir determinados scripts.

¿Se puede diferir todo el JavaScript de WordPress?

No. Algunos scripts necesitan ejecutarse antes que otros para que determinadas funciones del sitio estén disponibles y funcionen correctamente.

Diferir todos los archivos sin comprobar sus dependencias puede causar errores.

¿Diferir JavaScript hace que el archivo pese menos?

No. Diferir JavaScript cambia el momento en que se ejecuta un script, pero no reduce el tamaño del archivo.

La minificación cumple otra función: reduce el tamaño del archivo eliminando caracteres innecesarios.

¿JavaScript diferido puede afectar WooCommerce?

Sí. Algunos scripts de WooCommerce intervienen en funciones como el carrito, las variaciones de productos, los filtros o el proceso de compra.

Si estos archivos se retrasan de forma incorrecta, algunas funciones pueden dejar de responder como deberían.