Assegnare la priorità alle tue risorse con link rel=#39;preload'

Jeff Posnick

Hai mai voluto comunicare al browser un carattere, uno script o un'altra risorsa importante di cui la pagina avrà bisogno, senza ritardare l'evento onload della pagina? <link rel="preload"> consente agli sviluppatori web di fare proprio questo, utilizzando una sintassi di elementi HTML familiare con alcuni attributi chiave per determinare il comportamento esatto. Si tratta di uno standard in versione bozza disponibile nell'ambito della release di Chrome 50.

Le risorse caricate tramite <link rel="preload"> vengono memorizzate localmente nel browser e sono effettivamente inattive finché non viene fatto riferimento a esse nel DOM, in JavaScript o nel CSS. Ad esempio, di seguito è riportato un potenziale caso d'uso in cui un file di script viene precompilato, ma non viene eseguito immediatamente, come sarebbe stato se fosse stato incluso tramite un tag <script> nel 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>

Che cosa sta succedendo? L'attributo href utilizzato in questo esempio dovrebbe essere familiare agli sviluppatori web, poiché è l'attributo standard utilizzato per specificare l'URL di qualsiasi risorsa collegata.

L'attributo as è probabilmente nuovo per te, ma viene utilizzato nel contesto di un elemento <link> per fornire al browser maggiori informazioni sulla destinazione della richiesta di precaricamento in corso. Queste informazioni aggiuntive assicurano che il browser imposti intestazioni di richiesta e priorità di richiesta appropriate, nonché le eventuali direttive Content Security Policy pertinenti che potrebbero essere in vigore per il contesto della risorsa corretto.

Scopri (molto) di più

Yoav Weiss ha scritto la guida definitiva all'utilizzo di <link rel="preload">. Se ti interessa e vuoi iniziare a utilizzarla sulle tue pagine, ti consiglio di leggere l'articolo per scoprire di più sui vantaggi e sui casi d'uso delle creatività.

<link rel="preload"> sostituisce <link rel="subresource">, che presenta bug e svantaggi significativi e non è mai stato implementato in browser diversi da Chrome. Di conseguenza, Chrome 50 rimuove il supporto per <link rel="subresource">.