Cómo priorizar tus recursos con el vínculo rel='preload'

Jeff Posnick

¿Alguna vez quisiste informarle al navegador sobre una fuente, una secuencia de comandos o un otro recurso importante que necesitará la página, sin retrasar el evento onload de la página? <link rel="preload"> les permite a los desarrolladores web hacer precisamente eso, con una sintaxis de elementos HTML familiar y algunos atributos clave para determinar el comportamiento exacto. Es un borrador de estándar que se envía como parte de la versión 50 de Chrome.

Los recursos cargados a través de <link rel="preload"> se almacenan de forma local en el navegador y son inactivos hasta que se hace referencia a ellos en el DOM, JavaScript o CSS. Por ejemplo, este es un posible caso de uso en el que se carga previamente un archivo de secuencia de comandos, pero no se ejecuta de inmediato, como lo haría si se incluyera a través de una etiqueta <script> en el DOM.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

Entonces, ¿qué sucede aquí? Los desarrolladores web deberían estar familiarizados con el atributo href que se usa en ese ejemplo, ya que es el atributo estándar que se usa para especificar la URL de cualquier recurso vinculado.

Sin embargo, es probable que el atributo as sea nuevo para ti y se use en el contexto de un elemento <link> para brindarle al navegador más contexto sobre el destino de la solicitud de carga previa que se realiza. Esta información adicional garantiza que el navegador establezca los encabezados de solicitud y la prioridad de solicitud adecuados, así como que aplique cualquier directiva relevante de la política de seguridad del contenido que pueda estar vigente para el contexto de recursos correcto.

Más información

Yoav Weiss escribió la guía definitiva para usar <link rel="preload">. Si te interesa y quieres comenzar a usarlo en tus propias páginas, te recomiendo que leas su artículo para obtener más información sobre los beneficios y los casos de uso creativos.

<link rel="preload"> reemplaza a <link rel="subresource">, que tiene errores y desventajas significativos y que nunca se implementó en navegadores que no sean Chrome. Por lo tanto, Chrome 50 quita la compatibilidad con <link rel="subresource">.