Réduire le LCP sur un site Astro : guide pratique 2026

Votre site Astro affiche un LCP de 3,5 secondes sur Google PageSpeed Insights. Tout est au vert, sauf cet indicateur de vitesse d’affichage qui vire à l’orange ou au rouge.

C’est frustrant. Astro est taillé pour la vitesse : il génère du HTML statique, n’envoie aucun JavaScript par défaut au navigateur et possède son propre outil d’optimisation d’images. Sur le papier, tout devrait charger instantanément.

Pourtant, il suffit de quelques erreurs d’intégration très courantes pour plomber votre LCP et dépasser le seuil fatidique des 2,5 secondes fixé par Google. Voyons comment corriger le tir.

Sommaire

• Le LCP, c’est quoi concrètement
• Identifier l’élément LCP de votre page
• Optimiser l’image LCP avec le composant Astro
• Précharger vos polices d’écriture
• Éliminer les ressources qui bloquent l’affichage
• Pourquoi Astro est nativement taillé pour le LCP
• Les outils pour mesurer et suivre vos scores
• La check-list de synthèse
• Questions fréquentes

Le LCP, c’est quoi concrètement

Le LCP (pour Largest Contentful Paint) mesure le temps qu’il faut pour que le plus grand élément visible à l’écran s’affiche complètement. Dans la majorité des cas, il s’agit de votre image principale (l’image de couverture ou “hero”). Parfois, c’est un gros bloc de texte comme votre titre principal (H1) s’il utilise une écriture personnalisée longue à charger.

C’est l’une des trois mesures phares des Core Web Vitals (les Signaux Web Essentiels de Google) utilisées pour évaluer la vitesse des sites.

Les critères de notation sont stricts :

• Vert (Bon) : Moins de 2,5 secondes.
• Orange (À améliorer) : Entre 2,5 et 4 secondes.
• Rouge (Mauvais) : Plus de 4 secondes.

Le rapport officiel de Chrome (CrUX) montre que le LCP reste le point noir du web mobile. Si près de 70% des sites s’en sortent bien sur ordinateur, ce chiffre chute à 62% sur smartphone. Le chargement d’une image lourde sur un réseau mobile moyen (4G/5G instable) est le premier coupable.

Pourtant, d’après les analyses de HTTP Archive, la majorité des sites n’utilisent pas l’attribut HTML fetchpriority="high" sur leur image principale. C’est une ligne de code extrêmement simple qui résout pourtant une grande partie du problème.

Avec Astro, nous pouvons descendre sans problème sous la barre des 1,5 seconde.

Identifier l’élément LCP de votre page

Avant de modifier votre code, il faut trouver précisément quel élément bloque le chargement.

Option 1 : Google PageSpeed Insights (rapide)

Entrez votre adresse sur PageSpeed Insights. Faites défiler la page jusqu’à la section Diagnostics et cherchez la ligne Élément Largest Contentful Paint. L’outil vous affichera une vignette montrant visuellement l’image ou le bloc de texte concerné.

Option 2 : Chrome DevTools (précis)

1. Ouvrez votre site sur Google Chrome.
2. Ouvrez l’inspecteur en appuyant sur la touche F12.
3. Allez dans l’onglet Performance.
4. Cliquez sur l’icône de rechargement pour lancer l’enregistrement.
5. Sur la ligne des temps, passez votre souris sur le carré LCP : l’élément s’affichera en surbrillance sur votre page.

Sur la majorité des sites vitrines, le coupable est presque toujours le même :

• La grande photo d’accueil (bannière hero).
• Un titre H1 utilisant une police d’écriture externe lente à s’afficher.
• Un logo d’entreprise trop volumineux placé dans l’en-tête.

Optimiser l’image LCP avec le composant Astro

C’est le levier le plus important. Astro intègre un composant <Image /> très performant qui s’occupe de compresser et de retailler vos images. Mais pour l’image d’accueil, il faut ajuster ses paramètres par défaut.

Passer l’image d’accueil en priorité haute

Par défaut, Astro applique du chargement différé (lazy loading) sur toutes les images. C’est une excellente pratique pour les éléments secondaires, mais c’est dramatique pour votre image principale : le navigateur attend trop longtemps avant de lancer son téléchargement.

Pour corriger cela, passez les attributs loading="eager" et fetchpriority="high" à votre composant :

---
import { Image } from "astro:assets";
import heroImage from "../assets/hero.jpg";
---

<!-- Chargement prioritaire de l'image d'accueil -->
<Image
  src={heroImage}
  alt="Paysage du Tarn en Occitanie"
  width={1200}
  height={600}
  loading="eager"
  fetchpriority="high"
  formats={["avif", "webp", "jpeg"]}
/>

loading="eager" demande un chargement immédiat, tandis que fetchpriority="high" indique au navigateur que cette image passe avant toutes les autres feuilles de style ou scripts non critiques.

⚠️ Attention : N’appliquez cette priorité qu’à une seule image par page (celle tout en haut). Si vous essayez de tout charger en priorité haute, le navigateur perdra le bénéfice de cette optimisation.

Précharger l’image dans l’en-tête (Preload)

