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

Cómo cambiar el título del meta box de la imagen destacada en WordPress
Cómo cambiar el título del meta box de la imagen destacada en WordPress
En algunas ocasiones puede resultar de utilidad cambiar o renombrar el texto o título que aparece en el meta box de Imagen destacada. Por ejemplo…
Lazy load en WordPress para mejorar la velocidad de carga de tu web
Lazy load en WordPress para mejorar la velocidad de carga de tu web
Lazy load, carga diferida o carga perezosa es una técnica que consiste en retrasar la carga de ciertos tipos de contenido como imágenes, vídeos y frames.…
Principios SOLID de la programación orientada a objetos
Principios SOLID de la programación orientada a objetos
SOLID es un acrónimo acuñado por Robert C.Martin para definir los cinco principios básicos de la programación orientada a objetos: Single responsibility, Open-closed, Liskov substitution,…
Creando un plugin para WordPress parte 3: Escribiendo el plugin
Creando un plugin para WordPress parte 3: Escribiendo el plugin
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…