Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
Mover Scripts al footer

Cómo mover los scripts al footer en WordPress

En esta entrada vamos a ver cómo mover o cargar los archivos JS en el footer de WordPress.

Si miramos el código fuente de nuestro sitio es probable que veamos que dentro de la sección head tenemos algunos archivos JavaScript o JS cargados.

Si además estamos tratando de optimizar la velocidad de carga y rendimiento de nuestro sitio utilizando herramientas como Google PageSpeed Insights habremos visto un mensaje de este tipo: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

scripts footer

Cargar los archivos JS en el footer en lugar de en el head hará mejorar la velocidad del tiempo de carga y el rendimiento de nuestro sitio, mejorando el WPO y ofreciendo una mejor experiencia de usuario.

Para poder mover todo el JavaScript al footer de nuestro sitio es imprescindible que tanto nuestro tema como todos los plugins que usemos, carguen sus propios scripts utilizando la función de encolado wp_enqueue_script().

Esta función admite 5 parámetros (wp_enqueue_script($handle, $src, $deps, $ver, $in_footer);)

  • $handle, nombre del script. Debe ser único.
  • $src, URL o ruta del script.
  • $deps, array de dependencias de otros scripts.
  • $ver, versión del script.
  • $in_footer, valor booleano. Si es true se anclará a wp_footer y si es false a wp_head. Por defecto es false.

 

El primer paso por lo tanto será cargar nuestros scripts (si el tema es nuestro o tenemos algún plugin propio) de la siguiente manera:

Como puede observarse el último parámetro es true para que envíe mi JS al footer.

Vale… ¿ahora qué pasa si el tema o los plugins no son nuestros? Afortunadamente no es necesario hardcodear un tema o plugin para mover sus scripts al footer (Siempre y cuando cargue sus scripts con la función wp_enqueue_script()). Basta con añadir esta función al archivo functions.php

Antes he dicho que no es necesario hardcodear tu tema o plugin. Por lo tanto, si el tema no es desarrollado por ti, ésta función debería ir en el functions.php de tu child-theme o en tu plugin de utilidades.

En algún caso he visto que el archivo jQuery de WordPress seguía cargándose en el head. Para enviarlo al footer agrega estas dos funciones más:

Con estas funciones ya debería cargarse todo tu JS en el footer y habrás optimizado tu web mejorando la velocidad de carga, el rendimiento y la experiencia de usuario.

Puede que también te interese