Si votre image de couverture est gérée en CSS (via un style background-image), le navigateur ne commencera à la télécharger qu’après avoir lu et interprété vos fichiers CSS. Cela fait perdre un temps précieux.

Vous pouvez forcer son chargement dès le premier instant en ajoutant une balise de préchargement directement dans la section <head> de votre layout principal :

---
// src/layouts/Layout.astro
---

<head>
  <link
    rel="preload"
    as="image"
    href="/images/hero.webp"
    imagesrcset="/images/hero-800.webp 800w, /images/hero-1200.webp 1200w"
    imagesizes="(max-width: 768px) 100vw, 1200px"
  />
</head>

💡 Astuce : Si vous utilisez déjà le composant <Image /> d’Astro avec le mode fetchpriority="high", ce préchargement manuel est généralement inutile.

Toujours déclarer la largeur et la hauteur

Ne laissez jamais une image sans dimensions explicites. Indiquer les attributs width et height permet au navigateur de réserver l’espace nécessaire à l’écran avant même que le fichier ne soit téléchargé. Cela évite les sauts de mise en page brusques (le CLS), qui agacent autant vos visiteurs que les robots de Google.

<!-- À faire : le navigateur anticipe la place nécessaire -->
<Image src={photo} alt="Photo d'atelier" width={800} height={450} />

<!-- À éviter : risque de décalage au chargement -->
<img src="/photo.jpg" alt="Photo d'atelier" />

Privilégier les formats modernes (AVIF et WebP)

La bibliothèque Sharp intégrée dans Astro convertit automatiquement vos images dans des formats plus récents. L’AVIF et le WebP permettent de diviser le poids de vos visuels par deux ou trois par rapport à un format JPEG standard, sans perte visible de qualité. Configurez la propriété formats dans cet ordre :

<Image
  src={heroImage}
  alt="Description"
  formats={["avif", "webp", "jpeg"]}
  quality={80}
  widths={[480, 768, 1200]}
  sizes="(max-width: 768px) 100vw, 1200px"
/>

Précharger vos polices d’écriture

Les polices d’écriture tierces sont le deuxième facteur de blocage du LCP. Si votre titre principal H1 doit attendre le téléchargement d’un fichier de police externe pour s’afficher, l’internaute se retrouve face à un écran blanc pendant plusieurs fractions de seconde.

Héberger soi-même ses fichiers de polices

Faire appel à Google Fonts oblige le navigateur à ouvrir une connexion supplémentaire vers un serveur externe, ce qui ralentit le chargement. La solution est de télécharger les fichiers (idéalement au format .woff2), de les placer dans le dossier public/fonts/ de votre projet et de les précharger directement dans votre en-tête HTML :

---
// src/layouts/Layout.astro
---

<head>
  <link
    rel="preload"
    as="font"
    href="/fonts/space-grotesk.woff2"
    type="font/woff2"
    crossorigin="anonymous"
  />
</head>

Puis déclarez-la proprement dans vos styles CSS :

/* src/styles/global.css */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 700;
}

La propriété font-display: swap indique au navigateur d’afficher le texte immédiatement avec une police système par défaut, puis de la remplacer par votre police personnalisée dès qu’elle est prête. Ainsi, l’affichage du texte n’est plus bloqué.

Ne précharger que l’essentiel

Ne préchargez pas l’intégralité des déclinaisons de votre police (italique, gras, extra-light). Contentez-vous de précharger la version utilisée pour vos titres principaux visibles dès le premier coup d’œil. Les autres variantes se chargeront en arrière-plan.

Éliminer les ressources qui bloquent l’affichage

Certains fichiers CSS ou scripts JavaScript insérés dans l’en-tête <head> empêchent le navigateur de commencer le dessin de votre page. Ils agissent comme un signal de stop temporaire.

C’est un problème que je rencontre régulièrement lors de mes audits dans le Tarn et la région toulousaine : un simple widget de chat en direct, un module d’avis clients ou un pixel de suivi publicitaire peut paralyser le chargement initial de votre site s’il est mal configuré.

Différer le chargement des scripts externes

Ne laissez aucun outil tiers se charger de manière bloquante. Utilisez systématiquement les attributs defer ou async sur vos balises de script pour que le navigateur poursuive l’affichage du site en parallèle :

<!-- Mauvaise pratique : le script bloque tout -->
<script src="https://analytics.example.com/script.js"></script>

<!-- Bonne pratique : le script est téléchargé en arrière-plan -->
<script defer src="https://analytics.example.com/script.js"></script>

<!-- Idéal : chargement sous forme de module ES -->
<script type="module" src="/scripts/analytics.js"></script>

Grâce à son concept d’îles (islands), Astro s’occupe de différer automatiquement son propre JavaScript. C’est donc principalement aux scripts que vous ajoutez manuellement à votre mise en page qu’il faut prêter attention.

Utiliser is:inline avec parcimonie dans Astro

Astro propose l’attribut is:inline pour exécuter un script immédiatement à l’endroit exact où il est écrit. Ne l’utilisez que pour des tâches ultra-rapides et indispensables dès le premier affichage, comme le script qui évite un flash blanc lors de l’application du mode nuit (dark mode).

