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

Publicado: 2021-07-22

Aplazar el análisis de JavaScript en WordPress

¿Tu sitio está tardando demasiado en cargarse? No importa si está utilizando un sitio de WordPress u otro, el alto tiempo de carga es una preocupación crítica que debe solucionarse pronto.

Entonces, ¿estás vagando por lo mismo? Bueno, si revisa su sitio personalmente, puede recibir el mensaje 'Aplazar el análisis de JavaScript en WordPress'. Esto parece complicado y, a veces, no es comprensible porque no eres un experto en tecnología.

Si sigue el mensaje, verá un aumento en la velocidad de carga de la página y jugará un papel importante en la mejora de las conversiones y los ingresos del sitio.

Ahora la pregunta es ¿qué significa Defer Parsing of JavaScript in WordPress?

Entonces, aquí hay una respuesta rápida y breve. El análisis diferido de JavaScript en WordPress permite que el navegador cargue primero el contenido del sitio web sin leer los scripts para finalizar la descarga y mejorar el tiempo de carga.

Este sencillo proceso es importante porque los navegadores procesan y descargan el JavaScript del servidor antes de cargar el contenido del sitio web. Esto naturalmente dificulta la velocidad del sitio web e interrumpe el tiempo de carga.

Pero Defer Parsing of JavaScript in WordPress es la clave para desbloquear el problema y puede disfrutar del rendimiento del sitio web sin esperar minutos.

Esta publicación compartirá las cinco técnicas probadas para diferir JavaScript. Pero antes de saltar a las soluciones, uno debe comprender el significado real de este mensaje emergente.

Entonces, sin más preámbulos, ¡comencemos!

¿Qué significa Aplazar el análisis de JavaScript en WordPress?

¿Sabes cómo los navegadores renderizan la página web? Si no, uno debe entender esto primero.

Cuando su navegador recibe una solicitud del usuario, la envía al servidor web y la página comienza a descargarse en formato HTML. Este documento HTML incluye texto y código que representa elementos DOM y diferentes recursos como imágenes, scripts y hojas de estilo.

Sin embargo, el navegador descarga los recursos en secuencia. Pero el desgarramiento de la página reanuda todos los procesos nuevamente y ofrece efectos adversos en el tiempo de carga. Incluso esto a veces dificulta el proceso y muestra el mensaje: La página no se puede descargar o muestra un error del servidor.

Cada vez que el navegador pasa por el código para mostrar el sitio web o las páginas, deja de mostrar si se encuentra JavaScript allí. Este proceso se detiene hasta que no puede recuperar y analizar el script. Además, afecta negativamente la velocidad de su sitio web.

Pero con la ayuda de Defer Parsing of JavaScript en WordPress ayuda a notificar al navegador que descargue la página o el contenido principal de su sitio y ofrece una carga rápida. En esto, los usuarios pueden encontrar el sitio web.

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

Si su sitio web tarda demasiado en cargarse, debe aumentar su rendimiento por las buenas y por las malas. Si desconoce el rendimiento del sitio web, ejecute la prueba en el sitio utilizando las mejores herramientas como GT Metrix, Google Pagespeed insights o WPEngine.

Estas son pruebas de herramientas de velocidad que a menudo sugieren y le ofrecen aplazar el análisis de JavaScript cuando analiza el sitio. Por ejemplo, probemos con GT Metrix.

En GTMetrix encontrarás la calificación de tu sitio en cada página y scripts específicos que necesitas mejorar lo antes posible. Para usar esta herramienta, uno puede ingresar la URL del sitio web y esperar los minutos, para que pueda obtener todos los datos.

Una vez que se complete, vaya a la pestaña de velocidad de la página y mejore su velocidad de carga y amplíe la sección Aplazar el análisis de JavaScript.

Aquí encontrará una lista de scripts de carga que se cargan durante el proceso de renderizado. Así que lea todo cuidadosamente.

Atributos asíncronos VS diferidos

Esto es importante para garantizar que la descarga de un script no interactúe con la representación de la página web. Entonces, los dos métodos para hacer esto son Async y defer.

Si desea comenzar con Async, debe agregar la siguiente etiqueta de secuencia de comandos.

Con esto, su navegador recibe una actualización de que el navegador debe cargar el script de forma asíncrona. Para ser exactos, el navegador descarga sus recursos tan pronto como se topa con el código, pero analiza el HTML mientras el recurso aún se está descargando.
Mientras que, por otro lado, puede elegir el segundo método Defer atributo. Entonces, agregue el script dado.

Con esta etiqueta, le indicará a su navegador que no descargue los recursos hasta que haya completado el análisis de la página web. Una vez que se completa el proceso, descarga los scripts diferidos con los que tropezó anteriormente.

