Cómo aplazar el análisis de JavaScript en WordPress

Ya sea que ejecute un sitio web de WordPress o cualquier otro sitio web, debe saber que una medida crítica del rendimiento de su sitio web es la velocidad de la página.

Si utiliza alguna de las herramientas de prueba de rendimiento del sitio, como GTmetrix o Google PageSpeed ​​Insights, podría sugerirle que posponga el análisis de JavaScript.

Ahora, la frase puede ser confusa, pero juega un papel importante en aumentar el tiempo de carga de su sitio web.

Entonces, ¿qué significa el análisis diferido de JavaScript?

Bueno, hablaremos de esto más adelante en detalle. En resumen, el análisis diferido de JavaScript permite que el navegador cargue primero el contenido del sitio web, sin esperar a que terminen de descargarse los scripts.

Este proceso es esencial ya que los navegadores procesan y descargan JavaScript del servidor antes de cargar cualquier otro contenido del sitio web. Esto perjudica la velocidad de su sitio web e interrumpe el tiempo de carga de su página.

Afortunadamente, aplazar el análisis de JavaScript es la mejor manera de mitigar el problema.

He explicado los cinco métodos probados para diferir el análisis de JavaScript en WordPress en este artículo. Pero antes de eso, obtengamos más información sobre lo que significa la frase y sepamos si necesita diferir el análisis de Javascript.

¡Pongámonos en marcha!

¿Qué quiere decir con aplazar el análisis de JavaScript en WordPress?

Antes de comprender la técnica para diferir el análisis de JavaScript, debe saber cómo un navegador web representa una página web.

Para empezar, cuando su navegador envía una solicitud a su servidor web, recibe la página, que se descarga en forma de documento HTML. Este documento HTML incluye texto, código que representa varios elementos DOM y diferentes recursos como imágenes, hojas de estilo y scripts.

De forma predeterminada, el navegador descarga estos recursos en una secuencia. La reproducción de la página web se reanuda solo después de que se descargan todos los recursos. Además, los grandes recursos afectan negativamente el tiempo de carga de su página web.

Cada vez que su navegador revisa el código para mostrar su sitio web, deja de hacerlo si encuentra JavaScript. El proceso se detiene hasta que puede recuperar y analizar el archivo JavaScript. Esto afecta negativamente la velocidad de su sitio web.

Afortunadamente, el proceso de aplazar el análisis de JavaScript notifica al navegador que espere para descargar y analizar un archivo JavaScript hasta que el contenido principal de su sitio web termine de cargarse. Hasta este punto, sus visitantes pueden interactuar con su sitio web para que el tiempo necesario para descargar y analizar JavaScript ya no comprometa el tiempo de carga de su sitio.

¿Cómo saber que necesita diferir el análisis de JavaScript?

Como dijimos anteriormente, las herramientas de prueba de rendimiento del sitio como GTmetrix, Google PageSpeed ​​Insights o WP Engine Speed ​​Tool a menudo sugieren que posponga el análisis de JavaScript cuando analizan su sitio web.

GTmetrix, en particular, le proporciona una calificación y enumera los scripts específicos que deben postergarse para mejorar la velocidad de carga de su página.

Simplemente ingrese la URL de su sitio web y espere a que la herramienta lo evalúe. Cuando complete la evaluación, diríjase a la pestaña PageSpeed ​​y expanda la sección Aplazar el análisis de JavaScript.

Esta sección le ofrece una lista de scripts no esenciales que se cargan durante el proceso de renderizado, como se muestra en el siguiente ejemplo:

Atributos asíncronos frente a diferidos

Es fundamental asegurarse de que la descarga de un script no interfiera con la representación de la página web. Hay dos maneras de hacer esto:

• asíncrono
• Aplazar

Puede incluir el atributo asíncrono en la etiqueta del script como:

 <script src= “path/to/script” async> </script>

Esto le dice a su navegador que cargue el script de forma asíncrona. Para ser precisos, el navegador descarga el recurso tan pronto como lo encuentra en el código, pero procede a analizar el HTML mientras el recurso aún se está descargando.

Por otro lado, puede agregar el atributo diferido a la etiqueta del script como:

 <script src= “path/to/script” defer> </script>

Esto le dice a su navegador que no descargue los recursos hasta que complete el análisis de la página web. Una vez que termina de analizar y renderizar, descarga la lista de secuencias de comandos diferidas que encontró anteriormente.

La principal diferencia entre los atributos async y defer es cuando se descargan los recursos.

Si tiene una aplicación web compacta, se recomienda que use defer para garantizar que se satisfagan las interdependencias. Además, si solo tiene unos pocos scripts en la ruta de renderizado, no le importaría ninguna diferencia entre el uso de estos dos atributos.

Aquí hay un ejemplo para entender los atributos asíncronos y diferidos:

