Diferir el análisis de Javascript: 5 formas de solucionarlo y aumentar la velocidad (2024)

Como alguien que está tratando de entender cómo diferir el análisis de Javascript, creemos que tiene un problema. Es propietario o ha visitado un sitio web de alguien que conoce (¿tal vez un cliente?) Y tarda una eternidad en cargar. Y cuando lo ejecutó a través de las herramientas de prueba de velocidad del sitio web, recibió una recomendación que no está seguro de cómo implementar.

En este artículo, vamos a compartir varias formas de aplazar Javascript y corregir esta advertencia y, en última instancia, hacer que el sitio web se cargue más rápido, ¡sin arrojar este error!

Si tiene poco tiempo, aquí hay algunas acciones rápidas que puede hacer:

Instrucciones para aplazar el análisis de JavaScript

1. Descarga el complemento Async esta página.
2. Haga clic en Complementos> Agregar nuevo> Subir complemento y seleccione el archivo que acaba de descargar.
3. Haga clic en Activar del complemento instalado.
4. Vaya a Complementos y haga clic en Ajustes para el complemento Async que acaba de instalar.
5. Al hacer clic en Habilitar JavaScript asíncronoo Aplicar Async como dos de las formas más comunes de aplicar la corrección.
6. Pruebe su sitio web para ver que todo sigue funcionando bien.

¿Por qué es importante el procedimiento para implementar el análisis diferido de Javascript? Si no aplaza el análisis de Javascript, parecerá que su sitio web se carga lentamente. Javascript es esencialmente un bloque de construcción importante en el lenguaje de la web, permite a los desarrolladores web crear una funcionalidad "dinámica".

Sin embargo, en la mayoría de los casos, los archivos Javascript tienden a ser bastante grandes. También pueden ingresar desde servidores de terceros. Esto hace que la descarga sea lenta. Pero esto es solo la mitad del problema.

El mayor problema es que si no hay un análisis diferido de Javascript, el navegador está BLOQUEADO para que no muestre contenido. El sitio web NO RENDE. ¿Y cómo se ve esto para un usuario? Parece que el sitio está lento, roto o completamente muerto. 

El problema se agrava en los dispositivos móviles, donde la potencia de procesamiento disponible, junto con el ancho de banda disponible, hacen que la experiencia sea aún peor.

¿Y qué harán los usuarios que obtengan tal experiencia? Rebotarán fuera de su sitio web, ¡para nunca regresar!

Si ha estado en la industria web por un tiempo y está tratando de mejorar el SEO de su sitio web, ya sabe que el rendimiento del sitio web es crucial para mejorar la visibilidad de su motor de búsqueda.

Y si ha utilizado Google PageSpeed ​​Insights para comprobar su sitio web, además de "diferir el análisis de Javascript", hay advertencias aún más crípticas, como la que dice "Eliminar los recursos que bloquean el procesamiento".

¡Este aspecto técnico parece tener el mayor impacto en la velocidad de carga! 

¡¿Eliminar?! Pero, ¿cómo se supone que voy a eliminar estos archivos cruciales de mi sitio web?

No se preocupe, estamos aquí para ayudarlo a corregir estas advertencias, resolver estos problemas y, en última instancia, hacer que sus páginas se carguen más rápido.

Porque tú no tienes que quitarlos. Todo lo que tiene que hacer es aplazar el análisis de JavaScript.

Eche un vistazo a este breve video a continuación para ver lo simple que es diferir el análisis de Javascript usando uno de los métodos a continuación:

En términos no geekspeak, lo que esto significa es que necesita modificar algunas cosas en su WordPress, para permitir que la página deje que su contenido se cargue primero antes de cargar o analizar sus archivos JavaScript. 

Esto se debe a que, si no aplaza el análisis de Javascript, renderizar el sitio web se convierte en una operación muy pesada y, como dijimos anteriormente, el sitio web se verá como si estuviera roto.

Para asegurarnos de que el usuario permanezca en el sitio, nos gustaría hacerles saber que algo está sucediendo realmente y mostrar el contenido al usuario, en lugar de esperar a que el navegador haga todo el trabajo pesado antes de mostrarle algo al usuario. . 

Por cierto, si está buscando hacer que su WordPress sea rápido, hay algunos complementos como esta que puede marcar una diferencia real en el rendimiento en unos pocos minutos (con poco o ningún esfuerzo).

