Mover la carga de Javascript y CSS al footer en WordPress

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

css js optimización

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.

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.

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

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

Valora este artículo : (2 votos, promedio: 5,00 de 5)

Cargando…