La principal diferencia que está a punto de comprobar cuando se descargan ambos recursos. Para el mejor uso de ambos se debe consultar la aplicación web.

Si su aplicación web es compacta, debe optar por diferir, mientras que si tiene pocos scripts, Async es lo mejor. Bueno, no encontrarías ninguna diferencia en ambos, pero la verdad es que defer es para archivos grandes y Async es para archivos pequeños.

Para conocer mejor la diferencia entre Async y defer, hemos compartido un ejemplo. sigue leyendo

Suponga que tiene dos scripts Java JS1 y JS2. Y existe la condición de que JS2 aparezca en el código después de JS1, lo que significa que JS2 depende de JS1, pero es más grande que JS2.

Si está utilizando Async, existe la posibilidad de que JS2 pueda terminar su descarga antes que JS1. Esto puede conducir a un error ya que JS2 se ejecuta en ausencia de JS1

Y si está utilizando aplazar los scripts JS1 y JS2, descárguelos correctamente y no cause ningún error.

Por lo tanto, diferir es mejor para cargar scripts y mejorar la velocidad del sitio web o el tiempo de carga.

Razones por las que necesita aplazar el análisis de JavaScript

Como dijimos anteriormente, si desea clasificarse en la primera página de Google, debe tener una alta velocidad de carga de la página web. Aproximadamente, una página debe cargarse en 2-3 segundos. Desafortunadamente, JavaScript representa la calidad de la página y se pierde mucho tráfico.

Retrasar la carga de una página puede afectar su sitio web de muchas maneras. Afortunadamente, el análisis diferido de JavaScript puede ayudarlo a resolver este problema. Échale un vistazo y comprueba las razones por las que te puede ayudar.

Aumentar los rankings de búsqueda

Cada vez que Google evalúa el rendimiento de su sitio web para el ranking de búsqueda, el factor más importante que Google verifica es el tiempo de carga del sitio. Si su sitio web carga más rápido, aparecerá naturalmente en la primera página de resultados de búsqueda.

Según la investigación, descubrimos que 1 de cada 2 personas esperan a que se cargue el sitio web; de lo contrario, pasan a la segunda fuente. Además, Google favorecerá solo aquellos sitios web que no molesten a sus lectores y les brinden la mejor experiencia de usuario.

Y si su sitio web tarda más de 4 segundos en cargarse, afecta negativamente el rendimiento de su sitio web. Por lo tanto, es importante trabajar en JavaScript. Y diferir es solo la forma inteligente de aumentar la velocidad del sitio de normal a súper.

Para obtener los mejores resultados, debe seguir las técnicas de SEO para impulsar su contenido y optimizar la velocidad de la página.

Aumentar la tasa de conversión

Otra razón importante por la que su sitio web debe diferir si desea mejorar la tasa de conversión. Si el sitio web se carga lentamente, hay posibilidades de que sus clientes salten a otras fuentes y pierda tráfico y ventas.

Los usuarios tienen prisa, a menudo les encanta seguir el sitio que les muestra información rápida. Y si el sitio funciona lento, será frustrante para ellos y es posible que no vuelvan a visitar su página. No importa en qué sitio o blog estés trabajando.

Su trabajo es ofrecer lo mejor a sus usuarios. La investigación en Hubspot revela que los tiempos de carga del sitio web a menudo reducen la tasa de conversión en un 7%. Con la técnica de análisis diferido de JavaScript en WordPress, puede aumentar la velocidad de su sitio más rápido, lo que mejora aún más la tasa de conversión.

Sorteo Mejor Experiencia de Usuario

No creemos que necesite una explicación de este motivo. Es bastante natural si la velocidad de su sitio es buena y los usuarios disfrutan del contenido de su sitio, puede esperar que sus visitantes estén contentos con el sitio.

Y si su sitio tarda más tiempo en cargarse de lo normal, los usuarios abandonarán su sitio y mejorará la tasa de rebote.

Con Defer Parsing of JavaScript en WordPress, puede actualizar los archivos Java que lo ayudan a cargar rápidamente el contenido principal del sitio web. Este esquema de carga rápida lo ayuda a acelerar el sitio web que mejora la experiencia del usuario.

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

Ahora hemos llegado a nuestra sección principal del artículo. Aquí aprenderá las cinco técnicas brillantes que lo ayudarán a acelerar el sitio, ofrecer la mejor experiencia de usuario y brindarle una ruta para clasificarse en primer lugar.

Entonces, conozcamos los métodos.

