Los scripts async y defer son dos atributos que se pueden agregar a las etiquetas de script en una página web para controlar el modo en que se cargan y ejecutan. El atributo prefetch es una etiqueta de enlace que se puede usar para cargar recursos de manera anticipada, a fin de mejorar la velocidad de carga de una página en el futuro.
La optimización de tu código usando entre otros, estos script, harán que puedas mejorar las métricas principales de rendimiento de tu sitio web y la experiencia de usuario.
En este post te cuenta las principales diferencias entre los tres y cuándo es recomendable usarlos en tu código html.
Estructura del contenido
Async
Indica que el script debe descargarse de manera asíncrona y luego ejecutarse tan pronto como esté disponible. Esto significa que el script puede comenzar a descargarse en paralelo con el resto de la página, y luego se ejecuta tan pronto como se haya descargado por completo. Sin embargo, no hay garantía de que los scripts etiquetados con async se ejecuten en un orden determinado.
Si el script es importante para el sitio y necesita ejecutarse lo antes posible, async sería una buena opción.
Si se usa el async es posible que interrumpa al navegador del renderizado de otras partes del dom.
Usando <script async src=»»></script> le decimos al navegador que ejecute el código sin bloquear ningún otro script de antemano.
Defer
Indica que el script debe descargarse de manera asíncrona y luego ejecutarse una vez que se haya descargado por completo y se haya parseado el documento HTML por completo. Esto significa que puedes utilizar defer para asegurarte de que un script se ejecute después de que se haya cargado y parseado el resto de la página. Además, los scripts etiquetados con defer se ejecutan en el orden en que aparecen en el documento.
Si el script necesita estar en la página pero puede esperar a ejecutarse, se usaría el atributo defer.
Usando <script defer src=»»></script> le estamos diciendo al navegador que es script no va a cambiar el layout de la página por lo que no debería bloquear el renderizado de la misma mientras está siendo cargada o parseada.
Cualquier código que no es esencial para la carga de la página debería ser cargado usando los atributos async o defer en la etiqueta <script>.
En cualquier caso, ambas opciones indican que un script debe ser descargado y ejecutado de manera asíncrona, lo que significa que no bloquean el renderizado de la página mientras se descargan y ejecutan.
Prefetch
Es una herramienta que puedes utilizar para indicarle a un navegador que descargue de manera anticipada ciertos recursos, como archivos JavaScript, CSS o imágenes para que estén disponibles de manera más rápida cuando el usuario los necesite. Esto se puede hacer agregando una etiqueta link con el atributo rel establecido en prefetch en el encabezado de tu página HTML.
<link rel="prefetch" href="/assets/js/app.js">
Al utilizar prefetch, estás diciendo al navegador que descargue este archivo de manera anticipada, para que esté disponible en el futuro. Esto puede ser útil en páginas que tienen un flujo de navegación predecible. Al precargar los recursos que se necesitan para cargar esas páginas, puedes hacer que la experiencia de usuario sea más rápida y fluida.
Es importante tener en cuenta que prefetch es solo una sugerencia para el navegador, y no garantiza que se descarguen los recursos. Además, el navegador puede decidir no descargar los recursos si no tiene suficiente ancho de banda o recursos disponibles. Por lo tanto, es importante utilizar prefetch de manera prudente y solo para recursos que sean realmente necesarios y se espere que se utilicen en el futuro cercano
Recursos utilizados
- https://addyosmani.com/blog/script-priorities/
- https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/
- https://jakearchibald.com/2017/es-modules-in-browsers/
- https://developers.google.com/web/fundamentals/primers/modules
- https://gist.github.com/jakub-g/5286483ff5f29e8fdd9f
- https://bitsofco.de/async-vs-defer/
