css js to footer

Cómo mover JS y CSS al footer en WordPress sin usar plugins

Vamos a ver con un ejemplo, cómo podemos cargar en footer de WordPress, nuestros archivos CSS u Hojas de Estilo, o nuestros archivos JS o scripts de Javascript.

Descripción

Cargar las hojas de estilos o archivos CSS y los scripts o archivos JS, en el footer de nuestro theme, lo que nos facilita son solo ventajas. Entre ellas, está de darle una óptima experiencia al usuario o visitante que viene a nuestra página web, debido a que estos archivos que se tienen que cargar en nuestra web, a veces son demasiado pesados. Algunos ocupan hasta 1 mega, sí, ¡1 pedazo de mega!. Y dirás, “buá, ¿en serio, me estás diciendo que por un simple mega…). Si 1 mega es como si yo aplastara una hormiguita en el campo. Mi conexión va a 200 megas de velocidad de descarga”. El problema está, en que no eres tú el que decide si una web tiene buena experiencia de usuario para los demás, sino tu amiguito el robocito de Google, Bing, etc. que escanea tu página. Como note que tarde algo en cargar, te marcará en su lista de “páginas no guays como experiencia para el usuario“.

Por tanto al grano!.

¿Qué implica que una página cargue lenta cuando accedes a ella por primera vez, de un listado de un buscador donde había otras iguales?

Pues que si tarda, me piro a ver la otra página.

Así de simple.

Pues para esto es este ejemplo, para que lo gordo lo cargue al final, y mientras tanto, el usuario se ponga a ver las fotos o cosas chulas de nuestra página.

Ejemplos de archivos

Como ejemplos de archivos podemos tener estos:

CSS

  • style_de_tu_theme.css (no es recomendable poner en el footer la hoja de estilos de tu theme wordpress)
  • style_personal.css
  • font-awesome.css
  • otra-font.css

JS

  • tu-archivo-js-custom.js

Código

Estas funciones, las tendríamos que añadir, en el archivo functions.php que traiga nuestro theme de WordPress, al final del todo.

Función para remover estilos CSS del HEAD

Esta función, es por si un plugin o tu mismo theme, ya te ha cargado una hoja de estilos determinada, y por tanto, si la quieres enviar al footer, la tienes que remover previamente.

function remover_css() {
//Entre paréntesis escribiremos entre comillas,
//el ID de la hoja de estilos, sin el "-css" del final si lo tiene.
wp_dequeue_style('tu-estilo-id');
wp_deregister_style('tu-estilo-id');

}
add_action( 'wp_enqueue_scripts', 'remover_css', 9999 );
add_action( 'wp_head', 'remover_css', 9999 );

Función para remover scripts JS del HEAD

Esta función, es por si un plugin o tu mismo theme, ya te ha cargado un script de javascript determinado, y por tanto, si lo quieres enviar al footer, lo tienes que remover previamente.

function remover_js() {
//Entre paréntesis escribiremos entre comillas,
//el ID del script de javascript, o en caso de que no tenga id, como ocurre con muchos plugins,
//suele ser el nombre del plugin.
wp_dequeue_script('tu-script-id');
wp_deregister_script('tu-script-id');

}
add_action( 'wp_enqueue_scripts', 'remover_js', 9999 );
add_action( 'wp_head', 'remover_js', 9999 );

Función para cargar estilos CSS en FOOTER

La función para cargar los estilos CSS sería esta:

function cargar_footer_styles() {

wp_enqueue_style( 'tu-estilo-id', get_template_directory_uri() . '/css/style.css' );

};
add_action( 'get_footer', 'cargar_footer_styles' );

Función para cargar scripts JS en FOOTER

La función para cargar los archivos JS de javascript sería esta:

function cargar_footer_scripts() {

wp_enqueue_script( 'tu-archivo-js', get_template_directory_uri() . '/js/archivo.js' );

};
add_action( 'get_footer', 'cargar_footer_scripts' );