Para diferir el análisis de JavaScript, las tres rutas importantes que puede elegir son el complemento, el método varvy y el archivo functions.php. Con estas rutas, puede aplicar los cinco métodos dados.

Método 1: uso del complemento JavaScript asíncrono gratuito

En WordPress, Async JavaScript es un complemento gratuito que ayuda a erradicar el JavaScript que bloquea el renderizado en la carga de contenido.

Con este complemento, puede disfrutar del control total sobre Java Scripts y Async o diferir puede contribuir fácilmente a aumentar la velocidad del sitio y mejorar su rendimiento en las páginas de búsqueda. Sin embargo, hay algunas sugerencias que deberá seguir al elegir Async y diferir.

Async puede descargar JavaScript mientras analiza archivos HTML, pero luego detiene el análisis de HTML para llevar a cabo los archivos JavaScript.
Defer puede descargar los archivos JavaScript mientras analiza los archivos HTML, pero espera a ejecutar los archivos después de completar el análisis HTML.

Ahora pasemos a una guía paso a paso para diferir el análisis de JavaScript en WordPress usando el complemento Async.

Abra el panel de control de WordPress y vaya a la pestaña de complementos.
En la pestaña del complemento, haga clic en el botón Agregar nuevo y busque el complemento Async JavaScript.
Cuando encuentre el complemento, haga clic en el botón de instalación y actívelo.
Entonces, cuando se complete la instalación, vaya a la configuración y realice los cambios necesarios.
Marque la opción Habilitar JavaScript asíncrono y elija diferir como JavaScript asíncrono.
Para las funciones avanzadas, marque la marca y elija el script que desea aplicar: etiquetas asincrónicas y diferidas.
Aquí puede elegir los scripts que desea incluir y excluir. Además, también puede elegir los complementos y temas que desea excluir de los cambios realizados por Async JavaScript Plugin.
Una vez completados los cambios, guarde los cambios

Método 2: Usar el complemento WP Rocket

Si no has oído hablar del complemento WP Rocket antes, tómalo ahora. WP Rocket es uno de los complementos más modernos que puede ayudar a que su sitio web se cargue rápidamente en segundos.

Además, con este complemento puede recibir el almacenamiento en caché de la página, la carga previa del caché, la compresión y muchas otras funciones interesantes.

Mientras que, por otro lado, el complemento también lo ayuda a diferir el análisis de JavaScript en la pestaña de optimización de archivos.

Así es como puede instalar y usar el complemento.

Abra el panel de control de WordPress y redirija a la pestaña del complemento
Ahora haga clic en el botón Agregar nuevo y busque el complemento WP Rocket.
Toque instalar y active el complemento.
Luego vaya a la configuración y abra la optimización de archivos desde el menú para comenzar.
Ahora desplácese hacia abajo en los archivos JavaScript y marque la opción Cargar JavaScript diferido y habilite el modo seguro para Consulta.
Cuando se complete todo el proceso, vaya al final de la página y haga clic en la opción Guardar cambios.

Método 3: usar el complemento W3 Total Cache

W3 Total Cache es otro de los mejores complementos que puede usar para diferir el análisis de JavaScript en WordPress. Este complemento de WordPress es simplemente útil para mejorar la experiencia del usuario y el SEO de su sitio web. Además, mejora el rendimiento del sitio web y reduce el tiempo de carga al aprovechar la CDN (integración de entrega de contenido).

El caché total W3 es muy efectivo y seguro de usar. Además, puede usar este complemento para diferir el análisis de JavaScript en WordPress. Así es como puede usar este complemento.

Primero visite el tablero de WordPress y salte a la página de complementos.
Luego, agregue un nuevo botón y busque el complemento de caché total W3.
Una vez que se encuentra el complemento, haga clic en el botón instalar y activar.
Ahora el complemento está instalado. Vaya a la configuración general y de rendimiento de WordPress.
Luego, desplácese hacia abajo en el tablero y salte a la sección minificar y marque la opción habilitar.
Además, puede marcar la opción manual desde el modo minimizado y hacer clic en la opción de guardar para continuar.

Minificar código
Dirígete a la pestaña de rendimiento y elige la pestaña minificar de la barra lateral izquierda y desplázate hacia abajo hasta el encabezado JS, allí puedes buscar la sección de operaciones y área con dos etiquetas HTML.

Minificar opciones de configuración
Elija el no bloqueo usando la opción de aplazamiento e incruste el tipo de código antes etiqueta.

Configuración de minificar JS

