Optimiza la Velocidad de tu WordPress, Cómo Mover CSS y JavaScript al Footer de Forma Eficiente
by Juan José Fernández Durán · 4 de febrero de 2025
Este es un plugin de WordPress que mueve todos los archivos JavaScript y CSS del al 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:
- Crea una carpeta en
wp-content/plugins/llamadamover-assets-footer. - Dentro de esa carpeta, crea un archivo llamado
mover-assets-footer.php. - Copia y pega el siguiente código en el archivo.
- Activa el plugin desde el panel de administración de WordPress.
Código del plugin:
/**
* 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 '' . "\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 '' . "\n";
}
}
}
add_action('wp_footer', 'mover_css_al_footer');
// Evitar que los CSS carguen en el
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 (