Beneficios de mover JavaScripts al fondo
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 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á JavaScripts. Dado 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 pruebe 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 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 puesta en cola que permite temas y plugin desarrolladores para agregar sus scripts en la cola y cargarlos según sea necesario. Poner en cola scripts y estilos correctamente puede mejorar significativamente la velocidad de carga de su página.
Para mostrarte un ejemplo básico, agregaremos un poco de JavaScript en un tema de WordPress. Guarde su JavaScript en un .js archivar y colocar eso .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 secuencia de comandos, edite el 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, hemos utilizado 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 $in_footer parámetro a true.
También hemos utilizado 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 plugins estaremos usando plugins_url() función.
El problema:
El problema es que algunas veces WordPress plugins agregue su propio JavaScript a las páginas dentro de o dentro del cuerpo de la página. Para mover esos scripts a la parte inferior, debe editar su plugin archivos y mueva correctamente los scripts al final.
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 siguiente nos dice que nuestro script pertenece a un plugin llamado ‘test-plugin101’. El archivo de secuencia de comandos se encuentra en el 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, deberá desactivar todos sus plugins uno a uno. Actualizar la página después de desactivar cada plugin hasta que encuentre el que está agregando el script a sus páginas. Si JavaScript no desaparece incluso después de desactivar todos los plugins, luego 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 plugin o tema que está agregando JavaScript en la sección de encabezado, el siguiente paso es averiguar dónde plugin tiene una llamada para el archivo. En uno de tus temas o pluginarchivos PHP, verá una llamada a ese particular .js expediente.
Si el plugin o el tema ya está usando la puesta en cola para agregar un archivo JavaScript, entonces todo lo que necesita hacer es cambiar la función wp_register_script en su plugin o tema y agregue verdadero para el parámetro $ in_footer. Como esto:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Supongamos que tu plugin o el tema está agregando JavaScript sin procesar en el encabezado o entre el contenido. Busque el código JavaScript sin procesar en el plugin o archivos de tema, copie el JavaScript y guárdelo en un .js expediente. Entonces 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 anularán. Una mejor manera de hacer esto sería cancelar el registro del script y volver a registrarlo desde el archivo functions.php de su tema. Vea este tutorial.
Además de mover los guiones al pie de página, también debe considerar el uso de redes sociales más rápidas. plugin e imágenes de carga diferida. Junto con 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 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.
.
Fuente: wpbeginner