Leve Optimización

Orden de llamadas, recursos externos

• preload – Cuando vas a necesitar un recurso en unos segundos
• prefetch – Cuando se va a necesitar un recurso para la siguiente página
• preconnect – Cuando sabes que vas a necesitar un recurso pronto, pero aún no conoces su url completa
• dns-prefetch – Cuando sabes que vas a necesitar un recurso pronto, pero aún no conoces su url completa (para navegadores antiguos)

Pongamos lo que pongamos, las llamadas de CSS siempre son bloqueantes.

Específicos para scripts

defer

El atributo defer indica al navegador que no espere por el script. En lugar de ello, debe seguir procesando el HTML, construir el DOM. El script carga “en segundo plano” y se ejecuta cuando el DOM esta completo.

async

El atributo async es de alguna manera como defer. También hace el script no bloqueante. Pero tiene importantes diferencias de comportamiento.

El atributo async significa que el script es completamente independiente:

• El navegador no se bloquea con scripts async (como defer).
• Otros scripts no esperan por scripts async, y scripts async no espera por ellos.
• DOMContentLoaded y los scripts asincrónicos no se esperan entre sí:
  • DOMContentLoaded puede suceder antes que un script asincrónico (si un script asincrónico termina de cargar una vez

la página está completa)

• …o después de un script asincrónico (si tal script asincrónico es pequeño o está en cache)

En otras palabras, los scripts async cargan en segundo plano y se ejecutan cuando están listos. El DOM y otros scripts no esperan por ellos, y ellos no esperan por nada. Un script totalmente independiente que se ejecuta en cuanto se ha cargado.