Recientemente, uno de nuestros lectores nos preguntó cómo pueden mover los JavaScripts al final en WordPress para aumentar su puntaje de velocidad de la página de Google. Estamos contentos de que lo hayan preguntado, porque honestamente queríamos escribir sobre esto. Anteriormente, hemos hablado sobre cómo agregar correctamente estilos JavaScripts y CSS en WordPress. En este artículo, le mostraremos cómo mover los JavaScripts al final en WordPress, para que pueda mejorar el tiempo de carga de su sitio y el puntaje de velocidad de su página de Google.
Beneficios de mover JavaScripts hacia abajo
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 hacia la parte inferior, su servidor web renderiza rápidamente la página y luego el navegador del usuario ejecuta JavaScripts. Como 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á tu puntaje de velocidad cuando lo pruebes con la velocidad de la página de Google o Yslow. Google y otros motores de búsqueda ahora están considerando 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 de forma más destacada en los resultados de búsqueda.
La forma correcta de agregar scripts en WordPress
WordPress tiene un potente sistema de enqueuing que permite a los desarrolladores de temas y complementos agregar sus scripts en la cola y cargarlos según sea necesario. La secuencia de comandos y estilos correctamente puede mejorar significativamente la velocidad de carga de su página.
Para mostrar un ejemplo básico, agregaremos un poco de JavaScript en un tema de WordPress. Guarde su JavaScript en una .js archivo y lugar que .js archivo en su tema js directorio. Si su tema no tiene un directorio para JavaScripts, cree uno. Después de colocar su archivo de script, edite su tema functions.php archivar y agregar este código:
función 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 el $ 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 se debe utilizar para enquear y registrar secuencias de comandos y estilos en temas de WordPress. Para 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 internas
o dentro del cuerpo de la página. Para mover esos scripts al final, necesita editar los archivos de su complemento y mover los scripts al final.
Encontrar la fuente de JavaScript
Abra su sitio en el navegador web y vea el origen 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 js directorio.
Algunas veces verá que JavaScript se agrega directamente a la página y no se vincula a través de un archivo .js separado. En ese caso, necesitaría desactivar todos sus complementos uno por uno. Actualice la página después de desactivar cada complemento hasta que encuentre la 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 lo agrega.
Registrar y poner en cola los scripts
Una vez que haya encontrado el complemento o tema que agrega JavaScript en la sección del encabezado, el siguiente paso es averiguar dónde tiene una llamada el plugin para el archivo. En uno de los archivos PHP de tu tema o plugin, verás una llamada a ese particular .js archivo.
Si el plugin o el 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 complemento o tema y agregar true para el parámetro $ in_footer. Me gusta esto:
wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), '', '1.0', verdadero);
Supongamos que su complemento o tema agrega JavaScript sin procesar en el encabezado o entre el contenido. Encuentre el código JavaScript sin procesar en el plugin o archivos de tema, copie el JavaScript y guárdelo en un .js archivo. Entonces usa wp_register_script () funciona como se muestra arriba, para mover JavaScript hacia abajo.
Nota del editor: es importante comprender que cuando realice cambios en los archivos centrales y actualice el complemento, sus cambios no serán anulados. Una mejor forma de hacerlo sería eliminar el registro del script y volver a registrarlo desde el archivo functions.php de su tema. Ver este tutorial
Además de mover las secuencias de comandos al pie de página, también debería considerar usar un complemento de redes sociales más rápido e imágenes de carga lenta. Además de eso, también debe usar W3 Total Cache y MaxCDN para mejorar la velocidad de su sitio.
Esperamos que este artículo lo ayude a mover los JavaScripts al final en WordPress y a mejorar la velocidad de su página. Para preguntas y comentarios, por favor deje un comentario a continuación.
