Cómo mover los JavaScripts a la parte inferior o al pie de página en WordPress

Recientemente, uno de nuestros lectores nos preguntó cómo pueden mover los JavaScripts a la parte inferior en WordPress para aumentar su puntuación de velocidad de página de Google. Nos alegramos de que lo hayan preguntado, porque sinceramente queríamos escribir sobre esto. Anteriormente, hemos hablado de cómo añadir correctamente JavaScripts y estilos CSS en WordPress. En este artículo, te mostraremos cómo mover los JavaScripts a la parte inferior en WordPress, para que puedas mejorar el tiempo de carga de tu sitio y tu puntuación de velocidad de página de Google.

Beneficios de mover los JavaScripts al fondo

JavaScript es un lenguaje de programación del lado del cliente. Lo ejecuta y ejecuta el navegador web de un usuario y no tu servidor web. Cuando colocas el JavaScript en la parte superior, los navegadores pueden ejecutar o procesar el JavaScript antes de cargar el resto de tu página. Cuando los JavaScripts se mueven a la parte inferior, tu servidor web renderizaría rápidamente la página y luego el navegador del usuario ejecutaría los JavaScripts. Como todo el renderizado del lado del servidor ya está hecho, el JavaScript se cargará en segundo plano haciendo que la carga general sea más rápida

Esto mejorará tu puntuación de velocidad cuando hagas pruebas con la velocidad de página de Google o con Yslow. Google y otros motores de búsqueda consideran ahora la velocidad de la página como una de las matrices de rendimiento al mostrar los resultados de la búsqueda. Esto significa que los sitios web que se cargan más rápido aparecerán de forma más destacada en los resultados de búsqueda

La forma correcta de añadir scripts en WordPress

WordPress dispone de un potente sistema de encolado que permite a los desarrolladores de temas y plugins añadir sus scripts en cola y cargarlos cuando sea necesario. Poner en cola los scripts y estilos correctamente puede mejorar significativamente la velocidad de carga de tu página

Para mostrarte un ejemplo básico, añadiremos un poco de JavaScript en un tema de WordPress. Guarda tu JavaScript en un .js y coloca ese .js en el archivo de tu tema js de tu tema. Si tu tema no tiene un directorio para JavaScripts, crea uno. Después de colocar tu archivo de script, edita el directorio de tu tema functions.php y añade este código

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . 'https://cdn4.wpbeginner.com/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  

En este código, hemos utilizado la función wp_register_script(). Esta función tiene los siguientes parámetros

<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

Para añadir el script en el pie de página o en la parte inferior de una página de WordPress, todo lo que tienes que hacer es establecer el parámetro $in_footer al parámetro true

También hemos utilizado otra función get_template_directory_uri() que devuelve la URL del directorio de plantillas. Esta función debe utilizarse para encolar y registrar scripts y estilos en los temas de WordPress. Para los plugins utilizaremos plugins_url() función

El problema

El problema es que algunas veces los plugins de WordPress añaden su propio JavaScript a las páginas dentro del o dentro del cuerpo de la página. Para mover esos scripts a la parte inferior tienes que editar los archivos de tu plugin y mover adecuadamente los scripts a la parte inferior

Encontrar la fuente de JavaScript

Abre tu sitio en el navegador web y visualiza la fuente de la página. Verás el enlace al archivo JavaScript indicando la ubicación y el origen del archivo. Por ejemplo, la captura de pantalla de abajo nos indica que nuestro script pertenece a un plugin llamado 'test-plugin101'. El archivo de script se encuentra en el directorio js directorio

A veces verás que el JavaScript se añade directamente en la página y no está vinculado a través de un archivo .js separado. En ese caso, tendrías que desactivar todos tus plugins uno por uno. Actualiza la página después de desactivar cada plugin hasta que encuentres el que añade el script a tus páginas. Si el JavaScript no desaparece incluso después de desactivar todos los plugins, intenta cambiar de tema para ver si el JavaScript es añadido por tu tema

Registrar y poner en cola los scripts

Una vez que hayas encontrado el plugin o el tema que está añadiendo JavaScript en la sección de la cabecera, el siguiente paso es averiguar dónde tiene el plugin una llamada al archivo. En uno de los archivos PHP de tu tema o plugin verás una llamada a ese .js en particular

Si el plugin o el tema ya está utilizando la cola para añadir el archivo JavaScript, entonces todo lo que tienes que hacer es cambiar la función wp_register_script en tu plugin o tema y añadir true para el parámetro $in_footer. Así

wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

Supongamos que tu plugin o tema está añadiendo JavaScript sin procesar en la cabecera o entre el contenido. Encuentra el código JavaScript en bruto en los archivos del plugin o del tema, copia el JavaScript y guárdalo en un .js archivo. A continuación, utiliza wp_register_script() como se muestra arriba, para mover el JavaScript a la parte inferior

Nota del editor: Es importante entender que cuando haces cambios en los archivos del núcleo y actualizas el plugin, tus cambios no se anulan. Una mejor manera de hacerlo sería desregistrar el script y volver a registrarlo desde el archivo functions.php de tu tema. Consulta este tutorial.

Además de mover los scripts al pie de página, también deberías considerar el uso de un plugin de redes sociales más rápido y de imágenes de carga lenta. Además, deberías utilizar W3 Total Cache y MaxCDN para mejorar la velocidad de tu sitio

Esperamos que este artículo te haya ayudado a mover los JavaScripts al fondo en WordPress y a mejorar la velocidad de tu página. Si tienes preguntas o comentarios, deja un comentario a continuación