• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mover la carga de Javascript y CSS al footer en WordPress

Mover la carga de Javascript y CSS al footer en WordPress

Carga de Javascript y CSS al footer en WordPress

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

css js optimización

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Google page speed mensaje optimización

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Mostrar elementos según día y hora en WordPressMostrar elementos según día y hora en WordPress
  • URL para agregar varios productos al carrito de WooCommerceURL para agregar varios productos al carrito de WooCommerce
  • Cambiar temporalmente la URL de WordPressCambiar temporalmente la URL de WordPress
  • Campos personalizados con ACF para contenido en WordPressCampos personalizados con ACF para contenido en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Humberto Moreno

    12 noviembre, 2018

    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?

    • Jhon Marreros Guzmán

      12 noviembre, 2018

      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/

  2. Isabel Fornés Gandía

    26 febrero, 2019

    Búscalo en tu cPanel, no lo encontrarás en WordPress….

  3. juan

    6 julio, 2019

    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 :

  4. alex

    23 abril, 2020

    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

    • Jhon Marreros Guzmán

      24 abril, 2020

      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.

  5. John Jairo

    28 abril, 2020

    y para que estos surtan efecto solo en unas paginas espesificas?

    • Jhon Marreros Guzmán

      28 abril, 2020

      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/

  6. Emmanuel

    27 octubre, 2020

    Hola, Alguien lo ha hecho para Prestashop ? y cómo seria para prestashop

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Archivo HTML como página de inicio en WordPress

Emojis en WordPress con Unicode

Mostrar el nombre del archivo que esta usando un tema sin usar plugins

Centrar Logo en Menú Principal

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados