Optimizar archivos JavaScript metodo asincrono o diferido

Fecha Publicación:       26 de Mayo de 2020
Fecha Modificación:       16 de Abril de 2023

Referencia:  Cargando JavaScript de terceros

El código de terceros puede reducir en gran medida el rendimiento de carga. Limita la cantidad de proveedores externos redundantes y prueba cargar el código de terceros después de que haya finalizado la carga principal de tu página.

¿Cómo carga un script de terceros de manera eficiente?

Si un script de terceros está ralentizando la carga de su página, tiene varias opciones para mejorar el rendimiento:

  • Cargue el script con el atributo asíncrono diferido para evitar bloquear el análisis de documentos.

  • Considere la posibilidad de autoalojar el script si el servidor de terceros es lento.

  • Considere eliminar el script si no agrega un valor claro a su sitio.

  • Considere sugerencias de recursos como  <link rel=preconnect>   o
    <link rel=dns-prefetch>  para realizar una búsqueda de DNS para dominios que alojan scripts de terceros.

Usar asíncrono o diferir

La ejecución de JavaScript es un bloqueo del analizador. Esto significa que cuando el navegador encuentra una secuencia de comandos, debe pausar la construcción de DOM, entregar esto al motor de JavaScript y permitir la ejecución de la secuencia de comandos antes de continuar con la construcción de DOM.

Los atributos async y defer cambian este comportamiento.

Una de las primeras recomendaciones para evitar este bloqueo era colocar los elementos <script> al final del HTML, por ejemplo antes del </body> o de </html>. De esta forma, cuando el analizador se encontraba con los scripts, casi todo el documento ya se había analizado y renderizado. Pero era una solución lejos de ser ideal.

  • <script> (normal): el análisis HTML se detiene, se descarga el archivo (si es un script externo), se ejecuta el script y después se reanuda el análisis HTML.

  • <script async>: el script se descarga de forma asíncrona, es decir, sin detener el análisis HTML, pero una vez descargado, si se detiene para ejecutar el script. Tras la ejecución se reanuda el análisis HTML. Sigue existiendo un bloqueo en el renderizado pero menor que con el comportamiento normal. No se garantiza la ejecución de los scripts asíncronos en el mismo orden en el aparecen en el documento.

  • <script defer>: el script se descarga de forma asíncrona, en paralelo con el análisis HTML, y además su ejecución es diferida hasta que termine el análisis HTML. No hay bloqueo en el renderizado HTML. La ejecución de todos los scripts diferidos se realiza en el mismo orden en el que aparecen en el documento.

 

¿Cuándo utilizar cada uno?

  • defer parece la mejor opción de forma general. Salvo que el script manipule o interaccione con el DOM antes de DOMContentLoaded ($( document ).ready en jQuery). También sería la mejor opción si el script tiene dependencias con otros scripts y es importante el orden en el que se ejecuta cada uno.

  • async sería ideal para scripts que manipulan o interaccionan con el DOM antes de DOMContentLoaded y/o que no tienen dependencias con otros scripts.

  • Seguir utilizando JS en su forma predeterminada sería la última opción. Si el script es pequeño, preferible inline, ya que el análisis HTML se detendría pero sería una interferencia muy pequeña en comparación con la solicitud y descarga del archivo.

Pregunta

La duda si estos atributos son tambien aplicables a CSS <link>? 

Los elementos <link> no admiten los atributos async ni defer. La verdad que estaría interesante, pero la realidad es que no los admiten y no creo que algo así esté previsto, los elementos <link> tienen sus propias peculiaridades.

Pruebas con PageSpeed:

Haciendo pruebas con PageSpeed de google   poner un script  como  asíncrono  baja la valoracion asi lo pongamos al final del archivo index.

<script async src="/codigo.js"/></script>
  • Forma Asincrona  :  Haciendo muchas consultas a pagespeed me daba una valoracion por ejemplo de 86 - 88 a 90 
  • Forma Normal        : Quite  al script la forma de carga asíncrono  y ya me daba una valoracion superior   de 90 - 92 - 94
Conclusión : en mi caso me quedo la forma normal de carga de un script.

Referencia

https://es.javascript.info/script-async-defer

 

Articulo : 846 - Veces Leidas
Compartir Articulo: