Preload (Préchargement)
Directive de navigation permettant de forcer le chargement prioritaire des ressources critiques avant qu’elles ne soient découvertes par le navigateur.
En cliquant, vous acceptez les cookies de YouTube.
Définition
Le Preload est une instruction HTML (rel="preload") qui indique au navigateur de récupérer une ressource (comme une police de caractères, un fichier CSS ou une image LCP/Hero) le plus tôt possible. Cela permet de réduire le temps d’attente et d’améliorer le rendu visuel de la page.
Bonnes pratiques
- Implémenter progressivement : Prioriser uniquement les ressources indispensables au rendu de la ligne de flottaison (Above the fold).
- Mesurer avec Lighthouse : Vérifier que le preload réduit effectivement le Largest Contentful Paint (LCP) sans créer de goulot d’étranglement.
- Spécifier le type de contenu : Utiliser l’attribut
as(ex:as="font") pour que le navigateur hiérarchise correctement la requête. - Automatiser le monitoring : Surveiller que les ressources préchargées sont bien utilisées (une ressource préchargée mais non utilisée génère un avertissement dans la console).
À éviter
- Chargements bloquants : Précharger trop de fichiers simultanément peut saturer la bande passante et retarder l’affichage global.
- Assets non optimisés : Ne pas précharger des images trop lourdes sans avoir au préalable optimisé leur format (WebP/Avif).
- Modifications non mesurées : Ajouter des balises preload sans tester l’ordre de priorité, ce qui pourrait dégrader les performances au lieu de les améliorer.
