Recientemente, uno de nuestros lectores nos preguntó cómo pueden mover JavaScripts al final de WordPress para aumentar la puntuación de velocidad de su página de Google. Nos alegra que hayan hecho la pregunta, porque, sinceramente, queríamos escribir sobre ella. Anteriormente, explicamos cómo agregar correctamente JavaScripts y estilos CSS en WordPress. En este artículo, le mostraremos cómo mover JavaScripts a la parte inferior 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 hacia abajo
Contents
JavaScript es un lenguaje de programación del lado del cliente. Es ejecutado y administrado por el navegador web de un usuario, no por su servidor web. Cuando coloca JavaScript en la parte superior, los navegadores pueden ejecutar o procesar JavaScript antes de cargar el resto de su página. Cuando los JavaScripts se mueven hacia abajo, su servidor web procesará rápidamente la página y luego el navegador del usuario ejecutará los JavaScripts. Dado que toda la representación del lado del servidor ya está hecha, el JavaScript se cargará en segundo plano, lo que acelerará la carga general. Esto mejorará su puntaje de velocidad cuando pruebe con Google o Yslow la velocidad de la página. Google y otros motores de búsqueda ahora consideran la velocidad de la página como una de las matrices de rendimiento al mostrar resultados de búsqueda. Esto significa que los sitios web que se cargan más rápido aparecerán de manera más prominente en los resultados de búsqueda.
La forma correcta de agregar scripts en WordPress
WordPress tiene un poderoso sistema de cola que permite a los desarrolladores de temas y complementos agregar sus scripts a la cola y cargarlos según sea necesario. Poner en cola scripts y estilos puede mejorar drásticamente la velocidad de carga de su página. Para mostrarte un ejemplo básico, agregaremos algo de JavaScript en 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 agregue este código: function wpb_adding_scripts () {wp_register_script (‘my-amazing-script’, get_template_directory_uri (). ‘/ Js / my-amazing-script .js’, », ‘1.1’, verdadero); wp_enqueue_script (‘mi-asombroso-script’); } add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’); En este código, usamos la función wp_register_script (). Esta función tiene los siguientes parámetros:
Para agregar el script al pie de página o al final de una página de WordPress, solo necesita establecer el parámetro $ in_footer en verdadero. También usamos otra función get_template_directory_uri () que devuelve la URL del directorio de plantillas. Esta función debe usarse para poner en cola y guardar scripts y estilos en temas de WordPress. Para los complementos, usaremos la función plugins_url ().
El problema:
El problema es que a veces los complementos de WordPress agregan su propio JavaScript a las páginas internas.
Encontrar la fuente de JavaScript
Abra su sitio en el navegador web y vea el código fuente de la página. Verá el enlace al archivo JavaScript que indica la ubicación y el origen del archivo. Por ejemplo, la captura de pantalla a continuación nos dice que nuestro script pertenece a un complemento llamado ‘test-plugin101’. El archivo de script se encuentra en el directorio js.

A veces verá JavaScript agregado directamente a la página y no vinculado a través de un archivo .js separado. En este caso, tendrás que desactivar todos tus complementos uno por uno. Actualice la página después de deshabilitar cada complemento hasta que encuentre el que agrega el script a sus páginas. Si JavaScript no desaparece incluso después de deshabilitar todos los complementos, intente cambiar a otro tema para ver si su tema agrega JavaScript.
Registro y puesta en cola de scripts
Una vez que haya encontrado el complemento o tema que agrega JavaScript a la sección del encabezado, el siguiente paso es averiguar dónde el complemento tiene una llamada para el archivo. En uno de los archivos PHP para su tema o complemento, verá una llamada a ese archivo .js en particular. Si el complemento o tema ya está usando la cola para agregar un archivo JavaScript, solo necesita cambiar la función wp_register_script en su complemento o tema y agregar verdadero para el parámetro $ in_footer. Así: wp_register_script (‘script-handle’, plugins_url (‘js / script.js’, __FILE__), », ‘1.0’, true); Suponga que su complemento o tema agrega JavaScript sin formato en el encabezado o entre el contenido. Busque el código JavaScript sin procesar en el complemento o en los archivos de tema, copie el JavaScript y guárdelo como un archivo .js. Luego use la función wp_register_script () como se muestra arriba, para mover JavaScript hacia abajo. Nota del editor: es importante comprender que cuando realiza cambios en los archivos principales y actualiza el complemento, los cambios no se revertirán. Una mejor manera sería anular el registro del script y volver a registrarlo desde el archivo functions.php de su tema. Mira 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 e imágenes de carga diferida. Junto con esto, también debe usar W3 Total Cache y MaxCDN para mejorar la velocidad de su sitio. Esperamos que este artículo le haya ayudado a mover JavaScripts a la parte inferior de WordPress y mejorar la velocidad de su página. Si tiene preguntas y comentarios, deje un comentario a continuación.