Optimizar archivos JavaScript metodo asincrono o diferido
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 o 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?
deferparece la mejor opción de forma general. Salvo que el script manipule o interaccione con el DOM antes deDOMContentLoaded($( document ).readyen 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.asyncsería ideal para scripts que manipulan o interaccionan con el DOM antes deDOMContentLoadedy/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
Referencia
https://es.javascript.info/script-async-defer