Donner la priorité à vos ressources avec le lien relà l'attention des utilisateurs

Avez-vous déjà souhaité signaler au navigateur une police, un script ou une autre ressource importants qui seront nécessaires à la page, sans retarder l'événement onload de la page ? <link rel="preload"> permet aux développeurs Web de procéder à cette opération, en utilisant une syntaxe d'élément HTML familière avec quelques attributs clés permettant de déterminer le comportement exact. Il s'agit d'une norme brouillon qui sera incluse dans la version 50 de Chrome.

Les ressources chargées via <link rel="preload"> sont stockées localement dans le navigateur et restent inertes jusqu'à ce qu'elles soient référencées dans le DOM, JavaScript ou CSS. Voici un exemple de cas d'utilisation potentiel dans lequel un fichier de script est préchargé, mais n'est pas exécuté immédiatement, comme s'il avait été inclus via une balise <script> dans le 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>

Que se passe-t-il ici ? L'attribut href utilisé dans cet exemple doit être familier aux développeurs Web, car il s'agit de l'attribut standard utilisé pour spécifier l'URL d'une ressource associée.

Toutefois, l'attribut as est probablement nouveau pour vous. Il est utilisé dans le contexte d'un élément <link> pour fournir au navigateur plus de contexte sur la destination de la requête de préchargement effectuée. Ces informations supplémentaires garantissent que le navigateur définit les en-têtes et la priorité des requêtes appropriés, et applique toutes les directives Content Security Policy applicables en fonction du contexte de ressource approprié.

En savoir (beaucoup) plus

Yoav Weiss a écrit le guide définitif de l'utilisation de <link rel="preload">. Si cela vous intéresse et que vous voulez commencer à l'utiliser sur vos propres pages, je vous recommande de lire son article pour en savoir plus sur ses avantages et ses cas d'utilisation créatifs.

<link rel="preload"> remplace <link rel="subresource">, qui présente des bugs et des inconvénients importants et qui n'a jamais été implémenté dans d'autres navigateurs que Chrome. Par conséquent, Chrome 50 supprime la compatibilité avec <link rel="subresource">.