Si estás interesado, WP Rocket puede configurar el análisis diferido de Javascript y muchos otros ajustes para hacer que su sitio sea más rápido, simplemente haga clic en el banner a continuación para verlo. 

¿No estás listo para usar un complemento por ahora? Sigue leyendo ... 

¿Qué es el análisis diferido de JavaScript?

Aplazar el análisis de JavaScript significa utilizar "defer"O"async"para evitar el bloqueo de procesamiento de una página. Este comando HTML indica al navegador que ejecute / analice los scripts después (diferir) o de forma asíncrona (en paralelo) a la carga de la página. Esto permite que el contenido se muestre sin esperar a que se carguen los scripts .

Al configurar el análisis diferido de JavaScript, podrá permitir que su contenido se cargue más rápido y con alta prioridad.

¿Por qué es eso?

Vea a continuación este excelente explicador que demuestra cómo se cargan las páginas web y cómo los archivos JavaScript obstaculizan enormemente el tiempo de carga de su sitio web.

Continuando con el video anterior, echemos un vistazo breve a lo que sucede cuando alguien visita su sitio web: 

1. Cuando un usuario hace clic en un enlace que apunta a su sitio web, el navegador del usuario lo solicitará a su servidor, que luego su servidor "servirá" al navegador de su usuario.
2. El navegador del usuario luego recibe y ve el contenido HTML de su página web y comenzará a renderizarlo. Comenzará a construir su página web de arriba a abajo.
3. Si encuentra archivos JavaScript en el camino, el navegador se detendrá y los buscará (si es un archivo externo), luego lo analizará
4. Solo después de obtener y analizar completamente cada script, continuará cargando el resto de su contenido.

Probablemente ya esté empezando a ver dónde está el problema.

Cuando sus páginas tienen muchos archivos JavaScript, puede afectar enormemente el tiempo de carga de su sitio web, de manera negativa.

El navegador de su usuario mostrará continuamente el ícono de carga o la rueda giratoria mientras analiza y carga sus scripts antes de que muestre su contenido real, esto especialmente visible en navegadores móviles o usuarios con conexiones de datos de baja velocidad.

Si toma más de unos segundos, especialmente si está sirviendo sus scripts desde un servidor externo (y ese servidor tiene problemas en este momento), sus visitantes comenzarán a ponerse nerviosos.

Durante ese tiempo, su usuario no ve nada más que una página en blanco en blanco. ¿No es esa una de las cosas más frustrantes de Internet? Se supone que todo es instantáneo en la web, ¿por qué tienen que esperar a que se cargue tu página?

Si un usuario espera más de 4 segundos, comenzará a ponerse nervioso. Más allá de los 8 segundos y su sitio web está casi muerto, el usuario se irá a otro sitio web.

Ha perdido un visitante y probablemente su negocio. 

La complicación adicional es que muchas veces, estos archivos JS se agregan a su sitio web mediante complementos y temas esenciales que ha instalado, por lo que no puede deshacerse de ellos fácilmente.

Entonces, ¿qué hace usted?

Para resolver esto, debe posponer el análisis de JavaScript. Esto funciona analizando sus scripts una vez que se ha cargado el contenido principal. Consulte la imagen a continuación para ver exactamente el impacto en el tiempo de carga. Como podemos ver, el comando defer obliga al navegador a ejecutar Javascript más tarde, mientras que el async permite que sucedan cosas en paralelo a la descarga.

Por lo tanto, cuando un usuario visita su sitio, su navegador continuará analizando todo de arriba a abajo, pero omitirá sus archivos JavaScript para más adelante. De esta manera, sus usuarios podrán ver su contenido de inmediato sin tener que esperar. 

Si ha visto el vídeo anterior, ha visto que los atributos "async" y "diferir" son de gran ayuda.

Pero, ¿cómo harías eso en WordPress? Además, ¿cuándo es el momento adecuado para usarlos? ¡Veamos y comencemos!

Analiza tu sitio web

Antes de comenzar, debe saber si debe implementar la corrección de Javascript diferido en su sitio o no. Para saber si es necesario, puede utilizar varias herramientas que están disponibles en línea.

Algunos ejemplos son los siguientes:

1. GTMetrix

Este funciona al verificar las métricas de PageSpeed ​​e Yslow y le brinda una puntuación de F a A. También le brindan recomendaciones y consejos sobre cómo mejorar su sitio web si se encuentran problemas. Específicamente le dirá si necesita posponer el análisis de JavaScript. 

