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

- Link: https://binariocero.com/php/optimiza-la-velocidad-de-tu-wordpress-como-mover-css-y-javascript-al-footer-de-forma-eficiente
- Published: 2025-02-04T08:42:20+01:00
- Author: Juan José Fernández Durán

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

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:

    ```wp-block-preformatted
    <?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.