Recientemente, uno de nuestros lectores nos preguntó cómo mover JavaScript al final de WordPress para aumentar el puntaje de velocidad de la página de Google. Nos alegra que lo hayan preguntado, porque honestamente queríamos escribir sobre esto. Anteriormente, hablamos sobre cómo agregar correctamente estilos JavaScript y CSS en WordPress. En este artículo, le mostraremos cómo mover JavaScript 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.
Ventajas de mover JavaScript al final
JavaScript es un lenguaje de programación del lado del cliente. Es ejecutado y ejecutado por el navegador web del usuario y no por el 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 scripts de Java se mueven a la parte inferior, el servidor web mostrará rápidamente la página y luego el navegador del usuario ejecutará los scripts de JavaScript. Dado que ya se ha realizado toda la representación del lado del servidor, JavaScript se cargará en segundo plano haciendo que la carga general sea más rápida.
Esto mejorará su puntuación de velocidad cuando pruebe con Google o Yslow la velocidad de la página. 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 visualizar los 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 plugins agregar sus propios scripts en cola y cargarlos según sea necesario. Poner en cola correctamente los scripts y los estilos puede mejorar significativamente la velocidad de carga de la página.
Para mostrarte un ejemplo básico, agregaremos algo de JavaScript en un tema de WordPress. Guarde su JavaScript en un archivo .js archivar y colocar .js archivo en su tema js directorio. Si su tema no tiene un directorio JavaScript, cree uno. Después de colocar el archivo de secuencia de comandos, edite el archivo functions.php archivo 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', true);
wp_enqueue_script('my-amazing-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:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Para agregar 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 configurar el archivo $in_footer parámetro a true.
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 registrar scripts y estilos en temas de WordPress. Para los plugins usaremos plugins_url() función.
El problema:
El problema es que los plugins de WordPress a veces 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, debe editar los archivos del plugin y mover correctamente los scripts a la parte inferior.Encuentra 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 plugin llamado «test-plugin101». El archivo de secuencia de comandos se encuentra en js directorio.
A veces verá JavaScript agregado directamente a la página y no vinculado a través de un archivo .js separado. En ese caso, debe 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 JavaScript no desaparece incluso después de deshabilitar todos los plugins, intente cambiar a otro tema para ver si se ha agregado JavaScript desde su tema.
Grabar y adjuntar guiones
Después de encontrar el plugin o tema que agrega JavaScript en la sección del encabezado, el siguiente paso es averiguar dónde el plugin tiene una llamada para el archivo. En uno de los archivos PHP de su tema o plugin, verá una llamada a ese tema en particular. .js expediente.
Si su plugin o tema ya está usando la cola para agregar un archivo JavaScript, todo lo que necesita hacer es editar la función wp_register_script en su plugin o tema y agregar verdadero para el parámetro $ in_footer. Como esto:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Digamos que su plugin o tema está agregando JavaScript sin formato en el encabezado o entre el contenido. Busque el código JavaScript sin procesar en el plugin o los archivos de tema, copie el JavaScript y guárdelo en un archivo .js expediente. Así que usa wp_register_script() funciona como se muestra arriba, para mover JavaScript a la parte inferior.
Nota del editor: es importante comprender que cuando realiza cambios en los archivos principales y actualiza el plugin, los cambios no se sobrescribirán. Una mejor manera de hacer esto 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 debería considerar el uso de un plugin 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 le haya ayudado a mover JavaScript 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.
¿Te ha resultado útil??
0 / 0