Generalmente, la puntuación debe ser de al menos 71.

La siguiente imagen muestra un sitio web que no necesita aplazamiento. 

2. Herramientas de PageSpeed

PageSpeed ​​Insights, una herramienta desarrollada por Google, es otra herramienta integral que le brinda información completa sobre los problemas de rendimiento de su sitio junto con consejos para solucionarlos como GTMetrix.

Una de las mejores cosas de esta herramienta es que incluye enlaces a guías y recursos detallados para ayudarlo a solucionar todos sus problemas de rendimiento. La siguiente imagen muestra un sitio web que necesita urgentemente implementar el análisis diferido de JavaScript.

3. Herramientas Pingdom 

Otra popular herramienta de prueba de rendimiento de sitios web que está disponible gratuitamente para todos.

Aunque no parece indicarle explícitamente si necesita aplazar el análisis de JavaScript, puede verificar cuánto tiempo tardaron en cargar sus scripts gracias a su página de resultados completa.

La imagen a continuación muestra un sitio web que tiene casi la mitad de su página que consta de JavaScript, un gran indicador de que es posible que desee aplazar sus scripts. 

4.  Velocidad de página de Varvy 

Otra excelente herramienta que le dirá si su sitio tiene scripts de bloqueo de renderizado.

Lo mejor es que te permite saber exactamente cuáles son, como en la imagen de abajo: 

¡Está bien, genial!

Ahora tiene acceso a herramientas que pueden ayudarlo a determinar si necesita implementar el análisis diferido de archivos JavaScript.

Pero es posible que se pregunte por qué no simplemente implementarlo y dejarlo en paz. Si aplaza el análisis de JavaScript de forma incorrecta, se pueden romper cosas y puede ser frustrante arreglarlo si no eres un experto en tecnología.

Simplemente activar el modo de aplazamiento no significa que todo esté configurado para olvidarse y funcionará bien. Tendrá que comprobar si lo ha hecho bien y asegurarse de que todo sigue funcionando según lo previsto. 

Por ejemplo, si usa jQuery, debe elegir cuidadosamente cuál de sus scripts debe posponer porque parece haber un problema con diferir y jQuery.

Además de eso, encontrará que hay toneladas de preguntas en Stack Overflow sobre jQuery, async y defer, que a menudo se trata de cómo debe implementar defer y async, si es necesario, a sus scripts que dependen de jQuery. 

¿Entonces cuales son los resultados? ¿Necesitas aplazar tus guiones?

Si es así, ¡descubramos ahora cómo diferir JavaScript en WordPress!

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

Aplazar el análisis de JavaScript en WordPress puede ser bastante sencillo.

Puede instalar uno de los miles de complementos en el repositorio de WordPress y listo. Pero también hay formas avanzadas de hacerlo si necesita más control, especialmente si está utilizando scripts complejos para hacer que su sitio sea más atractivo e interactivo. 

En esta sección, vamos a comprobar cinco formas diferentes de realizar el análisis diferido de JavaScript en WordPress: a través de complementos, a través de functions.php y editando el código manualmente. 

Hay tantos complementos en el repositorio de WordPress que pueden ayudarlo a mejorar el rendimiento de su sitio web.

Hay algunos que se dedican a una tarea en particular, como minificar su código HTML y hay complementos que intentan incorporar todos los ajustes relacionados con el rendimiento en un solo complemento, como tener la capacidad de minimizar y diferir archivos CSS y JavaScript, implementar y aprovechar el almacenamiento en caché del navegador. (que hemos cubierto ampliamente en este artículo) y más. 

Sin embargo, no todos los complementos son iguales. Algunos funcionan muy bien, otros funcionan bien y otros no funcionan en absoluto e incluso pueden romper algunas o todas las funciones de su sitio. 

(Si prefiere que alguien con experiencia maneje esto por usted, puede hacerlo usando un concierto barato de Fiverr haciendo clic en el botón a continuación).

1. Aplazar el análisis de JavaScript mediante el complemento Async

Hablando honestamente, le recomendamos encarecidamente que opte por un complemento premium (que es muy barato), pero puede estar seguro de solucionar no solo esta advertencia, sino una amplia gama de problemas de velocidad de carga del sitio web.

Comenzaremos con uno de los más populares que están destinados a hacer un solo trabajo definido en este artículo.

