# Optimización de WordPress, Carga Asíncrona de Scripts y Estilos en el Footer

- Link: https://binariocero.com/php/optimizacion-de-wordpress-carga-asincrona-de-scripts-y-estilos-en-el-footer
- Published: 2025-02-04T13:16:18+01:00
- Author: Juan José Fernández Durán

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

Uno de los factores clave para mejorar el rendimiento de un sitio web en WordPress
es la optimización de la carga de scripts y estilos. Normalmente, los archivos JavaScript
y CSS se cargan en el encabezado («head») de la página, lo que puede ralentizar 
la visualización del contenido. En este artículo, exploraremos un plugin de WordPress
que mueve todos los scripts y estilos al pie de página («footer») y los carga de
manera asíncrona cuando sea posible.

## Características del Plugin

El plugin "Async Footer Assets" está diseñado para mejorar la carga de los recursos
en WordPress mediante las siguientes acciones:

 * Mueve los scripts de JavaScript al footer.
 * Agrega el atributo `async` a los scripts para permitir una carga asíncrona.
 * Mueve los estilos CSS al footer para evitar bloqueos en la representación de 
   la página.
 * Excluye de esta optimización algunos scripts y estilos críticos que deben permanecer
   en el head.

## Código del Plugin

El plugin está desarrollado en PHP y se basa en los hooks de WordPress para modificar
la forma en que se encolan los scripts y estilos.

    ```wp-block-code
    <?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() {
            // Enganchar el proceso de modificación de los recursos en la acción wp_enqueue_scripts con prioridad alta
            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', 'google-site-kit', 'googlesitekit-analytics', 'googlesitekit-tag-manager', 'google_gtagjs-js'];
            $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)) {
                    // Mover los scripts al footer (esto ya está siendo manejado por la prioridad del hook)
                    $wp_scripts->add_data($handle, 'group', 1);
                    $wp_scripts->add_data($handle, 'async', true); // Agregar el atributo async
                }
            }

            // Mover los estilos al footer de forma manual
            foreach ($wp_styles->queue as $handle) {
                if (!in_array($handle, $exclude_styles)) {
                    remove_action('wp_enqueue_scripts', 'wp_enqueue_styles'); // Eliminar acción predeterminada
                    add_action('wp_footer', [$this, 'enqueue_styles_in_footer'], 999); // Añadir estilos al footer
                }
            }
        }

        // Función para encolar los estilos en el footer
        public function enqueue_styles_in_footer() {
            global $wp_styles;

            // Imprimir los estilos en el footer
            foreach ($wp_styles->queue as $handle) {
                wp_print_styles($handle);
            }
        }
    }

    new AsyncFooterAssets();
    ```

## Explicación del Código

### 1. Verificación de Seguridad

El plugin comienza verificando si la constante `ABSPATH` está definida para evitar
accesos directos al archivo.

### 2. Enganche a `wp_enqueue_scripts`

La función `modify_assets()` se ejecuta en el hook `wp_enqueue_scripts` con una 
prioridad de `999` para asegurarse de que todos los scripts y estilos ya hayan sido
encolados antes de modificarlos.

### 3. Exclusión de Recursos Específicos

Algunos scripts y estilos esenciales, como `jquery` o `admin-bar`, no deben moverse
al footer para evitar errores en la funcionalidad del sitio.

### 4. Modificación de Scripts

Se recorren los scripts encolados y se les añade el atributo `async`, además de 
asegurarse de que se carguen en el footer.

### 5. Modificación de Estilos

Los estilos CSS también se mueven al footer mediante `wp_footer`, aunque WordPress
no ofrece un mecanismo directo para esto, por lo que se usa `wp_print_styles()`.

## Beneficios de Esta Implementación

 * **Mejora del rendimiento**: Reduce el tiempo de carga al evitar bloqueos en la
   representación de la página.
 * **Carga asíncrona**: Los scripts se ejecutan cuando están disponibles, en lugar
   de bloquear la carga del contenido.
 * **Optimización para Core Web Vitals**: La eliminación de scripts y estilos del
   head puede mejorar métricas como el FCP (First Contentful Paint) y el LCP (Largest
   Contentful Paint).

## Conclusión

El plugin "Async Footer Assets" es una solución sencilla y efectiva para optimizar
la carga de recursos en WordPress. Si estás buscando mejorar la velocidad de tu 
sitio sin modificar manualmente el código de cada página, esta es una excelente 
alternativa. Sin embargo, es recomendable probar su compatibilidad con otros plugins
y temas antes de implementarlo en un entorno de producción.