Digamos que tiene dos scripts JS1 y JS2.

La condición es que JS2 aparezca en el código después de JS1, JS2 depende de JS1, pero JS1 es más grande que JS2.

Ahora, si usa async , es posible que JS2 termine de descargarse antes de que JS1 se descargue por completo. Esto conduce a un error ya que JS2 se ejecuta en ausencia de JS1.

Por otro lado, si usa defer , JS1 y JS2 se descargan secuencialmente, asegurándose de que no haya ningún error.

¿Por qué necesita diferir el análisis de JavaScript?

Hemos mencionado anteriormente que la velocidad de la página es el aspecto más crítico que hace o deshace el rendimiento de su sitio web. Dado que los archivos JavaScript son bastante grandes y tardan más en cargarse, retrasar su ejecución por un tiempo resulta útil para aumentar la velocidad de su sitio web.

Las siguientes son algunas de las razones por las que necesita diferir el análisis de JavaScript en WordPress:

1. Para impulsar las clasificaciones de búsqueda:

Cuando Google o cualquier otro motor de búsqueda evalúa su sitio web para una clasificación en el motor de búsqueda, toman la velocidad de la página como el punto crítico de medida. Si su sitio web se carga más rápido, seguramente aparecerá en la primera página de resultados del motor de búsqueda.

Según la investigación, 1 de cada 2 personas espera que una página se cargue en menos de 2 segundos. Si su sitio web no puede cargarse correctamente en 2 segundos, Google favorecerá a su competidor en lugar de a usted. Por lo tanto, puede afectar negativamente su clasificación de búsqueda.

Por lo tanto, es necesario diferir el análisis de JavaScript para que haya un aumento significativo en el tiempo de carga de su sitio web.

Si está buscando más opciones para acelerar su sitio web de WordPress, consulte estas 7 técnicas de SEO en la página que duplicarán su tráfico de búsqueda.

2. Para aumentar la tasa de conversión:

Si su sitio web carga más lento, sus visitantes seguramente lo abandonarán y buscarán otras opciones mejores. Dado que sus usuarios a menudo buscan información rápida y confiable en su sitio web, una página que se carga lentamente puede ser un mal humor.

Del mismo modo, si ejecuta un sitio afiliado y vende productos a través de su sitio web, esperaría que sus usuarios tomen más medidas al respecto. Sin embargo, una página web más lenta puede disuadir a sus visitantes de realizar cualquier acción.

La investigación presentada en HubSpot muestra que un retraso de incluso un segundo en el tiempo de carga del sitio web reduce la tasa de conversión en un 7 % . Así de crucial es aumentar el tiempo de carga de su sitio web y aumentar la tasa de conversión.

La técnica para diferir el análisis de JavaScript lo ayuda a aumentar la velocidad de su sitio web y mejorar su tasa de conversión.

3. Para proporcionar una mejor experiencia de usuario:

¡Pan comido! Los sitios web más lentos crean una experiencia de usuario terrible. Si su sitio web tarda más de lo normal en cargarse, puede esperar que sus visitantes abandonen su sitio web y, por lo tanto, aumenta su tasa de rebote.

Debería considerar aplazar el análisis de JavaScript para que los archivos JS se ejecuten solo después de que se cargue el contenido de su página web. Esta técnica lo ayuda a acelerar su sitio web de WordPress y ofrecer una excelente experiencia a sus usuarios.

Cinco métodos diferentes para diferir el análisis de JavaScript en WordPress

Para diferir el análisis de JavaScript, puede elegir cualquiera de las tres rutas principales, que incluyen:

• Enchufar
• Método Varvy
• Archivo Funciones.php

Usando estas rutas, hemos creado cinco métodos diferentes para diferir el análisis de JavaScript en WordPress.

Método 1: usar el complemento de JavaScript asíncrono gratuito

Async JavaScript es un complemento gratuito de WordPress que ayuda a eliminar JavaScript que bloquea el renderizado en el contenido de la mitad superior de la página.

El complemento le ofrece control total sobre qué secuencias de comandos agregar o excluir un atributo asíncrono o diferido para aumentar el rendimiento de su sitio web de WordPress. Lo que debe recordar antes de elegir entre asíncrono y diferido es:

• Async descarga JavaScript mientras analiza los archivos HTML, pero luego detiene el análisis HTML para ejecutar los archivos JavaScript.
• Defer descarga JavaScript mientras aún analiza archivos HTML y espera para ejecutarlo una vez que se completa el análisis de HTML.

Aquí están todos y cada uno de los pasos para diferir el análisis de JavaScript en WordPress usando el complemento Async JavaScript:

Primero, redirija a Complementos -> Agregar nuevo desde su panel de WordPress.