Una de las opciones más populares para realizar este trabajo es Async Javascript. Este complemento se enfoca en mejorar el rendimiento de su sitio modificando la forma en que se cargan sus scripts y, como WP Rocket a continuación, también viene con funciones avanzadas adicionales que le permiten excluir ciertos scripts para que no se difieran.

Estos son los pasos que debe realizar para utilizar este complemento.

1. Descarga el complemento Async esta página.
2. Haga clic en Navegue hasta Plugins > Añadir nuevo en el backend de WP.
3. Haga clic en Subir complemento y seleccione el archivo que acaba de descargar.
4. Alternativamente, busque Async Javascript y haga clic en Instalar ahora .
5. Haga clic en Activar del complemento instalado.
6. Vaya a Complementos y haga clic en Ajustes para el complemento Async que acaba de instalar.
7. Sugerimos hacer clic en Habilitar JavaScript asíncronoo Aplicar Async como dos de las formas más comunes de aplicar la corrección.
8. Si estos no funcionan, puede probar algunas combinaciones diferentes.
9. Pruebe su sitio web para ver que todo sigue funcionando bien.

Quizás una de sus fortalezas es que, además de la capacidad de excluir ciertos scripts para que no se difieran, también tiene la opción de elegir qué scripts se diferirán en su lugar:

También puede notar que tiene la opción de realizar una sincronización o aplazar una secuencia de comandos. Para obtener más información sobre la diferencia entre los dos, puede leer este artículo.

Una característica única de este complemento es que puede especificar que se excluya un determinado tema o complemento.

También hay una opción para integrar GTMetrix en su sitio para que siempre pueda verificar su rendimiento. Sin embargo, tenga en cuenta que cada vez que realice una prueba, se deducirá un crédito de API de su cuenta de GTMetrix.

Mientras que algunas personas recomendarán JavaScript diferido de WP, este complemento no se ha actualizado durante más de 3 años y no se ha probado con las últimas 3 versiones principales, por lo que le recomendamos que no utilice este. Puede que aún funcione, pero no ha sido probado, por lo que es un riesgo que no debe tomar.

Si tiene un sitio relativamente simple y está buscando mejorar aún más sus tiempos de carga, entonces esto podría ser justo lo que necesita. Este complemento no requiere ninguna configuración, solo instálelo, actívelo y olvídese.

Nuevamente, tenga en cuenta que este no se recomienda para sitios complejos como el comercio electrónico debido a la falta de opciones avanzadas de ajuste y debido a su antigüedad. Poder ajustar las opciones de aplazamiento de JavaScript es crucial para sitios grandes y complejos.

2. WP Rocket

Actualmente, el complemento de rendimiento líder de WordPress, WP Rocket ofrece no solo la capacidad de diferir el análisis de archivos JavaScript, sino también sus archivos CSS. Además de eso, obtienes toneladas de otras opciones de mejora del rendimiento.

Algunas características incluyen las siguientes: 

• Minificación: reduce el tamaño del código de su sitio para que se cargue más rápido. Lo hace eliminando espacios en blanco y otros caracteres innecesarios del código sin afectar su funcionalidad principal.
• Concatenación: combina varios archivos CSS y JavaScript en uno.
• Carga diferida: este es el modo diferido para archivos de video y otro contenido multimedia como imágenes. Retrasa la carga de estos archivos que consumen muchos recursos hasta que el usuario se desplaza hacia abajo hasta ellos.

Una de las mejores cosas de WP Rocket es que una vez que lo instalas y lo activas, puedes dejarlo solo y automáticamente obtendrás ganancias de rendimiento.

Sin embargo, puede configurar ajustes avanzados para aumentar aún más el rendimiento, pero tenga en cuenta que algunos de ellos pueden tener efectos adversos en su sitio. Y debido a eso, su opción de aplazamiento para archivos JavaScript y CSS no está habilitada de forma predeterminada porque si se hacelessly, pueden romper cosas.

Afortunadamente, puede excluir ciertos scripts de ser aplazados.

Puede intentar excluir todos sus scripts primero y luego posponer el análisis de los archivos Javascript uno por uno hasta que encuentre el problemático. Ellos tienen amplia documentación para ayudarte con eso. De esta manera, podrá maximizar las mejoras de rendimiento sin romper o sacrificar algunas o todas las funcionalidades de su sitio web.

