# WordPress, Cómo Mover JavaScript y CSS al Footer para Mejorar la Velocidad de Carga

- Link: https://binariocero.com/php/wordpress-como-mover-javascript-y-css-al-footer-para-mejorar-la-velocidad-de-carga
- Published: 2025-02-04T08:45:07+01:00
- Author: Juan José Fernández Durán

![Loading](https://binariocero.com/wp-content/plugins/page-views-count/ajax-loader-
2x.gif)

Código de un plugin para WordPress que mueve todos los archivos JavaScript y CSS
al pie de página y los carga de manera asíncrona siempre que sea posible.

### Funcionalidades:

Mueve los scripts (`.js`) al footer y los hace asíncronos cuando es seguro.
Mueve
los estilos (`.css`) al footer y los hace asíncronos cuando es posible.Excluye automáticamente
los scripts y estilos esenciales de WordPress para evitar errores.

### Pasos para instalarlo:

 1. Crea una carpeta en `wp-content/plugins/` con el nombre `async-footer-assets`.
 2. Dentro de esa carpeta, crea un archivo llamado `async-footer-assets.php`.
 3. Copia y pega el siguiente código en ese archivo.
 4. Activa el plugin desde el panel de administración de WordPress.

### Código del Plugin:

    ```wp-block-preformatted
    <?php/** * Plugin Name: Async Footer Assets * Description: Mueve todos los scripts y estilos al pie de página y los carga de forma asíncrona cuando sea posible. * Version: 1.0 * Author: Juan Jose Fernandez Duran * License: GPL2 */if (!defined('ABSPATH')) {    exit; // Evitar acceso directo.}class AsyncFooterAssets {    public function __construct() {        add_action('wp_enqueue_scripts', [$this, 'modify_assets'], 999);    }    public function modify_assets() {        global $wp_scripts, $wp_styles;        // Lista de scripts y estilos que NO se deben mover al footer        $exclude_scripts = ['jquery', 'jquery-core', 'jquery-migrate'];        $exclude_styles = ['dashicons', 'admin-bar'];        // Mover los scripts al footer y hacerlos async/defer        foreach ($wp_scripts->queue as $handle) {            if (!in_array($handle, $exclude_scripts)) {                $wp_scripts->add_data($handle, 'group', 1);                $wp_scripts->add_data($handle, 'async', true);            }        }        // Mover los estilos al footer        foreach ($wp_styles->queue as $handle) {            if (!in_array($handle, $exclude_styles)) {                $wp_styles->add_data($handle, 'group', 1);                $wp_styles->add_data($handle, 'async', true);            }        }    }}new AsyncFooterAssets();
    ```

### Explicación del Código:

 1. **Evita que se muevan scripts esenciales** (`jquery`, etc.), para que no haya errores.
 2. **Mueve el resto de los scripts al footer** y los hace asíncronos (`async`).
 3. **Mueve los estilos CSS al footer** y los hace asíncronos si es seguro.

### Consideraciones:

 * No todos los scripts pueden ejecutarse correctamente con `async`.
 * Algunos estilos pueden necesitar estar en el `<head>`, por lo que puede ser necesario
   ajustar la lista de exclusión.
 * Si un script falla, revisa la consola del navegador y agrégalo a `$exclude_scripts`.