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.
Ver comentarios (9)
No tengo el function.php pero si el Header.php y arriba de eso tiene una pestaña que dice Function. Creo yo seria ese no estoy seguro y no quiero descomponer el codigo. Se puede colocar al final?
Hola
Todos los themes tienen el archivo functions.php, debería ser ese archivo de otro modo dudo que funcione.
Tal vez sea un child-theme, revisa: https://decodecms.com/crear-un-child-theme-en-wordpress-de-manera-correcta/
Búscalo en tu cPanel, no lo encontrarás en Wordpress....
Gracias, para evitar cargar el CSS de Font Awesome por PHP como se hace?
Uso el child theme de generate press.
El archivo que carga es :
buenos dias, realizo el codigo que copias para pasar todos los javascript y funciona de maravilla.... lo malo que me rompe todo el sitio...
sabrias indicarme como hacer para colocarlo manualmente uno a uno los script y obviar los de los template de DIVI. agradezco tu respuesta
Hola, no puedo darte una respuesta exacta depende del theme y plugins que tengas. Evalúa hacerlo con un plugin, por ejemplo: https://pe.wordpress.org/plugins/autoptimize/ , te detecta los scripts y puedes ir probando cuales pueden ir en el footer.
y para que estos surtan efecto solo en unas paginas espesificas?
Hola, dentro de la función podrías hacer una comprobación con is_page() y usar el identificador de tu página, revisa: https://developer.wordpress.org/reference/functions/is_page/
Hola, Alguien lo ha hecho para Prestashop ? y cómo seria para prestashop