Fetchpriority

HTML / CSS 🟡 Mid

Definition

Attribut fetchpriority qui indique au navigateur la priorité relative d'une ressource (high, low, auto). Permet d'optimiser le LCP en priorisant l'image hero ou en dépriorisant les ressources secondaires.

Analogie

Comme marquer un colis 'URGENT' à la poste : il passe devant les autres dans la file de traitement.

Exemple de code

<!-- Image LCP prioritaire -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">
<!-- Image carousel non critique -->
<img src="slide3.jpg" fetchpriority="low" alt="Slide">
<!-- Script non critique -->
<script src="analytics.js" fetchpriority="low"></script>

Cas d'usage

Accélérer le LCP en priorisant le chargement de l'image principale au-dessus du fold.

#performance#interview