.png)
Introduction
Le Largest Contentful Paint (LCP) est l'un des indicateurs les plus importants des Core Web Vitals. Il mesure le temps nécessaire à l'affichage du plus grand élément visible dans la fenêtre du navigateur, qui est très souvent une image.
La fonctionnalité Préchargement d'image LCP de Smart Loading permet d'indiquer au navigateur quelles images doivent être téléchargées en priorité. Pour cela, Fasterize génère automatiquement des balises <link rel="preload"> dans le <head> de la page, afin d'anticiper le chargement des images les plus critiques.
Cette fonctionnalité est particulièrement utile pour améliorer les performances perçues et optimiser le score LCP.
💡 Le préchargement est exécuté automatiquement après le traitement réalisé par l'EdgeSpeed.
Qu'est-ce que le Préchargement d'image LCP ?
Lorsque la fonctionnalité est activée, Fasterize analyse le HTML de la page afin d'identifier les images correspondant aux sélecteurs CSS que vous avez configurés.
Pour chaque image trouvée, Fasterize :
- génère une balise
<link rel="preload" as="image">dans le<head>; - ajoute automatiquement l'attribut
fetchpriority="high"afin d'indiquer au navigateur qu'il s'agit d'une ressource prioritaire ; - conserve les informations
srcsetetsizeslorsque l'image est responsive.
Le navigateur peut ainsi commencer à télécharger ces images dès le début du chargement de la page, avant même leur découverte lors du parsing du document.
Comment configurer le Préchargement d'image LCP ?
Activer la fonctionnalité
Depuis l’application Smart Loading, ouvrez l'onglet Préchargement LCP, puis activez la fonctionnalité.
Vous pouvez ensuite définir :
- le nombre maximal d'images à précharger ;
- la liste des images candidates.
Définir le nombre maximal de préchargements
Le champ Préchargement maximum permet de limiter le nombre de liens <link rel="preload"> générés.
Caractéristiques :
- obligatoire ;
- valeur par défaut : 1 ;
- valeurs autorisées : 1 à 20.
💡 Dans la majorité des cas, une seule image correspond au Largest Contentful Paint. Il est donc recommandé de conserver la valeur par défaut, sauf besoin particulier.
Ajouter un candidat
Chaque candidat correspond à une image que Fasterize pourra précharger.
Pour ajouter un candidat, cliquez sur Ajouter un candidat.
Deux paramètres sont disponibles.
Sélecteur CSS
Le sélecteur CSS permet d'identifier les images susceptibles de devenir le Largest Contentful Paint.
Exemples :
img.hero
.heroimg
.bannerimg
.product-mainimg
Ce champ est obligatoire.
Media Query (optionnelle)
Vous pouvez restreindre un candidat à une taille d'écran spécifique.
Exemples :
(max-width:600px)
(min-width:1024px)
Cette option est particulièrement utile lorsque les versions mobile et desktop utilisent des images différentes.
Comment Fasterize sélectionne-t-il l'image à précharger ?
Une fois la configuration enregistrée, Fasterize parcourt le DOM de la page après le traitement EdgeSpeed.
Pour chaque élément rencontré :
- il vérifie si l'image correspond à l'un des sélecteurs CSS configurés ;
- il récupère l'URL de l'image ;
- il génère le lien de préchargement correspondant.
La fonctionnalité prend en charge :
- les balises
<img>; - les balises
<picture>; - les images de fond définies avec
background-imageen ligne ; - les attributs
srcsetetsizes.
Lorsque plusieurs formats sont disponibles dans une balise <picture>, Fasterize privilégie :
- AVIF ;
- WebP ;
- les autres formats.
Intégration avec les autres optimisations Fasterize
Le Préchargement d'image LCP s'intègre automatiquement avec plusieurs optimisations de Smart Loading.
Lazy Loading
Si une image est préchargée, Fasterize annule automatiquement son lazy loading afin d'éviter tout conflit entre les deux mécanismes.
Unlazyload
Le mécanisme d'Unlazyload natif du navigateur est automatiquement appliqué aux images préchargées.
⚠️ Les implémentations d'Unlazyload personnalisées (basées sur des classes CSS ou des attributs spécifiques au site) ne sont actuellement pas prises en charge.
Points d'attention
L'ordre des candidats n'est pas un ordre de priorité
L'ordre dans lequel les candidats sont configurés n'influence pas le choix de l'image préchargée.
Fasterize sélectionne toujours la première image rencontrée dans le DOM correspondant à l'un des sélecteurs configurés.
⚠️ Modifier l'ordre des candidats ne permet donc pas de modifier la priorité des images.
Fonctionnement des balises <picture>
Pour les éléments <picture>, Fasterize sélectionne les sources uniquement à partir de l'attribut type.
Les attributs media présents sur les balises <source> ne sont actuellement pas analysés.
Si aucune balise <source> ne possède d'attribut type, Fasterize utilise directement la balise <img>.
URLs non prises en charge
Pour des raisons de sécurité, les URLs utilisant les schémas suivants ne sont pas préchargées :
data:blob:javascript:
Exemple de configuration
Le paramètre maximum_preload définit le nombre maximal d'images pouvant être préchargées.
Le tableau preload_candidates contient la liste des images candidates.
{
"parameters": {
"maximum_preload":2,
"preload_candidates": [
{
"css_selector":"img.hero-desktop",
"media_query":"(min-width: 1024px)"
},
{
"css_selector":"img.hero-mobile",
"media_query":"(max-width: 1023px)"
},
{
"css_selector":".hero-bg",
"media_query":""
}
]
}
}
Exemple de résultat
Pour une image correspondant au sélecteur configuré, Fasterize génère automatiquement un lien de préchargement similaire à celui-ci :
<linkrel="preload"as="image"href="/images/hero-desktop.jpg"imagesrcset="/images/hero-320w.jpg 320w, /images/hero-768w.jpg 768w, /images/hero-1200w.jpg 1200w"imagesizes="(max-width: 768px) 100vw, 1200px"fetchpriority="high">
L'image concernée reçoit également l'attribut :
fetchpriority="high"
afin d'augmenter sa priorité de téléchargement.
Bonnes pratiques
Pour obtenir les meilleurs résultats :
- ciblez uniquement les images susceptibles de devenir le LCP ;
- limitez le nombre d'images préchargées ;
- utilisez des Media Queries lorsque les images diffèrent entre mobile et desktop ;
- vérifiez les résultats avec Lighthouse ou PageSpeed Insights ;
- évitez de précharger des images situées sous la ligne de flottaison.
💡 Précharger trop d'images peut ralentir le chargement des autres ressources critiques. Il est généralement recommandé de limiter le nombre de préchargements aux véritables images LCP.
Résumé
La fonctionnalité Préchargement d'image LCP permet d'améliorer le Largest Contentful Paint en générant automatiquement des liens de préchargement pour les images critiques de votre page.
Grâce à une configuration basée sur des sélecteurs CSS, Fasterize identifie les images à optimiser, ajoute les balises <link rel="preload"> appropriées et applique automatiquement fetchpriority="high" afin de prioriser leur téléchargement.
Utilisée avec un nombre limité de candidats et des sélecteurs ciblés, cette fonctionnalité constitue un levier efficace pour améliorer les Core Web Vitals.