Mover la carga de Javascript y CSS al footer en WordPress

[ 27 junio 2018 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

Uno de los temas de optimización recurrentes y recomendados por Google es retrasar o mover la carga de Javascript y CSS al footer o al final del sitio, en este artículo veremos cómo realizar esto de manera práctica.

Generalidades

En WordPress por defecto algunos themes y plugins cargan scripts y archivos CSS en el head del sitio, contrario a lo que recomienda Google que indica que sólo deben cargar los elementos CSS críticos al inicio y postergar la carga de javascript y CSS adicional al final.

Los elementos críticos CSS es el código que defina la estructura del sitio o los colores principales, estos elementos críticos deberían cargar como parte del código HTML. Aunque esta recomendación es poco común que se implemente en los themes.

En WordPress puedes agregar CSS como parte del HTML manualmente a través de la opción CSS en la personalización del theme.

Al revisar tu Web con Pages Speed Insights posiblemente se muestre un mensaje como:

1- Mover Javascript al footer

En un artículo anterior habíamos visto cómo insertar javascript a través de código, vimos que uno de los parámetros establecidos a true nos permite insertar el script al final, sin embargo, ¿que sucede con los scripts que ya tenemos cargados?, en este caso puedes usar el siguiente código al final del archivo functions.php de tu theme:


function footer_enqueue_scripts() {

	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);

}

add_action('after_setup_theme', 'footer_enqueue_scripts');

El código anterior mueve todos los archivos javascript al final, sin embargo realiza pruebas ya que en algunos casos es posible que algún archivo javascript, registrado usualmente por algún plugin, requiera cargar siempre en el header.

En caso quieras mover los archivos javascript individualmente, tendrías que buscar el código de registro, específicamente la función wp_enqueue_script() o wp_register_script() y cambiar el parámetro final a true.

2- Mover CSS al footer

En el caso de CSS, tal vez no te interese mucho mover el style.css del theme ya que este archivo tiene la estructura base del sitio, si mueves este archivo al final notarás que el sitio no cargará correctamente por unos instantes.

Sin embargo puedes evaluar mover otros archivos CSS que carga tu theme o plugins al final, por ejemplo si decides agregar Google Fonts o librerías adicionales que incluyen CSS


function dcms_styles_footer() {

	wp_enqueue_style('google_fonts', "https://fonts.googleapis.com/css?family=Montserrat:400,400i,700", array(), wp_get_theme()->get('Version') );
	wp_enqueue_style('fontawesome', "https://use.fontawesome.com/releases/v5.1.0/css/all.css", array(), '5.1.0');

};

add_action( 'get_footer', 'dcms_styles_footer' );

El código del ejemplo anterior serviría para cargar Google Fonts con la fuente Montserrat y la librería de iconos FontAwesome, además se han cargado estos archivos CSS desde un CDN para mayor optimización

Sin embargo si ya tienes estilos cargados por tu theme o por plugins, tendrías que hacer hacer modificaciones al código, por ejemplo moviendo la función wp_enqueue_style() que pone en cola el archivo CSS para que tenga efecto en el Hook get_footer

Conclusión

Hacer este tipo de optimizaciones de carga de archivos estáticos CSS y Javascript al final del sitio es una buena práctica y serás recompensado al usar Google Page Speed, sin embargo no te obsesiones con esto, habrá casos en los que posiblemente algún script o CSS no será posible moverlo.

¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores