Cómo mover JavaScripts al final o al pie de página en WordPress

Recientemente, uno de nuestros lectores nos preguntó cómo pueden mover los JavaScripts al final de WordPress para aumentar la puntuación de velocidad de su página de Google. Nos alegra que lo hayan preguntado, porque sinceramente queríamos escribir sobre esto. Anteriormente, hemos hablado sobre cómo agregar 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 puntuación de velocidad de su página de Google..

Beneficios de mover JavaScripts a la parte inferior

JavaScript es un lenguaje de programación del lado del cliente. Es ejecutado y ejecutado por el navegador web de un usuario y no por su servidor web. Cuando coloca 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 a la parte inferior, su servidor web representará rápidamente la página y luego el navegador del usuario ejecutará los JavaScripts. Ya que toda la representación del lado del servidor ya está hecha, el JavaScript se cargará en segundo plano haciendo que la carga general sea más rápida.

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

La forma correcta de agregar scripts en WordPress

WordPress tiene un potente sistema de encolado que permite a los desarrolladores de temas y complementos agregar sus scripts en cola y cargarlos según sea necesario. La puesta en cola de scripts y estilos puede mejorar significativamente la velocidad de carga de su página.

Para mostrarle un ejemplo básico, agregaremos un poco de JavaScript en un tema de WordPress. Guarda tu JavaScript en un .js archiva y coloca ese .js archivo en su tema js directorio. Si su tema no tiene un directorio para JavaScripts, entonces cree uno. Después de colocar su archivo de script, edite el tema funciones.php Archivo y añadir este código:

 function wpb_adding_scripts () wp_register_script ('my-amazing-script', 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:

Para agregar la secuencia de comandos en el pie de página o en la parte inferior de una página de WordPress, todo lo que necesita hacer es configurar $ in_footer parámetro a cierto.

También hemos usado otra función. get_template_directory_uri () que devuelve la URL para el directorio de la plantilla. Esta función debe usarse para encolar y registrar secuencias de comandos y estilos en temas de WordPress. Para los complementos estaremos usando plugins_url () función.

El problema:

El problema es que algunas veces los complementos de WordPress agregan su propio JavaScript a las páginas dentro o dentro del cuerpo de la página. Para mover esos scripts a la parte inferior, necesita editar sus archivos de complementos y mover adecuadamente los scripts a la parte inferior..

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 complemento llamado 'test-plugin101'. El archivo de script se encuentra en el js directorio.

A veces, verá JavaScript agregado directamente en la página y no vinculado a través de un archivo .js separado. En ese caso, deberías desactivar todos tus complementos uno por uno. Actualice la página después de desactivar cada complemento hasta que encuentre el que agrega el script a sus páginas. Si el JavaScript no desaparece, incluso después de desactivar todos los complementos, intente cambiar a otro tema para ver si su tema ha agregado JavaScript..

Registrar y poner en cola los scripts

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

Si el complemento o tema ya está en cola para agregar un archivo JavaScript, entonces todo lo que necesita hacer es cambiar la función wp_register_script en su complemento o tema y agregar verdadero para el parámetro $ in_footer. Me gusta esto:

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

Supongamos que su complemento o tema está agregando JavaScript en bruto en el encabezado o entre el contenido. Encuentre el código JavaScript sin procesar en los archivos de plugin o tema, copie el JavaScript y guárdelo en un .js expediente. Entonces use wp_register_script () funciona como se muestra arriba, para mover JavaScript a la parte inferior.

Nota del editor: es importante comprender que cuando realice cambios en los archivos principales y actualice el complemento, no se anularán los cambios. Una mejor manera de hacerlo sería anular el registro de la secuencia de comandos y volver a registrarla desde el archivo functions.php de su tema. Ver este tutorial.

Además de mover los scripts al pie de página, también debe considerar el uso de un complemento de redes sociales más rápido y de carga lenta. Junto con eso, también debes usar W3 Total Cache y MaxCDN para mejorar la velocidad de tu sitio.

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