28 de febrero de 2025

Optimiza la Velocidad de tu WordPress, Cómo Mover CSS y JavaScript al Footer de Forma Eficiente

Juan José Fernández Durán04 minutos
Artículos Guías Manuales Sistemas Linux Windows Redes MySql Binario 0 Binario Cero

Este es un plugin de WordPress que mueve todos los archivos JavaScript y CSS del <head> al <footer> y los carga de manera diferida (defer para scripts y media="print" onload="this.onload=null;this.removeAttribute('media');" para estilos CSS).

Pasos para instalarlo:

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

Código del plugin:

<?php
/**
 * Plugin Name: Mover JS y CSS al Footer
 * Description: Mueve los archivos JS y CSS al footer y los carga de manera diferida.
 * Version: 1.0
 * Author: Juan Jose Fernandez Duran
 */

if (!defined('ABSPATH')) {
    exit; // Salir si se accede directamente
}

// Mover JavaScript al footer y añadir `defer`
function mover_js_al_footer($tag, $handle, $src) {
    if (is_admin() || strpos($tag, 'jquery') !== false) {
        return $tag; // No modificar en admin ni jQuery nativo
    }
    return '<script defer src="' . esc_url($src) . '"></script>' . "\n";
}
add_filter('script_loader_tag', 'mover_js_al_footer', 10, 3);

// Mover CSS al footer y hacerlo "diferido"
function mover_css_al_footer() {
    global $wp_styles;
    if (!is_admin()) {
        foreach ($wp_styles->queue as $handle) {
            $src = esc_url($wp_styles->registered[$handle]->src);
            echo '<link rel="stylesheet" href="' . $src . '" media="print" onload="this.onload=null;this.removeAttribute(\'media\');">' . "\n";
        }
    }
}
add_action('wp_footer', 'mover_css_al_footer');

// Evitar que los CSS carguen en el <head>
function quitar_css_del_head() {
    global $wp_styles;
    if (!is_admin()) {
        $wp_styles->queue = []; // Elimina la carga en el head
    }
}
add_action('wp_enqueue_scripts', 'quitar_css_del_head', 9999);

¿Qué hace este plugin?

  • Mueve los scripts (<script>) al footer y les añade el atributo defer.
  • Mueve las hojas de estilo (<link rel="stylesheet">) al footer y las carga con media="print", para que sean diferidas.
  • Evita que los CSS se carguen en el <head>.

Este método mejora la velocidad de carga, pero asegúrate de probarlo bien en tu sitio, ya que algunos scripts podrían depender del orden de carga.