¿TE HA GUSTADO ESTE TUTORIAL?
[ Valoración: 0 - Votos: ‎0 ]
  • Jorge Santos

    Buen ejemplo.
    Lo probé y parace que mi wordpress carga un poco más rápido.

    • Javier Crego

      Me alegro Jorge.

      Saludos.

  • Antonio

    Hola Javier, soy bastante profano en este tema, pero en orden a optimizar mi modesto sitio web estoy siguiendo tus consejos y ahora he topado con este punto. Voy al grano: Google Page Speed me indica que tengo 9 recursos JS (algunos jQuery) bloqueando la visualización de contenido y 4 recursos CSS para optimizar (uno de estos es efectivamente la hoja de estilos del tema, los otros corresponden a otros tantos plugins). ¿Puedo utilizar estas funciones que mencionas para enviar en bloque todos los recursos problemáticos al footer? Un cordial saludo.

    • Javier Crego

      Hola Antonio!

      Échale un nuevo vistazo al artículo, que lo acabo de editar con un nuevo apartado para remover previamente los CSS y JS que ya estén cargados, y los carguemos luego en el footer.
      Como verás en el artículo, le puse que el style principal del theme no es muy recomendable, y algunos JS tampoco, ya que si no se cargan en el HEAD, puede que den problemas. Todo dependerá del theme en cuestión, o del plugin. Lo que puedes hacer, es ir probando a ver. Si ves que se te desconfigura la web, o no sale o funciona algo bien, vuelve a ponerlo en el HEAD como venía por defecto.

      • Antonio

        Gracias, he visto la función remover que has añadido, ¿pero cómo averiguo el Id del script etc en caso de que lo tenga? y luego ¿puedo incluir todos los archivos JS o CSS que quiera trasladar dentro de la sintaxis de la misma función, separados por comas por ejemplo?

        • Javier Crego

          El id de las hojas de estilo, lo puedes averiguar por ejemplo si haces clic con botón derecho en tu página, y le das a la opción:

          “Ver código fuente de página”

          y luego buscas dicha hoja de estilos dentro de las etiquetas …

          (NOTA: recuerda que el ID es el nombre que tenga puesto sin el -css)

          Para los ids de los scripts de javascript, ya es más complicado, ya que algunos sí sale el id, y otros no. Y ya te tocaría buscar el nombre de ese script, en el código donde realmente lo están cargando (código del plugin, theme, etc). Como puse en el ejemplo, para los plugins normalmente el nombre de esos scripts, suele ser el propio nombre del plugin, pero claro todo eso depende del cómo lo hayan programado. Para asegurarte, pues tendrías que buscarlo en el código de ese plugin o theme, como te digo.

          En cuanto a incluir todos los archivos, sí puedes hacer esto:

          function cargar_footer_styles() {

          wp_enqueue_style( 'id-estilo1', get_template_directory_uri() . '/css/style1.css' );
          wp_enqueue_style( 'id-estilo2', get_template_directory_uri() . '/css/style2.css' );
          wp_enqueue_style( 'id-estilo3', get_template_directory_uri() . '/css/style3.css' );

          };
          add_action( 'get_footer', 'cargar_footer_styles' );

          Y el mismo caso, para las demás funciones de remover_css(), remover_js() y cargar_footer_scripts().

          • Antonio

            He insertado las funciones para CSS al final del functions.php del tema (antes de la etiqueta de cierre php) pero no obtengo resultados. Este es el código que uso (adaptado del tuyo), suponte que tengo tres hojas de estilo:

            function remover_css() {

            wp_dequeue_style (‘estilo1’);

            wp_dequeue_style (‘estilo2’);

            wp_dequeue_style (‘estilo3’);

            wp_deregister_style (‘estilo1’);

            wp_deregister_style (‘estilo2’);

            wp_dequeue_style (‘estilo3’);

            }

            add_action(
            ‘wp_enqueue_scripts’, ‘remover_css’, 9999 );

            add_action(
            ‘wp_head’, ‘remover_css’, 9999 );

            function cargar_footer_styles()
            {

            wp_enqueue_style (‘estilo1′, get_template_directory_uri() . /css/style1.css’ );

            wp_enqueue_style (‘estilo2’, get_template_directory_uri() . ‘/css/style2.css’ );

            wp_enqueue_style (‘estilo3’, get_template_directory_uri() . ‘/css/style3.css’ );

            };

            add_action( ‘get_footer’, ‘cargar_footer_styles’ );

            No trabaja, ¿puedes decirme dónde está el error?

          • Javier Crego

            En el último wp_deregister_style (‘estilo3’) tienes puesto wp_dequeue_style

            Aún así debería de trabajar, si realmente le estás poniendo el ID que tiene esa hoja de estilos.

            PD: Si usas plugin de caché, prueba a vaciar caché.

          • Antonio

            Gracias, Javier, los dos errores que has señalado son fallos míos de transcripción. He contado además con el vaciado de caché, pero nada. Una de las hojas de estilo corresponde al plugin Theme my login y se identifica su id en el código fuente como

            id=’theme-my-login-css’
            por lo que yo transcribo en las funciones ‘theme-my-login’ como id

            ¿es correcto?

          • Javier Crego

            Sí así te debería de funcionar.
            Pero ahora que me dices que estás intentando hacerlo con la hoja de estilos de un plugin, no tienes bien puesto el código anterior. Para un plugin tendrías que hacerlo así:


            function remover_css() {

            wp_dequeue_style('theme-my-login');
            wp_deregister_style('theme-my-login');

            }
            add_action( 'wp_enqueue_scripts', 'remover_css', 9999 );
            add_action( 'wp_head', 'remover_css', 9999 );

            function cargar_footer_styles() {

            wp_enqueue_style( 'theme-my-login', plugins_url() . '/theme-my-login/theme-my-login.css' );

            }
            add_action( 'get_footer', 'cargar_footer_styles' );

            De todas formas, ten cuidado con lo que mueves al footer de los plugins, ya que puede que necesiten cargarlo en el HEAD y no te funcione bien luego dicho plugin. Tendrás que hacer bastantes pruebas después a ver si te funciona (y sin caché activado por si acaso).

          • Antonio

            Javier, ¿hay otro modo de hacer esto sin tocar el código? Tengo entendido que hay algunos plugin que hacen esta función. ¿Son efectivos?

          • Javier Crego

            Claro que lo hay, mediante plugins como bien dices.
            De los plugins que he visto, algunos no funcionan bien, pero uno de los que yo suelo usar y que funciona bien es este:

            https://es.wordpress.org/plugins/wp-script-optimizer/

            Aunque está algo verde aún, en temas de si andas instalando nuevos plugins que te toca regenerar la lista, y en que te mete todo tipo de scripts y css, es decir, los que se ven al ser admin también. Y te toca crear filtros para los de admin, y que solo los vea el user admin. Pero por lo demás es muy cómodo de usar.

            Eso ya como quieras y te resulte más fácil.
            Puedes usar el plugin, con la pesadez de andar configurando lo que te digo, o hacerlo por código, que te evitas problemas de instalar más plugins, que siempre es recomendado no saturar wordpress de plugins para hacer todo.

          • Antonio

            Tienes razón, pero estoy intentando insertar el código y no obtengo resultados (creo que no estoy trabajando sobre el archivo adecuado o se me escapa algún detalle por mi inexperiencia) así que voy a ver la opción del plugin que me dices. En todo caso te agradezco las recomendaciones. Por cierto, ¿qué te parece el plugin scripts-to-footer?

          • Javier Crego

            Me parece un plugin muy básico y que solamente te pone en el footer los scripts de javascript, no las hojas de estilos. Le da 1000 vueltas el plugin que yo te dije, sobre todo en cuestión de crear filtros con los cuales haces que cargue en header o footer lo que tú quieras, con las condicciones que deseas.

          • Antonio

            Bueno, revisando el WP-Optimizer he observado que hay cierto desajuste entre los scripts y estilos que detecta el plugin y los que me salen en los resultados de PageSpeed: es decir, que PageSpeed me recomienda desplazar script y css que el plugin no me detecta que se estén cargando en el header de la página principal, de hecho algunos scripts ni siquiera los menciona…¿A qué es debido?

          • Javier Crego

            El plugin WP Scripts & Styles Optimizer por lo general, detecta TODOS los scripts y css (excepto los que son externos de Google adsense, analitics, etc), y si te detectara alguno en el footer y no en el header (que me extraña bastante que haga eso), pues solamente tienes que cambiarlos de lugar en el plugin.
            Tampoco sé muy bien si el plugin detecta al 100% TODOS los scripts y css, pero yo por lo que he probado, siempre me detectó todo. ¿Qué tipo de scripts y css no te detecta?.

          • Antonio

            Por ejemplo, tengo instalado el plugin ag-custom-admin, PageSpeed me avisa de que la carga anticipada de un script de este plugin me está perjudicando el rendimiento, y sin embargo este script no me aparece en WP- Optimizer. También tengo un plugin administrador de videos, dos de cuyos script aparecen en la “lista negra” de carga de PageSpeed y sin embargo no me aparecen tampoco en el WP-Optimizer.

          • Javier Crego

            Ese plugin ag-custom-admin al tratarse de un plugin que configura estilos en diferentes páginas de administración, es más complicado que WP-Optimizer los detecte. La única manera que detecte un estilo cargado en una determinada página, será añadiendo esa página y scripts en la pestaña “SINGLE PAGES” que trae el plugin. Pero hay algunas páginas como las de administración, que no las va a detectar. Y lo mismo supongo que te estará pasando con el otro plugin que comentas.
            Mi consejo, es que si se trata de un plugin que está diseñado para customizar la administración de WordPress o para hacer algo que implique cargar algo que depende de la administración, no toques nada ni lo intentes mover al footer, porque lo único que vas a conseguir es que posiblemente te acabe funcionando mal.
            De hecho si te fijas en los scripts que detecta el plugin, hay muchos que te preavisa con una exclamación en rojo y un mensaje: “WordPress Core-File. Be careful, if you change it!”.
            No pasa nada porque PageSpeed te lo detecte, ya que como te dije en otro comentario, PageSpeed detecta todo, porque lo ideal para PageSpeed es que no cargues tanto script o css en header, pero con un CMS como WordPress, basado en tanto plugin, a veces es imposible.