Google tiene a todo el mundo desesperado por optimizar sus sitios para cumplir las exigencias que pedirá desde la actualización programada para el mes de mayo de 2021. Si es tu caso, y eres de aquellos que testea cientos de veces su sitio en el Google Page Speed para analizarlo y optimizarlo, probablemente te has encontrado con uno de las advertencias más molestas de todas: eliminate render-blocking resources o elimina los recursos que bloqueen el renderizado.
Una de las razones más comunes para enfrentarte a este problema, es por culpa de JQuery, estos archivos vienen de base en WordPress. Si bien la empresa está trabajando para optimizar y mejorar el funcionamiento de jquery.js y/o jquery-migrate.min.js, por ahora no nos queda otra que encontrar opciones más rápidas de solucionarlo.
WordPress carga estos dos archivos dentro del <head> de tu sitio por defecto, en este caso te mostraré cómo puedes forzarlo a que sea cargado al pie de página (ya que eliminarlo sería una pésima idea) para optimizar el rendimiento de tu web y eliminar la advertencia en Google PageSpeed.
¿Por qué WordPress carga JQuery en el header de mi sitio?
La razón es bastante simple, el concepto de usar JQuery en el footer (o pié de página) empezó a hacerse más común hace pocos años, mucho después de que WordPress lo incluyera como base en su instalación.
Por lo mismo, hay cientos (si es que no miles) de plugins que usan JQuery como dependencia para agregarle funcionalidades extra al CMS más famoso del mundo.
Dichos plugins suelen esperar que estos archivos JS estén ubicados en la cabecera de tu sitio, esto porque si estos archivos base se cargaran posterior a los archivos JS de los temas o plugins podría causar errores JavaScript en tu sitio.
Por lo mismo, es muy importante que al hacer esto, revises si tus temas y plugins funcionan correctamente, hoy en día son muchos los temas y plugins (sobre todo los más conocidos) que evitan usar JQuery para funcionar o que te permiten cambiar sin problemas la ubicación del mismo al footer de tu sitio.
*Un punto importante: si no sabes cómo chequear tu tema o plugin depende del uso de JQuery en el header, te recomiendo contactar a los desarrolladores oficiales y preguntarles directamente.
Cómo mover JQuery al footer de WordPress
Si estás seguro de que no tendrás problema con el tema y plugins instalados en tu sitio, ya puedes proceder a mover JQuery al pié de página. Para hacerlo, la forma más sencilla es usar este pequeño snippet de código:
function mytheme_move_jquery_to_footer() {
wp_scripts()->add_data( 'jquery', 'group', 1 );
wp_scripts()->add_data( 'jquery-core', 'group', 1 );
wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'mytheme_move_jquery_to_footer' );Al igual que cualquier otro snippet, puedes insertarlo directamente en el archivo functions.php de tu tema hijo o, mucho más fácil, usar el famoso plugin Code Snippets para insertarlo sin dificultades técnicas. La ventaja de esta última opción es que podrás probar tu sitio una vez lo hayas hecho y, en caso de encontrarte con problemas, bastará con desactivar la instancia y ya está.
No olvides revisar mis otros Tutoriales de WordPress, para seguir optimizando o solucionando problemas que podrías encontrarte en tu web.
¿Dudas? Déjalas en los comentarios y estaré encantado de ayudarte.