WP Rocket es un complemento premium, pero dado el precio y la funcionalidad proporcionados (no solo diferir y asincronizar archivos JS, sino muchas otras optimizaciones que son garantia para hacer que su sitio web sea más rápido), creemos que vale la pena el precio.

Descargar WP Rocket

3. Paquete de refuerzo de velocidad

Otro gran complemento de rendimiento todo en uno que le permite diferir el análisis de archivos Javascript es Paquete de refuerzo de velocidad. Es similar a WP Rocket en términos de características, pero es gratis. Tiene la mayoría de las características básicas de WP Rocket, como minificación, aplazamiento, eliminación de archivos innecesarios, etc.

A continuación, puede ver algunas de las funciones disponibles en el complemento: 

En la pestaña Avanzado, puede optar por excluir algunos scripts para que no se muevan al pie de página o que se aplacen o ambos. Sin embargo, solo puede agregar hasta 4 scripts excluidos, lo que sin duda es una limitación para sitios grandes y complejos. 

En general, es una buena alternativa gratuita a WP Rocket, adecuada para sitios pequeños.

4. Uso de los ajustes de functions.php

¿Qué pasa si no desea utilizar complementos?

Hay otro truco que puede hacer para diferir el análisis de Javascript en WordPress y es editando el archivo functions.php de su tema.

Simplemente copie el código a continuación y péguelo en la parte inferior del archivo function.php de su tema: 

function defer_parsing_of_javascript ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_javascript', 11, 1 ); 

Tenga en cuenta que podría estropear su sitio si lo hace mal, así que preste mucha atención y asegúrese de que está editando el archivo correcto en el tema correcto y que está pegando el fragmento de código en la ubicación correcta. Asegúrese de no borrar / cambiar nada más.

Afortunadamente, puede crear un tema hijo para realizar ediciones seguras en su archivo functions.php. Además de eso, si alguna vez reemplaza o actualiza su tema, puede retener fácilmente todas sus ediciones personalizadas en el archivo. Aquí hay un gran artículo que explica cómo crear un tema hijo. Una vez que haya creado un tema secundario, simplemente pegue el fragmento de código en el archivo function.php del niño, guárdelo y todo estará listo.

Leer más: El bloqueo de mensajes está activo

5. Modifique su código manualmente

Esto puede sonar aterrador, especialmente si no le gusta la codificación, pero para los usuarios avanzados, ajustar el código manualmente es una excelente manera de diferir el análisis de archivos JavaScript en WordPress. 

varvy tiene un excelente fragmento de código que permite que el contenido inicial de su página web se cargue por completo antes de cargar cualquier otro script externo. El fragmento de código se encuentra a continuación:

  function downloadJSAtOnload () {
    var element = document.createElement ("script");
    element.src = "//www.yourdomain.com/defer.js";
    document.body.appendChild (elemento);
  }
  si (window.addEventListener)
    window.addEventListener ("cargar", descargarJSAtOnload, falso);
  más si (ventana.adjuntarEvento)
    window.attachEvent ("onload", downloadJSAtOnload);
  else ventana.onload = descargarJSAtOnload;

Reemplace defer.js con su propio archivo de secuencia de comandos. Una vez que lo haya editado para reflejar su propia secuencia de comandos, péguelo justo antes de su HTML etiqueta. En WordPress, puede hacerlo editando el archivo footer.php de su tema.

Nuevamente, se recomienda utilizar un tema hijo si tuviera que crear ediciones en sus archivos de tema. Una pequeña nota: editar footer.php a través del tema hijo es diferente de functions.php: tienes que copiar el footer.php completo de tu tema principal junto con su contenido al tema hijo y luego hacer / agregar las ediciones. 

Si no quiere ir a la molestia de editar su footer.php, puede usar un complemento llamado Insertar encabezados y pies. 

Simplemente pegue el fragmento de código en el cuadro "Secuencias de comandos en el pie de página", presione guardar y la secuencia de comandos se agregará al área inferior del código de su sitio, arriba de la etiqueta. 

¡Y esas son todas las formas en que puede diferir el análisis de JavaScript en WordPress! Pero, ¿funcionan? ¿Mejoraron el rendimiento de su sitio? ¡Comprobemos los resultados!

Prueba de los resultados

Para probar los resultados, vaya a GTMetrix.com, PageSpeed ​​Insights y Pingdom Tools para ver si su grado de rendimiento y el tiempo de carga mejoraron.

