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

Introducción

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.

<?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.