Ces attributs lorsqu’il sont utilisés sur une page HTML on tous un point commun : ils permettent de télécharger de façon asynchrone les fichiers liés depuis la page web, dans le but d’accélérer le téléchargement de la page et son exécution.
Async et Defer s’appliquent à la balise <script> uniquement
Comment utiliser ces deux attribut dans un script ? voici un exemple
<script src="init.js" defer></script> ou <script src="init.js" async></script>
Quelle est la différence entre async et defer? Regardez les deux schémas tirés de ce site,
async ne vas pas attendre la fin du téléchargement de la page HTML pour s’éxécuter, alors sur defer va attendre la fin du téléchargement de la page HTML (le parsing plus exactement).defer va être utile si vous avez besoin que tous les éléments du DOM soient mis en place.
Preload et Prefetch sont pour les balises <link>
<link rel="preload" href="style/style.css"> <link rel="preload" href="main.js">
preload permet de télécharger de façon asynchrone les ressources indiquée (css, javascript), mais il ne sont pas exécutés. Ils seront exécutés par le navigateur en cas de nécessité, ce qui est une bonne forme d’optimisation. Pour en savoir plus sur les détails techniques, cette page de la documentation officielle sur MDN.
Prefetch pour pré-télécharger des pages web
<link rel="prefetch" href="/articles/" as="document">
Cet attribut a pour but de prétélécharger une page (même si on ne va pas la visiter) pour que lorsqu’on clique sur le lien, on n’ai pas à la télécharger. Il faut bien sûr s’assurer que c’est une page souvent visitée. La page prétéléchargée sera dans le cache prefetch.
L’image ci-dessus explique le fonctionnement (source : lien de la source).