En la configuración, puede ver la administración de archivos JS donde debe seleccionar el tema de WordPress.
Luego haga clic en la opción Agregar un script para incluir la URL de JavaScript que desea analizar.
Puede agregar tantas URL como desee tocando el botón Agregar un script.
Cuando se completen los cambios, haga clic en el botón Guardar configuración y en el botón Cachés puros para continuar.
Una vez hecho esto, desplácese hacia abajo en la sección CSS.
Ahora haga clic en el botón Agregar una hoja de estilo.
Luego, en la administración de archivos CSS, inserte las URL de la hoja de estilo.
Puede agregar más de uno según las sugerencias que le proporcionen las herramientas de monitoreo.
Ahora, ha completado los cambios, así que guarde la configuración y el botón de cachés puros.

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

Otro mejor método que puede optar por el análisis diferido de JavaScript en WordPress es elegir Vary, esto utiliza un script para llamar al archivo JavaScript externo una vez que se carga la página inicial.

Esto significa que los navegadores no descargan ni ejecutan JavaScript hasta que no se carga la página web. Sin embargo, este método es sugerido por Patrick Sexton.

Para usar este método, puede modificar el fragmento de código que proporciona varvy y luego agregarlo al editor de temas en la sección del cuerpo.

Entonces, aquí está el código que puede agregar en la parte del cuerpo de su tema para aplazar el análisis de JavaScript en WordPress.

<Tipo de script= “texto/javascript”>
Función descargarSAtOnload() {
var elemento = document.createElement ("Script");
elemento.src = "aplazar .js"; documento.cuerpo.appendChild (elemento);
}
Si
(ventana.addEventListener) ventana.addEventListener (“cargar',
descargarJSAtOnload, falso);
más si
(ventana.adjuntarEvento)
Window.attachEvent (“onload”, descargarJSAtonlaod;
</script>

Mientras hace esto, asegúrese de haber cambiado defer.Js al nombre del archivo JavaScript externo. Luego, después de usar Wp_footer para inyectar el código a través del archivo functions.php del tema del niño.

Aquí está el código que tienes que usar.

/**
Aplazar el análisis de JavaScript con un fragmento de código de Varvy
*/
Add_action ('wp_footer', 'my_footer_scripts');
Función
Mis_guiones_de_pie de página(){
?>
REEMPLAZAR_CON_VARVY_SCRIPT
<?php
}

Ahora estamos avanzando en nuestra guía paso a paso para el sentido claro.

Vaya a su panel de WordPress y vaya a la apariencia y luego al editor de temas.
Navega por el archivo header.php y luego pega el código mencionado antes y después de la sección del cuerpo.
Luego haga clic en la opción de actualizar archivo.

Método 5- Usando el archivo functions.php

Si lo olvida, permítanos recordarle que no puede agregar scripts directamente a WordPress a través de HTML. En su lugar, debe usar las funciones incorporadas de WordPress para solicitar los recursos y también hacer una copia de seguridad de su sitio.

Debe usar el atributo diferido para los archivos JavaScript agregando el fragmento de código a su archivo functions.php.

Para completar el proceso, abra el editor de temas y vaya al archivo functions.php para agregar el código dado.

Función
Defer_parsing_of_js ($url) {
Si (
Usuario_ está_ conectado_en() )
Devolver $url; // no rompa el administrador de WP
Si ( FALSO ===
Strops( $url, '.js' ) )
Devolver $url;
Si ( strops ($url, 'jquery.js' ) ) devuelve $url;
Return str_replace(' src', 'defer src', $url);
}

Añadir filtro (
'script_loader_tag',
'defer_parsing_of_js', 10
);

Este código ayuda a WordPress a agregar el atributo diferido a los archivos JavaScript excepto JQuery.

Aquí está el código que puede usar para sincronizar los atributos diferidos con sus archivos JavaScript a través del archivo functions.php.

Agregar_filtro ('secuencia de comandos _loader_tag',
'add_defer_tags_to_scripts');
 
Función
add_defer_tags_to_scripts ($tyag) {
#list scripts para agregar atribuidos a $scripts_to_defer = array ('script_a', script_b');
$scripts_to_async = matriz ('script _c', 'script_d');
#añadir las etiquetas de aplazamiento a la matriz scripts_to_defer
Foreach ($scripts_to_defer as $current_script) {
Si (verdadero == correas ($etiqueta,
$script_actual) )
volver
Str_replace ('src,'defer=”defer” src','$tag);
}
#añadir las etiquetas asíncronas a la matriz scripts_to_async
Foreach ($scripts_to_async como $current_script) {
Si (verdadero == correas ($etiqueta,
$script_actual) )
Regreso
Str_replace ('src,'defer=”
Async=”async” src', $etiqueta);

}
Devolver $etiqueta;
)

No olvide que debe poner en cola cada código, de modo que uno debe agregar el siguiente código.

Agregar_acción ('wp_enqueue_scripts',
'encolar_personalizado_js');
Función
Poner en cola_ 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_ds',
Get_stylesheet_directory_uri (), '/script_d.js');
}