Seguridad WordPress: cambiar el usuario y contraseña periódicamente
Seguridad WordPress: cambiar el usuario y contraseña periódicamente
Una de los axiomas en seguridad es tener un usuario y contraseña seguros. No obstante, se recomienda cambiar la contraseña periódicamente o cada cierto tiempo…
Cómo desactivar Emojis en WordPress
Cómo desactivar Emojis en WordPress
A partir de la versión 4.2 de WordPress se ha introducido una nueva característica: Emojis Icons. Permite el uso de los iconos Emoji en los…
Cómo eliminar campos personalizados o custom fields que ya no utilizas
Cómo eliminar campos personalizados o custom fields que ya no utilizas
Es algo muy habitual el uso de campos personalizados o custom fields para hacer desarrollos a medida sobre WordPress. También es muy habitual con el…
WordPress Hooks: Actions
WordPress Hooks: Actions
Si estás familiarizado con WordPress, probablemente hayas oído hablar de los hooks, pero… ¿qué son o para qué sirven? Los hooks de WordPress podrían definirse…




  • Anaislab

    Muchísimas gracias!

  • León Guerra

    Hola! Gracias por estas funciones, pero sugerencia, por favor añade una linea para Excluir esos js necesarios para plugins o el theme. Asi uno solamente mueve al Footer los js no tan importantes.

    • Hola León

      Gracias por la sugerencia. Efectivamente esto es simplemente un ejemplo genérico. Si alguien tiene alguna necesidad específica deberá adaptar el código a sus necesidades

      Saludos

      • León Guerra

        Gracias por responder tan rápido. Si puedes actualizalo ahora para probarlo y te aviso si funciono. Por lo demás, no habrá alguna manera simple de resolver el asunto de Optimizar el CSS? El plugin Speed Up – Optimize CSS Delivery by Simone Nigro lo hace pero, como no tiene una ventana de opciones para excluir x css, al activarlo le causa problemas al css general. O sea, carga el sitio durante 1 o 2 segundos sin estilo.

        • Como te decía anteriormente. Éste es sólo un ejemplo genérico. Cada proyecto es un mundo y cada cliente tiene necesidades diferentes

  • León Guerra

    wp_register_script( ‘jquery’, includes_url( ‘/js/jquery/jquery.js’ )

    No esta funcionando mover ese wp js en la nueva versión. Prueba a ver que pasa y actualiza el post si es necesario.

    • El código del post funciona correctamente. Comprueba que no esté chocando con algún plugin o el tema que estés utilizando

  • León Guerra

    Hola de nuevo Pablo Lopez, encontre una funcion que sirve para solucionar la peticion de PagaSpeed sobre la Optimizar la Entrega del CSS. Sin embargo: 1) Esta optimizacion no aumenta la velocidad del Sitio (segun el test en gtmetrix), 2) el codigo no me permite excluir algunos .Css por lo que te pido aqui que lo mejores para uno manualmente excluir algunos css o que la carga asincrona no desfigure el sitio totalmente durante ese 1 o 2 seg. de carga.

    // Optimize Css Delivery
    // Esta function php basada en: https://escss.blogspot.com/2015/04/carga–css-sin-bloqueo-

    pagina.html

    add_filter( ‘style_loader_tag’, function( $html = ”, $href = ”, $media = ” ) {
    return str_replace(
    “media=’all'”,
    “media=’none’ onload=”if(media!=’all’)media=’all'””,
    $html
    );
    });

    • Hola León

      Escribí un post sobre cómo optimizar la entrega de CSS: https://desarrollowp.com/blog/tutoriales/mejora-la-puntuacion-google-pagespeed-insights-eliminar-css-bloquea-la-visualizacion-del-contenido-la-mitad-superior-la-pagina/

      En él hablo de que por un lado no creo que sea bueno obsesionarse con el 100/100. Efectivamente como dices no repercute en el tiempo de carga, pero si en el modo que se va cargando la web. Aplazar la entrega de CSS sólo influye en la percepción que pueda tener el usuario.

      Con conexiones rápidas no lo vas a percibir. En una conexión lenta si que podrías ver que se “va pintando poco a poco la página”

      La solución pasa por poner en línea (y evitar la petición http) los estilos “necesarios” para construir lo que el usuario ve en el primer pantallazo, y el resto lo pones en un CSS y lo cargas al final de la página.

      Pero esta solución te obliga a trabajar más, en el sentido de que debes manejar unos estilos por un lado (en línea), y otros por otro (hoja css)

      • León Guerra

        Ciertamente Pablo!

      • León Guerra

        De todos modos, el jquery.js de Wp Includes está rebelde jeje no lo puedo poner en el footer. El código que entregas acá me produce un problemita en el sitio y pues, como es el único js que ralentiza… quizás lo deje así. Lo que si te pido de favor es, que ese // Optimize Css Delivery código que puse ahí lo mejores para poder excluir algunos .css

      • León Guerra

        Hola Pablo, como te va? Sabes algo de BuddyPress? Crees que si te paso un functions php puedas mejorarla un poco?

        • Hola León,

          No lo he utilizado nunca. Si tienes alguna duda al respecto te recomiendo los foros de soporte de la comunidad, hay un topic sobre BuddyPress: https://es.wordpress.org/support/

          • León Guerra

            Okey gracias, le tirare el ojo.