Ahora busque el complemento Async JavaScript en la barra de búsqueda y luego instálelo y actívelo .

Una vez que complete la instalación y activación del complemento, vaya a la página Configuración para realizar los cambios necesarios.

Ahora, marque la opción Habilitar JavaScript asíncrono y seleccione Aplazar como método JavaScript asíncrono como se muestra en la imagen a continuación:

Para opciones más avanzadas, puede desplazarse hacia abajo hasta la página. Aquí, puede incluir las secuencias de comandos a las que desea aplicar las etiquetas asincrónicas y diferidas y también agregar una lista de secuencias de comandos para excluir.

También puede enumerar los complementos y temas que puede excluir de cualquier cambio que realice el complemento Async JavaScript.

Una vez que realice los cambios necesarios, desplácese hacia abajo hasta la parte inferior de la página y presione el botón Guardar configuración .

Método 2: Usar el complemento WP Rocket

WP Rocket se considera uno de los complementos de almacenamiento en caché de WordPress más potentes que hace que su sitio web se cargue rápidamente con unos pocos clics. El complemento ofrece almacenamiento en caché de páginas, precarga de caché, compresión de archivos estáticos y muchas otras funciones interesantes.

Aparte de eso, WP Rocket también lo ayuda a diferir el análisis de JavaScript en la pestaña Optimización de archivos del panel de control de WP Rocket.

Una vez que compre, instale y active el complemento WP Rocket, redirija a la opción Configuración y haga clic en la pestaña Optimización de archivos del menú para comenzar.

Después de eso, desplácese hacia abajo hasta la sección Archivos JavaScript, marque la opción Cargar JavaScript diferido y habilite el Modo seguro para jQuery .

Cuando complete todo el proceso, desplácese hacia abajo hasta el final de la página y haga clic en el botón Guardar cambios .

Método 3: usar el complemento W3 Total Cache

W3 Total Cache es otro complemento esencial de WordPress que mejora el SEO y la experiencia del usuario de su sitio web. Aumenta el rendimiento de su sitio web y reduce el tiempo de carga al aprovechar la integración de la red de entrega de contenido (CDN).

W3 Total Cache es gratuito y muy efectivo. Puede usar este complemento para diferir el análisis de JavaScript en su sitio web de WordPress.

Aquí están todos los pasos para diferir el análisis de JavaScript en WordPress usando el complemento W3 Total Cache:

Primero, redirija a Complementos -> Agregar nuevo desde su panel de WordPress.

Ahora busque el complemento W3 Total Cache en la barra de búsqueda y luego instálelo y actívelo .

Una vez que complete la instalación y activación del complemento, vaya a Rendimiento -> Configuración general desde la barra lateral izquierda de WordPress para realizar los cambios necesarios.

Después de eso, desplácese hacia abajo hasta la sección Minificar y marque la opción Habilitar . Además, seleccione la opción Manual del modo Minimizar y haga clic en el botón Guardar todas las configuraciones para continuar.

Ahora, redirija a la pestaña Rendimiento -> Minimizar desde la barra lateral izquierda y desplácese hacia abajo hasta el encabezado JS , donde puede ver la sección Operaciones en áreas con dos etiquetas HTML.

Seleccione Sin bloqueo usando la opción "aplazar" en el tipo de inserción de la etiqueta Antes </head> .

En la misma sección, puede ver el encabezado de administración de archivos JS donde debe seleccionar su tema de WordPress activo y hacer clic en el botón Agregar un script para incluir el URI de JavaScript que desea analizar.

Puede agregar tantos URI como desee haciendo clic en el botón Agregar un script .

Una vez que complete los cambios, haga clic en el botón Guardar configuración y purgar cachés para continuar.

Después de eso, desplácese hacia abajo hasta la sección CSS . A continuación, puede hacer clic en el botón Agregar una hoja de estilo debajo del encabezado de administración de archivos CSS para insertar URI de hojas de estilo CSS. Puede agregar más de uno según las sugerencias proporcionadas por las herramientas de monitoreo de velocidad en línea.

Una vez que complete los cambios, haga clic en el botón Guardar configuración y purgar cachés para continuar.

Método 4: Usar el método recomendado de Varvy

Otro método, recomendado por Patrick Sexton de Varvy, utiliza un script para llamar a un archivo JavaScript externo una vez que se completa la carga de la página inicial. Esto significa que el navegador no descargará ni ejecutará JavaScript hasta que la página web termine de cargarse.

Puede usar este método modificando el fragmento de código que proporciona Varvy y luego agregando el script a su archivo de tema inmediatamente antes de la etiqueta de cierre </body> .

Aquí está el código para agregar en la parte del cuerpo de su tema para diferir el análisis de JavaScript en WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Nota: asegúrese de cambiar defer.js por el nombre de su archivo JavaScript externo. Después de eso, puede usar el enlace wp_footer para inyectar el código a través del archivo functions.php de su tema secundario.

