WordPress : Como Optimizar la carga de JavaScript

Cargar archivos JavaScript en WordPress con <script src=''></script> 

En los primeros días de mi carrera como desarrollador de WordPress, solía cargar mis archivos JavaScript de esta manera:

<script src="<?php site_url(); ?>/wp-conteht/themename/miscript.js"></script>

Esto fue simple y fácil de entender. Si bien esto obviamente funciona, más tarde descubrí que hay una mejor manera de poner en cola los scripts integrados en el núcleo de WordPress. En este artículo, le mostraré cómo, por qué y cuándo debe usar  wp_enqueue_script()  para cargar sus archivos JavaScript.

Cargar  archivos Javascript en WordPress usando la función wp_enqueue_script 

Como ya sabemos, la función wp_enqueue_scripts le damos uso para agregar scripts a la cola y asegurarnos de que carguen en el orden correcto y sin conflictos con otros scripts.

Considerando esto, WordPress nos permite agregar scripts al sitio web utilizando una técnica llamada puesta en cola de scripts. Esto significa que los scripts se agregan en el momento adecuado y en el lugar correcto para garantizar que se carguen de manera eficiente y no afecten el rendimiento de la página.

La puesta en cola de scripts en WordPress se realiza a través de funciones específicas en que pueden ser agregadas en el archivo functions.php del tema activo o desde plugins determinados que permiten la gestión de fragmentos de código. Con esta técnica, tenemos la potestad de agregar scripts específicos solo cuando sean necesarios, evitar conflictos con otros scripts y garantizar que el sitio web se cargue mucho más rápido.

La función wp_enqueue_scripts es un gancho (hook) de acción que se utiliza en WordPress para agregar scripts y estilos a nuestro sitio web, así como nos permite agregar también podemos ubicar archivos ya existentes en nuestra instalación y gestionar su comportamiento de cuando debe ser invocado y cuando no.

Debemos tener muy en cuenta que la función wp_enqueue_scripts debe estar dentro de la función add_action, ya que esto indica a nuestro sitio en WordPress cuándo debe ser ejecutada la función para agregar los scripts en cola.

→  Vea mas sobre la funcion wp_enqueue_script()   

Sintaxis de la función wp_enqueue_script

Admite 5 parámetros  :

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

• $handle, nombre del script. Debe ser único.
• $src, URL o ruta del script.
• $deps, array de dependencias de otros scripts.
• $ver, versión del script.
• $in_footer, valor booleano. Si es true se anclará a wp_footer y si es false a wp_head. Por defecto es false.

Cómo mover los scripts de forma manual  al  Footer en WordPress

Cargar los archivos Javascript en el footer en lugar de en el head hará mejorar la velocidad del tiempo de carga y el rendimiento de nuestro sitio, mejorando el WPO (Web Performance Optimization o, en español, optimización del rendimiento web) y ofreciendo una mejor experiencia de usuario.

Para poder mover todo el JavaScript al footer de nuestro sitio es imprescindible que tanto nuestro tema como todos los plugins que usemos, carguen sus propios scripts utilizando la función de encolado wp_enqueue_script().

El primer paso por lo tanto será cargar nuestros scripts y estilos css en el archivo functions.php (si el tema es nuestro o tenemos algún plugin propio) de la siguiente manera:

function load_myscripts() {
    wp_enqueue_script( 'my-scripts', get_template_directory_uri() 
    . '/js/scripts.min.js', array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'load_myscripts' );
 

Las partes más interesantes de esa llamada a wp_enqueue_script() son el primer parámetro ( 'my-scripts') y el último parámetro ( true).

→ El primer parámetro de wp_enqueue_script , es un identificador, que puede pensar como un apodo para el archivo JavaScript. El identificador se usa cuando desea agregar algo como una dependencia para su puesta en cola.

→ El último parámetro de wp_enqueue_script ,  decide si el archivo JavaScript debe ponerse en cola en wp_head() o en wp_footer(). Falso significa encabezado y verdadero significa pie de página.

Como puede observarse el último parámetro es true para que envíe mi JS al footer.

¿ahora qué pasa si el tema o los plugins no son nuestros? Afortunadamente no es necesario hardcodear un tema o plugin para mover sus scripts al footer (Siempre y cuando cargue sus scripts con la función wp_enqueue_script()). Basta con añadir esta función al archivo functions.php , lo ponemos en la parte final.

//* Mover javascripts al footer
function scripts_footer() {
    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( 'wp_enqueue_scripts', 'scripts_footer' );

Despues de poner la función todavia cargaba algunos js en el <head>

<script src="/wp-includes/js/wp-emoji-release.min.js?ver=5.4" type="text/javascript" defer=""></script>

<script async="" src="https://d5jmkjjpb7yfg.cloudfront.net/v2/latest/
optimole_lib_no_poly.min.js"></script>

<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/
intl/es_419/common.js"></script>

<script type="text/javascript" charset="UTF-8" 
src="http://maps.googleapis.com/maps-api-v3/api/js/40/9/
intl/es_419/util.js"></script>

Por lo tanto, si el tema no es desarrollado por ti, ésta función debería ir en el functions.php de tu child-theme o en tu plugin de utilidades.

En algún caso he visto que el archivo jQuery de WordPress seguía cargándose en el head. Para enviarlo al footer agrega estas dos funciones más:

function force_jquery_to_footer() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'force_jquery_to_footer' );
 
// Remove jQuery from old wp_print_scripts
function remove_jquery_from_wp_print_scripts() {
    wp_deregister_script( 'jquery' );
}
add_action( 'wp_print_scripts', 'remove_jquery_from_wp_print_scripts' );

Otro Ejemplo:

// Load scripts
function load_mis_scripts() {
	// CSS
	wp_enqueue_style( 'google-fonts', 
          'https://fonts.googleapis.com/css?family=Roboto:400,500,700' );

     wp_enqueue_style( 'bootstrap', 
         'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css' );

   //get_stylesheet_uri() - Devuelve la URL de la hoja de estilo del tema actual. 
    wp_enqueue_style( 'mis-estilos', get_stylesheet_uri() );

    // JAVASCRIPT
    wp_deregister_script('jquery');

	wp_enqueue_script('jquery', 
       'https://code.jquery.com/jquery-3.2.1.slim.min.js', array(), '3.2.1');

	wp_enqueue_script('fontawesome', 
         'https://use.fontawesome.com/025d1f53df.js', array(), null);

    wp_enqueue_script( 'popper', 
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js', 
           array('jquery'), '1.12.3', true );

    wp_enqueue_script( 'bootstrap', 
           'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js', 
            array('jquery'), '4.0.0', true );

         wp_enqueue_script( 'mis-scripts', 
                get_template_directory_uri() . 
               '/js/general.js', array('jquery'), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'load_mis_scripts' );

Referencia : Actualizar Bootstrap en una plantilla WordPress - Diseño y Programación Web  

Vea tambien: https://www.wpbeginner.com/wordpress-performance-speed/