Si alguna vez te has puesto a optimizar la forma en que Google ve tu web utilizando la herramienta Google PageSpeed Insights, es más que probable que una de las posibles mejoras que te ha marcado haya sido la de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

No falla, ¿eh? En el 95% de las webs que optimizo me indica esta mejora. Así que vamos a ver qué alternativas hay para «quitarnos de encima» este aviso y conseguir eliminar el JavaScript que bloquea la visualización en nuestro WordPress.

Eliminando el JavaScript que bloquea la visualización

Hasta ahora la cosa era (a veces) relativamente sencilla, ya que había un plugin (gratuito) que nos facilitaba bastante la tarea: Above the Fold Optimization.

Sin embargo esto ya no es así. En el momento de escribir esto la página del repositorio que albergaba el plugin muestra un Este plugin se cerró el 1 de abril, 2018 y ya no está disponible para descarga.

Así que arremángate porque nos vamos a ensuciar: toca tirar de código (aunque, si eres de los que tiene pánico a estas cosas, echa una ojeada al final de la entrada donde hablo de un plugin alternativo). Pero bueno, en realidad no es para tanto, es sólo una función muy sencilla que desregistra los scripts de la cabecera y los vuelve a registrar en el footer.

Esto, que en teoría es una solución sencilla y eficaz, en la práctica hace que ciertas cosas dejen de funcionar correctamente, en función de la plantilla y del uso que haga de JavaScript, normalmente de la librería jQuery. En principio, si los desarrolladores del theme hicieron todo como debe hacerse (registrando scripts con declaración de dependencias, y encolando) no debería pasar nada. Pero muchas veces pasa, la verdad.

Código para eliminar el JavaScript del header y llevarlo al footer

Al lío. El código es tan sencillo como lo siguiente:

add_action( 'wp_enqueue_scripts', function () {
  
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
 
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
});

Así de fácil y sin plugins. Eso hará que todos los scripts que estén encolados en la cabecera se vayan al footer, es decir, al final de la página, evitando así el eliminar el JavaScript que bloquea la visualización. Recuerda, antes de volver a hacer la prueba con PageSpeed, limpiar la caché.

¿No sabes dónde poner ese código? Bueno, pues ya hemos visto por aquí algunas alternativas en otras entradas. Revisa éstas, te serán de ayuda:

Autoptimize

La verdad es que Autoptimize es uno de esos plugins que hace (quizá) demasiadas cosas, y no todas como las queremos. Así que, si lo único que necesitas es eliminar el JavaScript que bloquea la visualización, mejor usa el código.