Con este enfoque, puede envolver el código de Varvy de esta manera:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Aquí está cada paso de este método explicado con imágenes claras:

Inicie sesión en su panel de WordPress y navegue hasta Apariencia -> Editor de temas

Ahora, haga clic en el archivo header.php del lado derecho de la pantalla y luego pegue el código mencionado anteriormente antes de cerrar </body tag>.

Después de eso, haga clic en el botón Actualizar archivo .

Método 5: Usando el archivo functions.php

Si tiene una idea sobre el desarrollo de WordPress, debe estar familiarizado con el hecho de que no debe agregar scripts directamente a través del marcado HTML. En su lugar, debe usar las funciones integradas de WordPress para solicitar recursos y también hacer una copia de seguridad de su sitio web si es necesario.

Puede usar el atributo diferido en sus archivos Javascript agregando el fragmento de código a su archivo functions.php .
Para eso, debe ir al Editor de temas desde su panel de WordPress. Después de eso, haga clic en functions.php y agregue el siguiente código:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Este fragmento le dice a WordPress que agregue el atributo diferido a todos sus archivos JavaScript excepto JQuery.
También puede agregar fácilmente el siguiente código para usar atributos asíncronos o diferidos en sus archivos JavaScript a través del archivo functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Bueno, no olvide que antes de agregar los atributos asíncronos y diferidos a las etiquetas del script, debe poner en cola cada script para que WordPress pueda acceder a él. Aquí está el código para ello:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Cuando haya terminado de agregar código al archivo functions.php, haga clic en el botón Actualizar archivo .

Aquí están todos y cada uno de los pasos de este método explicados con imágenes claras:

Inicie sesión en su panel de WordPress y navegue hasta Apariencia -> Editor de temas

Ahora, haga clic en el archivo functions.php ubicado en el lado derecho de la pantalla. Luego puede pegar el código mencionado anteriormente y hacer clic en el botón Actualizar archivo para guardar los cambios necesarios.

Complementos alternativos para diferir el análisis de JavaScript en WordPress

Si está buscando otras opciones además de los complementos Async JavaScript y WP Rocket para diferir el análisis de JavaScript en WordPress, tiene muchas. Algunos de ellos incluyen:

1. Paquete de refuerzo de velocidad:

Este es un complemento gratuito de WordPress con una interfaz fácil de usar para ayudarlo con la optimización de JavaScript y muchas otras técnicas de optimización de velocidad.

Pros del paquete Speed ​​​​Booster:

• Muy simple y fácil de usar y viene con una interfaz de usuario interactiva
• Ayuda con la optimización de JavaScript, la optimización de CSS, la carga diferida y la integración de la red de entrega de contenido (CDN)
• Actualizado regularmente para un rendimiento excepcional y mejoras de errores

Contras del paquete Speed ​​​​Booster:

• Existe el riesgo de que habilitar este complemento o cualquiera de sus funciones pueda entrar en conflicto con otros complementos en su sitio web.

2. JavaScripts diferidos de WP:

Este complemento de WordPress difiere la carga de todos los JavaScripts agregados mediante wp_enqueue_script(), utilizando LABJS. El resultado es la correcta optimización del tiempo de carga.

Ventajas de los JavaScripts diferidos de WP:

• Muy fácil de usar y es una de las soluciones más populares del mercado.
• Diseñado explícitamente para diferir el análisis de JavaScript en WordPress, no solo como una función adicional

Contras de los JavaScripts diferidos de WP:

• Actualizaciones poco frecuentes y quizás incompatibles con las versiones más nuevas de WordPress
• Puede causar que otros complementos en su sitio web se rompan

Preguntas frecuentes (Preguntas frecuentes)

Conclusión

Es muy importante diferir el análisis de JavaScript en WordPress para mejorar la velocidad y el rendimiento de su sitio web. Esperamos que este artículo le resulte útil, ya que hemos presentado las diferentes formas de llevar a cabo esta técnica, que implica el uso de complementos y la adición de códigos a los archivos del tema usted mismo.

En caso de que le resulte difícil agregar códigos a los archivos de tema, le recomendamos encarecidamente que utilice los complementos mencionados anteriormente para diferir el análisis de JavaScript. Los complementos son fáciles de usar y puede completar todo el proceso con unos pocos clics.

Después de completar el proceso, asegúrese de ejecutar su sitio web a través de las herramientas de prueba de rendimiento del sitio como GTmetrix para asegurarse de que su sitio web esté aplazando tantos scripts como sea posible.

¿Tiene alguna inquietud o consulta sobre cómo aplazar el análisis de JavaScript en WordPress? Dispárales en la sección de comentarios a continuación!