En GTMetrix, su puntuación debe ser de al menos 71. ¡Cuanto más, mejor! A una puntuación perfecta le gustaría esto :-) 

En PageSpeed ​​Insights, busque "primeras pinturas":

Generalmente, cuando esté probando si su implementación de análisis diferido de JavaScript ha dado lugar a que los scripts se aplacen, busque resultados ecológicos en First Contentful Paint y First Meaningful Paint.

Compare antes y después de aplazar y verifique si mejoran.

Para Pingdom Tools, eche un vistazo a la sección de orden de carga y vea si la mayoría, si no todos, de sus archivos de script se cargan al final. Compare antes y después del aplazamiento y observe si los archivos de script cambiaron de posición en el orden de carga (es decir, se cargaron antes o después). 

¿Le satisfacen los resultados? Si es así, ¡buen trabajo! Si no es así, intente experimentar más. Si usó otros métodos en nuestra lista, intente usar complementos avanzados que le permitan personalizar aún más sus opciones de aplazamiento y rendimiento. Además, consulte algunas recomendaciones de Google en la siguiente sección. Puede que te ayuden.

Cómo diferir el análisis de JavaScript mediante un script

Existen diferentes técnicas que puede utilizar para diferir el análisis de JavaScript. La siguiente sección trata sobre lo que debe hacer. 

En resumen, debe realizar lo siguiente:

1. Copie el código a continuación y agréguelo justo antes del etiqueta en su HTML.
2. Reemplace example.js en el código siguiente con el archivo que contiene el script que se aplazará.
3. Guarde los cambios.
4. Pruebe su sitio web para ver el efecto.

Veamos estos pasos con más detalle:

