Preload
P
Definition complete
<p>La directive <strong>preload</strong> est une indication de ressource HTML qui demande au navigateur de télécharger prioritairement une ressource critique pour le rendu de la page courante. Contrairement à prefetch qui anticipe les besoins futurs, preload accélère le chargement immédiat des éléments essentiels.</p><p>L'implémentation utilise la balise link avec rel="preload" :</p><ul><li><strong>Police</strong> : <link rel="preload" href="font.woff2" as="font" crossorigin></li><li><strong>Image LCP</strong> : <link rel="preload" href="hero.webp" as="image"></li><li><strong>CSS critique</strong> : <link rel="preload" href="critical.css" as="style"></li><li><strong>Script</strong> : <link rel="preload" href="app.js" as="script"></li></ul><p>L'attribut <strong>"as"</strong> est obligatoire et informe le navigateur du type de ressource, permettant d'appliquer la bonne priorité et les headers de requête appropriés (notamment Accept pour les images).</p><p>Les cas d'usage prioritaires pour preload :</p><ul><li><strong>Polices web</strong> : éviter le FOIT (Flash of Invisible Text)</li><li><strong>Image LCP</strong> : accélérer le Largest Contentful Paint</li><li><strong>CSS above-the-fold</strong> : accélérer le premier rendu</li><li><strong>Ressources découvertes tard</strong> : assets référencés dans CSS ou JS</li></ul><p>Attention à ne pas <strong>surcharger de preloads</strong> : chaque ressource préchargée consomme de la bande passante et peut retarder d'autres téléchargements. Limiter aux 2-4 ressources les plus critiques pour le rendu initial garantit une optimisation efficace des Core Web Vitals.</p>
Exemples pratiques
<ul><li><strong>E-commerce</strong> : preload de l'image hero produit pour améliorer le LCP</li><li><strong>Site corporate</strong> : chargement anticipé de la police de marque</li><li><strong>Application</strong> : preload du bundle JavaScript principal</li><li><strong>Landing page</strong> : CSS critique et image de fond above-the-fold</li><li><strong>Media</strong> : preload de la thumbnail vidéo visible au chargement</li></ul>
A quoi sert Preload ?
<ul><li>Améliorer le score Largest Contentful Paint (LCP)</li><li>Éliminer le flash de texte invisible lors du chargement des polices</li><li>Accélérer le rendu initial de la page above-the-fold</li><li>Charger des ressources découvertes tardivement par le parser</li><li>Optimiser les Core Web Vitals pour le SEO</li><li>Prioriser les assets critiques sur les connexions lentes</li></ul>
Preload en pratique chez 123web
<p>Chez 123web, nous utilisons preload stratégiquement pour optimiser les performances de vos pages. Notre équipe identifie les ressources critiques impactant le LCP et le premier rendu, puis implémente les preloads appropriés pour améliorer vos Core Web Vitals et offrir une expérience utilisateur optimale.</p>