Le préchargement d'une ressource est l'anticipation du chargement d'une ressource requise ultérieurement par une autre ressource, nécessaire au rendu de la page. Par exemple, dans un style CSS, le chargement d'une police web est nécessaire. Lors du chargement de la page, le navigateur chargera cette police après avoir chargé et interprété le style CSS. Le préchargement consiste alors à informer le navigateur que cette police est à charger avant même l'interprétation du style CSS.
Il est intéressant d'informer le navigateur des futurs chargements requis par d'autres ressources à effectuer, afin qu'il anticipe ceux-ci et améliore le temps de chargement de la page et effectue le rendu de celle-ci plus rapidement.
Pour indiquer au navigateur les ressources à précharger, il est nécessaire d'ajouter les instructions au niveau de la section <head> du code HTML de la page.
Exemple pour le chargement d'une police web requis par un style CSS :
<head>
...
<link rel="preload" href="https://fonts.googleapis.com/css?family=Quicksand|Lato"
as="font" crossorigin="anonymous" />
...
</head>
L'attribut "as" permet de définir le type MIME de la ressource à précharger, ce qui est utile pour le navigateur quant à sa priorisation des ressources à charger. En l'absence de cet attribut, le navigateur peut ne pas prendre en compte l'instruction. Les principaux types sont : script, style, font, image, video, audio, document, object, fetch, track et embed.
L'attribut "crossorigin", quant à lui, permet de gérer le CORS (sécurité liée au chargement d'une ressource depuis un autre site). Cet attribut est facultatif lorsque la ressource se trouve sur le même site. Si la ressource est externe et que l'atrribut n'est pas spécifié, le préchargement ne sera pas pris en compte par le navigateur.