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

Recientemente, uno de nuestros lectores nos preguntó cómo pueden mover JavaScripts al final de WordPress para aumentar la velocidad de sus páginas de Google. Nos alegramos de que nos lo pidieran, porque sinceramente queríamos escribir sobre ello. Anteriormente, hemos hablado sobre cómo añadir correctamente JavaScripts y estilos CSS en WordPress. En este artículo, le mostraremos cómo mover JavaScripts al final de WordPress, para que pueda mejorar el tiempo de carga de su sitio y la velocidad de su página de Google.

Beneficios de mover JavaScripts al fondo

JavaScript es un lenguaje de programación del lado del cliente. Es ejecutado y ejecutado por el navegador de un usuario y no por su servidor web. Cuando usted pone JavaScript en la parte superior, los navegadores pueden ejecutar o procesar el JavaScript antes de cargar el resto de su página. Cuando los JavaScripts se mueven hacia abajo, su servidor web renderiza rápidamente la página y luego el navegador del usuario ejecuta JavaScripts. Dado que toda la renderización del lado del servidor ya está hecha, el JavaScript se cargará en segundo plano, lo que hará que la carga total sea más rápida.

Esto mejorará su puntuación de velocidad al probar con la velocidad de la página de Google o Yslow. Google y otros motores de búsqueda están considerando ahora la velocidad de la página como una de las matrices de rendimiento a la hora de mostrar los resultados de búsqueda. Esto significa que los sitios web que se cargan más rápido aparecerán de forma más prominente en los resultados de búsqueda.

La manera correcta de agregar scripts en WordPress

WordPress tiene un poderoso sistema de cola que permite a los desarrolladores de temas y plugins añadir sus scripts en cola y cargarlos cuando sea necesario. Las colas de secuencias de comandos y estilos pueden mejorar significativamente la velocidad de carga de la página.

Para mostrarte un ejemplo básico, añadiremos un poco de JavaScript a un tema de WordPress. Guarde su JavaScript en un archivo.js y coloque ese archivo.js en el directorio js de su tema. Si su tema no tiene un directorio para JavaScripts, cree uno. Después de colocar su archivo de script, edite el archivo functions.php de su tema y añada este código:

12345funciónwpb_adding_scripts() {wp_register_script('mi-script asombroso', get_template_directory_uri() . /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:

123

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 necesita hacer es establecer el parámetro $in_footer en true.

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

El problema:

El problema es que algunas veces los plugins de WordPress añaden su propio JavaScript a las páginas dentro o dentro del cuerpo de la página. Para mover esos scripts al fondo necesitas editar tus archivos de plugins y moverlos correctamente al fondo.

Cómo encontrar la fuente de JavaScript

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

A veces verá JavaScript añadido directamente en la página y no enlazado a través de un archivo.js separado. En ese caso, necesitaría desactivar todos sus plugins uno por uno. Actualice la página después de desactivar cada plugin hasta que encuentre el que agrega el script a sus páginas. Si el JavaScript no desaparece incluso después de desactivar todos los plugins, intente cambiar a otro tema para ver si el tema añade el JavaScript.

Registrar y encolar scripts

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

Si el plugin o tema ya está usando enqueuing para agregar el archivo JavaScript, entonces todo lo que necesita hacer es cambiar la función wp_register_script en su plugin o tema y agregar true para el parámetro $in_footer. Así:

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

Supongamos que su plugin o tema está agregando JavaScript sin procesar en el encabezado o entre el contenido. Busque el código JavaScript sin procesar en los archivos de plugin o tema, copie el JavaScript y guárdelo en un archivo.js. Luego use la función wp_register_script() como se muestra arriba, para mover JavaScript al fondo.

Nota del editor: Es importante entender que cuando se hacen cambios a los archivos principales y se actualiza el plugin, entonces los cambios no serán anulados. Una mejor manera de hacerlo sería dar de baja el guión y volver a registrarlo del archivo functions.php de su tema. Vea este tutorial.

Aparte de mover los scripts al pie de página, también debería considerar usar un plugin de medios sociales más rápido e imágenes de carga perezosa. Además, también debería utilizar W3 Total Cache y MaxCDN para mejorar la velocidad de su sitio.

Esperamos que este artículo le haya ayudado a mover JavaScripts al final de WordPress y mejorar la velocidad de su página. Para preguntas y comentarios, por favor deje un comentario a continuación.