Mover Archivos Javascript a wp_footer para Acelerar WordPress

Mover archivos javascript al footer en WordPress

El sistema de WordPress utiliza un conjunto de archivos combinados para renderizar y mostrar tu sitio web al usuario, sin embargo, algunos archivos de Javascript bloquean la visualización de la página final. Por eso, para acelerar tu sitio web es recomendable desplazar los scripts al pie de página. En este tutorial te mostraremos cómo mover archivos javascript a wp_footer

Renderización de Página de WordPress

Se le llama la renderización al proceso que el sistema de WordPress realiza al combinar el conjunto de archivos que intervienen en la composición de una página cuando un usuario la solicita mediante un navegador web.

La renderización de una sola página en WordPress puede estar compuesta de decenas de archivos, entre documento HTML, hojas de estilo CSS, imágenes y archivos Javascript que el gestor de contenido utiliza generalmente.

Carga de Archivos en WordPress

Según la especificación HTML, los archivos y códigos CSS deben cargarse en la sección <head> para que la página web aparezca estilizada a medida que el sistema de WordPress vaya cargando las otras partes de la página, pero no podemos decir lo mismo de los archivos Javascript.

Los archivos Javascript que está en tu sitio web en la cabecera de tu sitio web no permiten mostrar ningún otro componente de la página, hasta que esos mismo archivos estén listos, lo cual ralentiza la visualización del sitio web, y por tanto más tiempo de espera del visitante.

Mover Archivos Javascript al Footer

Para acelerar la renderización de WordPress, te recomendamos mover archivos Javascript al pie de página, utilizan el hook wp_footer.

Si bien la página aún tiene el mismo peso cuando mueves los archivos, estos ajustes simples hacen que la página parezca más rápida. Sin embargo, si los archivos javascripts son exageradamente pesados, esto puede resultar en una página visualizada con contenido pero sin estilo completo.

if( ! is_admin() ) {
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);

    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2', true);
    wp_enqueue_script('jquery');
}

Estas código tiene una sola misión, que es mover archivos Javascript de la cabecera al footer de la página usando el hook wp_footer. Para que este código tenga efecto, necesitas pegarlo en el archivo functions.php de tu tema actual, en la parte inferior.

Existe otro método más sostenible que es crear un plugin personalizado, donde pegas los códigos que añades en tu sitio web, así aunque cambies el tema, el código nunca se perderá, a menos que borres el plugin.

Puedes visitar también nuestro tutorial anterior de cómo solucionar bloqueo de rendirización de Javascript y CSS para optimizar el tiempo de respuesta de tus páginas.

Esto es todo, si tienes preguntas utiliza el formulario de comentarios. Por favor sigue nuestra página en Facebook, para obtener los tutoriales de optimización y seguridad de WordPress.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí