Recientemente, uno de nuestros lectores nos preguntó cómo podían mover los JavaScripts al final en WordPress para aumentar su puntuación de velocidad de página de Google. Nos alegra que lo hayan preguntado, porque honestamente queríamos escribir sobre esto. Anteriormente, hemos hablado sobre cómo agregar correctamente JavaScript y estilos 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 su puntuación de velocidad de página de Google.
Beneficios de mover JavaScripts al final
JavaScript es un lenguaje de programación del lado del cliente. Es ejecutado y corrido 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 al final, su servidor web renderizaría rápidamente la página y luego el navegador del usuario ejecutaría los JavaScripts. Dado que todo el renderizado del lado del servidor ya está hecho, el JavaScript se cargará en segundo plano, haciendo que la carga general sea más rápida.
Esto mejorará su puntuación de velocidad al probar con Google Page Speed o Yslow. Google y otros motores de búsqueda ahora consideran la velocidad de la página como una de las métricas de rendimiento al mostrar los resultados de búsqueda. Esto significa que los sitios web que 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 potente sistema de encolado que permite a los desarrolladores de temas y plugins agregar sus scripts en cola y cargarlos según sea necesario. Encolar scripts y estilos correctamente puede mejorar significativamente la velocidad de carga de tu página.
Para mostrarte un ejemplo básico, agregaremos un poco de JavaScript a un tema de WordPress. Guarda tu JavaScript en un archivo .js y coloca ese archivo .js en el directorio js de tu tema. Si tu tema no tiene un directorio para JavaScript, créalo. Después de colocar tu archivo de script, edita el archivo functions.php de tu tema y agrega 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 necesitas hacer es establecer el parámetro $in_footer en true.
También hemos utilizado otra función get_template_directory_uri() que devuelve la URL del directorio de la plantilla. Esta función debe usarse para encolar y registrar scripts y estilos en temas de WordPress. Para plugins, usaremos la función plugins_url().
El Problema:
El problema es que a veces los plugins de WordPress agregan su propio JavaScript a las páginas dentro de <head> o dentro del cuerpo de la página. Para mover esos scripts a la parte inferior, necesitas editar los archivos de tu plugin y mover correctamente los scripts a la parte inferior.
Encontrar el Origen del JavaScript
Abre tu sitio en el navegador web y ve el código fuente de la página. Verás 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 script se encuentra en el directorio js.
A veces verás JavaScript agregado directamente en la página y no enlazado a través de un archivo .js separado. En ese caso, necesitarías desactivar todos tus plugins uno por uno. Actualiza la página después de desactivar cada plugin hasta que encuentres el que agrega el script a tus páginas. Si el JavaScript no desaparece incluso después de desactivar todos los plugins, intenta cambiar a otro tema para ver si el JavaScript lo agrega tu tema.
Registrar y poner en cola scripts
Una vez que hayas encontrado el plugin o tema que está agregando JavaScript en la sección del encabezado, el siguiente paso es averiguar dónde el plugin tiene una llamada al archivo. En uno de los archivos PHP de tu tema o plugin verás una llamada a ese archivo .js en particular.
Si el plugin o tema ya está usando la puesta en cola para agregar un archivo JavaScript, entonces todo lo que necesitas hacer es cambiar la función wp_register_script en tu plugin o tema y agregar true para el parámetro $in_footer. Así:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Supongamos que tu plugin o tema está agregando JavaScript sin procesar en el encabezado o entre el contenido. Encuentra el código JavaScript sin procesar en los archivos del plugin o tema, copia el JavaScript y guárdalo en un archivo .js. Luego usa la función wp_register_script() como se muestra arriba, para mover el JavaScript al final.
Nota del editor: Es importante entender que cuando realices cambios en los archivos principales y actualices el plugin, tus cambios no se sobrescribirán. Una mejor manera de hacerlo sería desregistrar el script y volver a registrarlo desde el archivo functions.php de tu tema. Consulta este tutorial.
Además de mover los scripts al pie de página, también deberías considerar usar un plugin de redes sociales más rápido y cargar imágenes de forma diferida. Junto con eso, también deberías usar W3 Total Cache y MaxCDN para mejorar la velocidad de tu sitio.
Esperamos que este artículo te haya ayudado a mover los JavaScripts a la parte inferior en WordPress y a mejorar la velocidad de tu página. Para preguntas y comentarios, por favor deja un comentario abajo.
Ravi
¿Se actualizarán mis plugins normalmente cuando mueva sus js a un solo archivo? Soy un novato.
Personal de WPBeginner
Hay múltiples maneras de hacerlo. Una de las más comunes es pegar los archivos JavaScript cargados por diferentes fuentes en un solo archivo JS y luego encolarlo.
Catharine
Genial, ¡gracias!
Catharine
Hola Syed, gracias por el tutorial. Sin embargo, soy un novato completo y tengo una pregunta muy básica. Para ese fragmento de código que publicaste (toda la función, etc.), ¿necesitamos agregarlo en el archivo functions.php por cada fragmento de javascript que queramos encolar? Supongo que lo que pregunto es, ¿cómo formatearías ese código si tuvieras más de un fragmento de javascript que se estuviera cargando en los encabezados de más de una página?
¡Tu ayuda sería muy apreciada!
Marc Jacobs
Hola, gran tutorial. Tengo una pregunta. Ejecuté mi sitio web en Google Page Speed Insights y recibí la advertencia de que tenía que eliminar JavaScript (y CSS) que bloqueaba la renderización para aumentar la velocidad de mi página. Leí la información en este sitio web (¡gran lectura!), pero no parece que pueda encontrar los archivos php donde el plugin "llama" a los archivos js que causan que mi sitio web carezca de velocidad. He descubierto qué plugin está causando la mayor parte del retraso (Google-maps-ready), pero no tengo idea de cómo proceder desde allí. He buscado en cada archivo php en la carpeta del plugin, pero no encuentro un archivo js llamado remotamente similar a los archivos mencionados en la prueba de velocidad de Google:
…
¿Cómo descubro qué archivo php editar? ¡Sería de gran ayuda!
Saludos,
Marc.
Soporte de WPBeginner
Un plugin en tu sitio llamado Google Maps Ready está agregando esos archivos.
Administrador
Basavaraj Tonagatti
Hola, recientemente me mudé a Genesis Framework + Eleven 40 Child Theme. También estoy enfrentando el mismo problema cuando ejecuto la prueba de velocidad de Google. Pero como no sé la forma exacta de hacerlo, me resulta difícil hacer cambios. ¿Alguien puede guiarme sobre cuál es la causa exacta en mi sitio y cómo eliminar este problema de JavaScript? (No sé ningún lenguaje de estilo y no tengo idea de estos lenguajes de código).
Joseph Stanley-Hunt
¡Muchas gracias, me había estado preguntando cómo hacer esto y algunos otros trucos (que también he encontrado respuestas aquí).]
Una pregunta, veo que no hay 'in-head' en los parámetros. ¿Significa eso que si 'in_footer' se establece en falso, se registra automáticamente en el encabezado?
Soporte de WPBeginner
Sí, el valor predeterminado para in_footer es false. Así que necesitas agregar explícitamente in_footer a true, de lo contrario aparecerá en el encabezado.
Administrador
Mike
La actualización del plugin también me vino a la mente de inmediato. Espero más consejos sobre esto.
Jason
¡Gran artículo! He estado haciendo estas preguntas durante mucho tiempo porque muchos temas son penalizados en la prueba de velocidad de Google debido a que los scripts de Java se cargan primero. Quizás otros sepan cómo poner estos scripts en el pie de página.
De nuevo, gracias y lo probaré y te diré cómo funciona.
Jeremy Myers
Gran tutorial.
Pero una vez que actualicemos el plugin, tendremos que hacer esto de nuevo, ¿verdad? ¿Y cada vez que se actualiza el plugin?
¿Es posible desregistrar el js en functions.php y luego simplemente volver a registrarlo en el pie de página de alguna manera?
adam
Hola, gracias por estos consejos útiles. Pero, ¿cómo mover los .js de la minificación de W3 Total Cache a la cabecera?
Esa es la ubicación de los js en la caché dentro de wp content, no en el plugin de wp.
Lucca
Gracias por el valioso conocimiento, sigue con el excelente trabajo.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Buen consejo. ¡Gracias por compartir!