• Use un script para llamar a un archivo JS externo una vez que la página inicial haya terminado de cargarse. En varvy.com, Patrick Sexton sugiere un método que permite que se cargue el contenido del sitio web antes de cargar un JS (para asegurarse de que el usuario pueda ver el contenido primero). Esto asegura que la ruta de carga crítica no se vea afectada por los scripts que causan cualquier bloqueo de procesamiento. El método implica la creación de un archivo externo que no es necesario para mostrar el contenido inicialmente. Luego, agregue el siguiente script justo antes del en el HTML. El siguiente ejemplo usa un archivo example.js, que debería actualizarse en consecuencia. 

  <script type="text/javascript">
      function downloadJSAtOnload() {
          var element = document.createElement("script");
          element.src = "example.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>

  Una vez que la página web termine de cargarse, el script comenzará a descargarse y ejecutarse. ejemplo.js - el problema es que deberá crear el archivo manualmente.

• Usar los atributos async o diferir. La etiqueta JS Asincrónico or aplazar los atributos actúan de manera similar: la forma en que funcionan es tal que minimizan la cantidad de tiempo en que el análisis de HTML se detiene para esperar la descarga y ejecución de los scripts. Asíncrono permite que la descarga de archivos JS se realice de forma asincrónica, en lugar de sincrónica, es decir, se abre un nuevo hilo para descargar mientras HTML continúa analizándose. Aplazar indica al navegador que ejecute el script DESPUÉS de que se haya completado la carga de la página. Esta es otra forma de permitir que se complete el análisis de la página y, por lo tanto, no crear un impacto en el tiempo de carga. Ambas etiquetas minimizan el bloqueo de procesamiento de JS. En el uso de ambos, JS no necesita esperar a que el HTML termine de analizar antes de comenzar a descargarse o ejecutarse, lo que garantiza que la página aún se cargue rápidamente. Vea cómo ocurre la ejecución para async y diferir respectivamente en las imágenes a continuación.
  
  

• Mueva JavaScript al final de su página. La tercera y última sugerencia es mover cualquier <script> etiquetas en la parte inferior de las páginas (especialmente si no son críticas, como anuncios). Este método no es ideal, porque el navegador seguirá ocupado hasta que el último script se haya descargado y analizado por completo. Dado que el navegador parece estar ocupado, es posible que algunos visitantes no interactúen con la página hasta que esté completamente cargada, lo que puede generar una experiencia de usuario potencialmente negativa.

Sugerencias de Google

Google tiene toneladas de recursos para mejorar el rendimiento de su sitio web. Incluso tienen una página dedicada a mejorar el tiempo de carga del script de su sitio, que puede verificar esta página.

En el menú de la izquierda, también puede encontrar otros recursos que le ayudarán a mejorar el rendimiento de su sitio. Asegúrese de consultarlos también si su informe de PageSpeed ​​Insights informó problemas relacionados con ellos.

Para obtener una descripción general, Google sugiere que, en su lugar, debería incluir scripts críticos en línea y asincronizar o aplazar los scripts no críticos. Eso significa que los scripts que su sitio requiere deben estar incrustados en el HTML. Sin embargo, ese es el trabajo de los desarrolladores de temas y complementos de WordPress, pero si tuviera que crear su tema o complemento, tenga esto en cuenta.

Leer más:  Cómo contratar (EXCELENTE) desarrolladores de Javascript

Además de eso, Google también describió una forma de identificar manualmente cuál de sus scripts bloquea la representación de su página web al tener un tiempo de carga muy largo. Puede hacerlo utilizando las herramientas de desarrollo de Chrome. cobertura .

Aplazar CSS no utilizado

Un problema similar que puede ocurrir en estos días, también en la herramienta de información de Pagespeed, es el aplazamiento de CSS no utilizado. Si bien este es un problema similar, sus raíces son algo diferentes. Esencialmente, el CSS debería reestructurarse para solucionar este problema correctamente.

{posición de carga imh-incrustar}

Preguntas frecuentes

¿Cómo soluciono el análisis diferido de JavaScript en WordPress?

Para corregir el aplazamiento del análisis de Javascript en WordPress, debe realizar algunos cambios menores en su código. Puede buscar todos los scripts y agregar el aplazar etiquetarlos, o puede instalar un complemento que lo haga automáticamente. También puede crear una secuencia de comandos que cargue los archivos de forma asincrónica como se muestra en la sección Cómo diferir el análisis de Javascript usando una secuencia de comandos de este artículo.

¿Qué es aplazar JavaScript?

Aplazar el análisis de Javascript es el proceso de indicar al navegador de los visitantes de su sitio web que carguen archivos específicos DESPUÉS de que la página se haya cargado. Esto permite al usuario ver el contenido de la página mucho más rápido que si no implementara el análisis diferido de Javascript.

¿Cuál es la diferencia entre async y diferir Javascript?

Async significa que el contenido de Javascript se carga como su propia conexión nueva, en paralelo con cualquier otro código existente. Con async, el navegador crea un nuevo hilo de procesamiento que no ralentizará ninguna descarga existente mientras se descarga y ejecuta Javascript. Aplazar, por otro lado, le pide al navegador que analice el script, después de que se haya descargado el resto del contenido. Si bien esto suele ser bueno para la velocidad, puede haber algunos problemas con su contenido, si hace referencia al script que se ha aplazado (porque no estará disponible).

¿Cómo minifico JavaScript en WordPress?

Para minimizar Javascript en WordPress, deberá implementar un complemento que lo haga automáticamente. Puedes leer más sobre esto esta página. 

Resumen

Y acaba de presenciar cómo diferir el análisis de JavaScript en WordPress.

Hemos aprendido que se puede lograr mediante complementos o mediante ajustes manuales. Tiene toneladas de beneficios para su sitio, como un SEO mejorado, una mejor experiencia de usuario y tiempos de carga más rápidos. Por lo tanto, es importante asegurarse de aplazar tantos scripts como pueda para obtener el máximo rendimiento.

Pero recuerde, mantenga siempre una copia de seguridad y pruebe mucho para asegurarse de que aplazó los scripts correctos. Puede parecer tedioso, pero si se hace bien, los beneficios y las ganancias son enormes.

Si realmente desea maximizar la velocidad de carga de su sitio web, le sugerimos que se lo deje a los profesionales, como los chicos de WP Rocket, para obtener los máximos beneficios de esto y cientos de otras acciones para que su sitio web se cargue más rápido.

Visite WP Rocket para hacer su sitio web más rápido hoy  

Sobre la autora

Escrito por: David AtardPagina web: https://www.linkedin.com/in/dattard/Email: David@collectiveray.com

David ha trabajado en la industria digital y en línea durante los últimos 21 años. Tiene una amplia experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Ha trabajado con agencias de desarrollo de software, empresas de software internacionales, agencias de marketing locales y ahora es Jefe de Operaciones de Marketing en Aphex Media, una agencia de SEO. Como consultor digital, su objetivo es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y las plataformas digitales disponibles en la actualidad. Su combinación de experiencia en tecnología combinada con una sólida visión para los negocios aporta una ventaja competitiva a sus escritos.