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

Jeff Posnick

Avete mai desiderato comunicare al browser la presenza di caratteri, script o altre risorse importanti che saranno necessari per la pagina, senza ritardare l'evento onload della pagina? <link rel="preload"> consente agli sviluppatori web di farlo, utilizzando una familiare sintassi degli elementi HTML con alcuni attributi chiave per determinare il comportamento esatto. Si tratta di una bozza standard fornita nell'ambito della release di Chrome 50.

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

Tuttavia, l'attributo as è probabilmente nuovo per te e viene utilizzato nel contesto di un elemento <link> per fornire al browser maggiore contesto sulla destinazione della richiesta di precaricamento effettuata. Queste informazioni aggiuntive assicurano che il browser imposti le intestazioni delle richieste e la priorità delle richieste appropriate, nonché che applichi le eventuali direttive dei Criteri di sicurezza del contenuto pertinenti che potrebbero essere in atto per il corretto contesto delle risorse.

Scopri (molto) di più

Yoav Weiss ha scritto la guida definitiva all'utilizzo di <link rel="preload">. Se ti interessa e vuoi iniziare a utilizzarlo sulle tue pagine, ti consiglio di leggere il suo articolo per saperne 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 che non è mai stato implementato in browser diversi da Chrome. Di conseguenza, Chrome 50 rimuove il supporto per <link rel="subresource">.