Cuando haya actualizado todos los códigos en el archivo functions.php, actualice el archivo y vea los cambios. Aquí hay una guía paso a paso para actualizar el archivo.

Abra el panel de control de WordPress y avance a la apariencia y luego al editor de temas.
Navegue por el archivo functions.php y luego pegue los códigos mencionados anteriormente.
Luego haga clic en la opción de actualizar archivo.

Los plugins alternativos a Defer Parsing of JavaScript en WordPress

Además de Async y aplazar, tiene dos opciones de complementos más Aplazar el análisis de JavaScript en WordPress.

Paquete de refuerzo de velocidad

Este es otro mejor complemento de WordPress que puede usar para mejorar fácilmente la velocidad del sitio web y optimizarlo para los usuarios. Háganos saber sus pros y sus contras.

Ventajas:

Es simple y fácil de usar por cualquier persona debido a la interfaz de usuario interactiva.
Esto ayuda en la optimización de JavaScript, la carga deficiente y la integración de CDN.
Esto se actualizará regularmente y eliminará la amenaza de errores.

Contras:

Esto podría crear problemas al usar otros complementos.

JavaScript asíncrono

Este complemento permite cargar fácilmente todos los scripts de Java que se agregan como wp_enqueue_script() usando LABJS. Háganos saber sus pros y sus contras.

Ventajas:

Es un complemento muy fácil de usar.
Es más popular en el mercado de complementos.
Diseñado para diferir el análisis de JavaScript en WordPress

Contras:

Actualizaciones irregulares
Tal vez incompatible con versiones más nuevas de WordPress
Puede causar problemas a otros complementos

Preguntas frecuentes

¿A qué te refieres con aplazar el análisis?

El análisis diferido es el estado en el que los archivos JavaScript se cargan después del contenido del sitio web en el navegador. Esto significa que defer no participará en la carga y el renderizado.

Entonces, cuando un usuario solicita su sitio web en el navegador, el análisis diferido de JavaScript no espera para cargar JavaScript en el navegador y muestra el contenido de inmediato. En palabras simples, su contenido se muestra primero y luego se carga.

¿Cómo eliminar el bloqueo de procesamiento del sitio web de WordPress?

Uno de los enfoques exitosos para eliminar el bloqueo de procesamiento del sitio web es aplazar el análisis antes que los otros elementos del sitio web. Otro método para minimizar el renderizado es concatenar JS y CSS juntos.

¿Qué herramientas puedo usar para identificar JS no crítico en mi sitio?

Para identificar si JavaScript es crítico para tu sitio web o no, puedes acceder a las siguientes herramientas.

Información de Google PageSpeed: esto lo ayudará a identificar los puntos principales que faltan en la velocidad y el rendimiento de su sitio web. Además, esta herramienta también ofrece algunas sugerencias para mejorar el rendimiento de su sitio y el tiempo de carga.
Con esto tu sitio recibirá puntajes en diferentes colores como rojo, naranja y verde. El rojo mostrará un rendimiento bajo, del mismo modo que el naranja revelará el promedio y el verde para el bien.
Prueba de velocidad del sitio web de Pingdom: es otra herramienta popular para rastrear y monitorear el rendimiento. Con esta herramienta, puede probar el rendimiento de su sitio web en siete ubicaciones diferentes.
Además, esta herramienta también ofrece sugerencias para mejorar la velocidad de la página para que pueda disfrutar de una mejor velocidad y rendimiento del sitio web.

¿Puede diferir el análisis de JavaScript en WordPress a través del complemento Auto Optimize?

Con la herramienta de optimización automática, puede diferir fácilmente el análisis de JavaScript. Para garantizar el proceso, debe instalar y activar el complemento como de costumbre. Una vez que el complemento esté instalado y activado, visite la configuración y opte por la opción JS, CSS y HTML.

Ahora optimice la opción de código JavaScript y desbloqueará las opciones. Ahora marque los archivos JS agregados y deje otros.

Además, el complemento le permite excluir el JavaScript que no desea procesar. Una vez realizados los cambios, haga clic en el botón Guardar.

Terminando
Para optimizar su sitio web y reducir el tiempo de carga, es importante aplazar el análisis de JavaScript en WordPress.

Esperamos que con este artículo haya entendido el significado del análisis de ciervos y cómo puede ayudar a su sitio web a clasificarse en la parte superior de las páginas de búsqueda. ¡Buena suerte!