Si vous utilisez Google Tag Manager, veillez également à ce que les balises qu’il contient soient configurées pour se déclencher après le rendu de la page, et non pas de façon synchrone.

Pourquoi Astro est nativement taillé pour le LCP

Au-delà de vos propres efforts d’optimisation, le fonctionnement interne d’Astro est un atout de taille pour obtenir d’excellents scores.

Une génération statique ultra-rapide

Astro produit par défaut du HTML pré-compilé. Lorsque vos visiteurs arrivent sur votre site, le serveur se contente de leur envoyer un fichier plat sans faire de calcul complexe. Le temps de réponse initiale du serveur (appelé TTFB) descend ainsi fréquemment sous les 50 millisecondes sur un bon hébergement, ce qui permet au navigateur de commencer le travail de rendu beaucoup plus tôt.

Aucun JavaScript superflu par défaut

Là où d’autres frameworks comme Next.js imposent le chargement de scripts lourds dès l’affichage de la page, Astro n’envoie aucun octet de JavaScript tant que vous ne lui demandez pas explicitement (via des options de chargement comme client:visible). Moins de fichiers à télécharger équivaut à un affichage plus rapide de vos textes et visuels.

Pour vous donner une idée, voici comment se situent les technologies sur la réussite aux critères de vitesse de Google (Signaux Web Essentiels) :

• Astro (SSG) : Environ 82% de réussite (0 Ko de script envoyé par défaut).
• Next.js (SSG) : Environ 68% de réussite (80 à 120 Ko de scripts obligatoires).
• WordPress : Environ 45% de réussite (250 à 400 Ko de scripts selon vos extensions).

Sharp intégré, sans configuration

Astro inclut Sharp, la bibliothèque de traitement d’images la plus rapide en Node.js, pour optimiser automatiquement toutes les images passées dans <Image />. Rien à installer séparément : la conversion WebP/AVIF et le redimensionnement se font au moment du build.

Les outils pour mesurer et suivre vos scores

Pour optimiser intelligemment, il est indispensable de mesurer vos scores. Ces trois outils gratuits sont largement suffisants :

Google PageSpeed Insights (les données labo et terrain)

Le site PageSpeed Insights affiche deux types d’informations. Les données réelles (issues de l’historique de vos vrais visiteurs sous Chrome) et un test en direct effectué par le robot de Google. C’est ce test en direct qui vous permet de valider instantanément si vos corrections ont fonctionné après une mise en ligne.

L’onglet Lighthouse de Chrome (le test local)

Lighthouse simule le chargement de votre site sur un smartphone connecté à un réseau 4G ralenti.

Petite astuce : effectuez toujours vos tests Lighthouse depuis une fenêtre de navigation privée. Vos extensions de navigateur habituelles (comme les bloqueurs de publicité ou les gestionnaires de mots de passe) injectent du code dans les pages et peuvent fausser vos résultats.

Google Search Console (la mesure officielle)

La console de recherche de Google propose un rapport complet nommé Signaux web essentiels. Ce rapport fait la synthèse des temps de chargement réels constatés par vos visiteurs sur une période de 28 jours. C’est la seule source officielle prise en compte pour le classement SEO de votre site sur Google.

La check-list de synthèse

• Ciblez l'élément LCP sur PageSpeed Insights pour savoir précisément ce qui bloque.
• Utilisez le composant `` d'Astro pour l'ensemble des illustrations du site.
• Activez `loading='eager'` et `fetchpriority='high'` uniquement sur votre image hero.
• Configurez les formats AVIF et WebP dans les paramètres de vos images.
• Renseignez la largeur et la hauteur de toutes les images pour stabiliser l'affichage.
• Hébergez vos polices d'écriture en local et ajoutez un préchargement (`preload`) dans le head.
• Ajoutez l'attribut `font-display: swap` dans vos fichiers CSS de déclaration de polices.
• Différez les codes tiers (Google Analytics, modules de chat) avec l'attribut `defer`.
• Testez en navigation privée avec Lighthouse pour éliminer l'effet des extensions Chrome.

Pour conclure

Astro offre d’excellentes bases techniques en matière de performance. Atteindre un temps de chargement LCP inférieur à 2,5 secondes (voire sous la barre des 1,5 seconde) est tout à fait accessible avec ces quelques ajustements. L’essentiel du gain se fait en priorisant correctement l’image d’accueil et en configurant proprement vos polices de caractères.

Si vous préférez déléguer cette partie technique, mon option Audit & SEO Local à 400 € comprend l’analyse complète de vos critères de vitesse et de performance, l’optimisation des temps de chargement et le paramétrage de vos rapports sur Google Search Console.

Pour les projets complets, sachez que ces optimisations de vitesse et de structure HTML sont intégrées par défaut dès mes offres de création de site.

Prêt à optimiser votre vitesse d’affichage ? Contactez-moi pour planifier un audit de performance

Pour approfondir le sujet, vous pouvez également lire mon guide de création d’un site vitrine professionnel en 2026 ou mon article consacré à la visibilité locale sur Google dans le département du Tarn.