Comment optimiser la diffusion d'images et le LCP dans une page en ligne

Comprendre la diffusion d'images et le LCP

Comprendre la diffusion d'images et le concept de Largest Contentful Paint (LCP) est essentiel si vous souhaitez améliorer la vitesse de chargement des pages.

Qu'est-ce que la diffusion d'images ?

La distribution d'images désigne un système ou une infrastructure conçue pour optimiser, transformer et distribuer efficacement des images aux utilisateurs finaux sur différents appareils et dans différentes conditions de réseau.

Un système de diffusion d'images combine généralement :

• Un réseau de diffusion de contenu (CDN) pour la mise en cache globale et une diffusion rapide
• Traitement d'image à la volée (redimensionnement, compression, conversion de format)
• Optimisation prenant en compte le périphérique et la fenêtre d'affichage

Les images représentent souvent 50 à 70 % de la taille totale de la charge utile d'une pageLorsque les images ne sont pas correctement optimisées, elles deviennent l'une des principales causes de :

• Temps de chargement des pages lent
• Scores Web Vitals de base médiocres
• Consommation élevée de bande passante
• Engagement utilisateur réduit
• Des taux de conversion inférieurs

La diffusion efficace des images garantit que les utilisateurs ne téléchargent que la taille d'image nécessaire à leur appareil et à leur fenêtre d'affichage, sans sacrifier la qualité visuelle.

Qu'est-ce que Largest Contentful Paint (LCP) ?

Le Largest Contentful Paint (LCP) est l'une des métriques Web Vitals essentielles de Google. Il mesure le temps écoulé entre la navigation sur la page et l'affichage complet du plus grand élément visible dans la fenêtre d'affichage.

Dans la plupart des cas, l'élément LCP est :

• Une image de bannière de héros
• Une grande image du produit
• Bloc promotionnel en vedette
• Un grand bloc de texte

Étant donné que l'élément LCP est fréquemment une image, une gestion inefficace des images, comme des fichiers de grande taille, un préchargement manquant, des requêtes retardées ou un manque de compression, augmentera directement le temps LCP.

L'optimisation de la diffusion des images joue un rôle crucial dans :

• Améliorer la vitesse de chargement perçue
• Obtenir un meilleur classement dans les résultats de recherche
• Augmenter l'engagement des utilisateurs
• Augmenter les conversions

Comment optimiser la diffusion d'images et le LCP

Il existe deux méthodes principales pour optimiser la diffusion des images et améliorer le LCP dans GemPages : ajuster la qualité des images au niveau de l’élément et configurer le comportement de chargement au niveau de la page. Nous allons détailler chaque méthode ci-dessous.

1. Configurez les paramètres des éléments d'image dans l'éditeur.

GemPages fournit un Paramètre de qualité qui vous permet de contrôler la manière dont les fichiers image sont rendus et affichés sur la page en ligne. Ce paramètre fait partie de Optimiser le LCP section à l'intérieur du panneau des paramètres de l'élément.

Pour y accéder:

• Ouvrez votre page dans l'éditeur GemPages
• Sélectionnez un élément lié à l'image
• Allez dans la barre latérale gauche
• Faites défiler jusqu'à la Optimiser le LCP

Cette configuration influe directement sur la taille de la variante d'image demandée par le navigateur, ce qui a un impact sur les performances de diffusion des images et sur le LCP.

Veuillez noter que le paramètre Qualité ne fonctionne que dans les conditions suivantes :

• L'image doit être hébergée sur le CDN de Shopify (c'est-à-dire qu'elle a été téléchargée via Shopify).
• L'élément utilisé doit être l'un des suivants :
  • Image(s)
  • Image du produit
  • Comparaison d'images

Fonctionnement du paramètre de qualité :

Le paramètre Qualité détermine la largeur de la variante d'image qui sera demandée en fonction de la largeur de la zone d'affichage de l'élément (la largeur réelle à laquelle l'image est affichée dans la mise en page de votre page).

Options disponibles:

• Le meilleur : Le système charge le fichier image original téléchargé sans le redimensionner. 
• Haut: Le système demande une variante d'image de taille à 1.5 × la largeur de la boîte d'affichage.
• Moyen: Le système demande une variante d'image de taille exacte à 1 × la largeur de la boîte d'affichage.
• Personnalisé: Le système calcule la taille d'image demandée à l'aide de la formule suivante : Largeur de la boîte d'affichage × X% (ratio défini par l'utilisateur ; valeur par défaut recommandée : 100 %).

Par exemple, vous avez téléchargé une image de 2 000 px de large et une zone d’affichage de 400 px de large. La taille de l’image demandée variera en fonction de l’option sélectionnée.

• Qualité optimale => charger le fichier image original (2000px)
• Élevé => Charge une variante d'image avec une largeur = 400 × 1.5 = 600px
• Moyen : Charge une variante d’image avec une largeur = 400 × 1 = 400px
• Personnalisé : 200 % → Charge une variante d’image avec une largeur = 400 × 2 = 800px

1 cas: Dans l'éditeur, sélectionnez l'élément Image(s), dans la barre latérale gauche, faites défiler vers le bas jusqu'à Optimiser LCP, set Qualité = la meilleure, aussi bien en mode ordinateur qu'en mode mobile :

Page en direct : Charger le fichier image d'origine

Nous avons testé les performances de cette page, et voici le résultat :

Livraison d'images doit être amélioré:

2 cas: Dans l'éditeur, sélectionnez l'élément Image(s), dans la barre latérale gauche, faites défiler vers le bas jusqu'à Optimiser LCP, set Qualité = Moyenne, aussi bien en mode ordinateur qu'en mode mobile :

Page en direct : charge une variante d'image avec une largeur de 500 px * 1 = 500 px

Ensuite, nous testons les performances de cette page, le résultat est mis à jour avec un point de performance supérieurainsi que, La diffusion des images est améliorée :

Que pouvons-nous apprendre de cela?

Le chargement du fichier image original peut augmenter inutilement sa taille, surtout lorsque la taille d'affichage est beaucoup plus petite que l'image téléchargée.

Définir la qualité sur un ratio personnalisé raisonnable garantit que la taille de l'image correspond à la largeur réelle de l'écran. Cela réduit la taille du fichier, améliore la vitesse de chargement et contribue à optimiser le LCP sans altérer la qualité visuelle.

Le réglage Optimiser le LCP est configuré de la même manière pour le Image du produit et Comparaison d'images éléments.

2. Autres configurations

Outre le réglage du Optimiser le LCP En configurant au niveau de l'élément, vous pouvez améliorer davantage la diffusion des images et le Largest Contentful Paint (LCP) en contrôlant la façon dont les images sont chargées lors du rendu initial de la page.

Ces optimisations portent sur quand et how Les images essentielles sont demandées par le navigateur.

Désactivation du « chargement différé des images »

Qu'est-ce que le chargement paresseux ?

Le chargement différé est une technique qui retarde le chargement des images jusqu'à ce qu'elles soient presque visibles à l'écran. Au lieu de charger toutes les images immédiatement au début du rendu de la page, le navigateur ne les charge qu'au fur et à mesure que l'utilisateur fait défiler la page.

👉 Vous pouvez en apprendre davantage sur le chargement différé dans cet article : Paramètres de publication – Chargement différé d'images

La désactivation du chargement différé pour les images critiques garantit que :

• Les images contenues dans la fenêtre d'affichage initiale sont immédiatement demandées.
• Le navigateur donne la priorité à la récupération de l'image LCP
• L'affichage des bannières principales ou des images des produits mis en avant n'est pas retardé.

Ceci est particulièrement important car, sur la plupart des pages de commerce électronique ou des pages de destination, l'élément LCP est généralement :

• Une image de bannière de héros
• Une grande image du produit
• Bloc promotionnel en vedette

Si ces images sont chargées de manière différée, le navigateur attend que le calcul de la mise en page soit terminé avant d'initier la requête, ce qui retarde directement LCP.

Activation de la « section de chargement différé »

Qu'est-ce qu'une section à chargement paresseux ?

Le chargement différé des sections est un paramètre de performance qui retarde le rendu de sections entières situées en dehors de la zone d'affichage initiale (sous la ligne de flottaison).

Au lieu de contrôler le chargement des images individuellement, ce paramètre agit au niveau structurel : la section entière (y compris ses images, son texte, ses scripts et sa structure de mise en page) est différée jusqu’à ce que l’utilisateur fasse défiler la page à proximité.

👉 Vous pouvez en savoir plus dans notre article du Centre d'aide ici : Activez le chargement différé et préchargez votre section et votre image

Lorsqu'il est activé :

• Les sections situées en dehors de la zone d'affichage initiale ne sont ni rendues ni demandées lors du premier chargement.
• La taille du DOM lors du rendu initial est réduite (Document Object Model – représente l'arbre structuré des éléments HTML que le navigateur construit lors du chargement d'une page).
• Moins de requêtes réseau se disputent la bande passante.
• La charge de travail du thread principal diminue

Cela améliore :

• Délai avant la première peinture (FCP): le contenu visible apparaît plus tôt
• stabilité LCPLes éléments critiques ne sont pas en concurrence pour les ressources.
• Réactivité globale de la page: interaction initiale plus fluide

En termes simples:

• Nous gardons le contenu visible se chargeant immédiatement
• Nous reportons la complexité sous-jacente.

Cette méthode garantit que le navigateur donne la priorité à ce que les utilisateurs voient en premier, tout en reportant le contenu qui n'est pas immédiatement nécessaire.

Activation de la « section de préchargement »

Qu'est-ce que la section de préchargement ?

L'option « Précharger la section » est un paramètre de performance qui indique au navigateur de prioriser le chargement des sections visibles dans la fenêtre d'affichage initiale. Pour plus d'informations, veuillez consulter : Fonctionnalité d'optimisation de page

Lorsque la section de préchargement est activée :

• Toutes les sections à l'intérieur de la fenêtre d'affichage (et pas seulement la toute première section) sont prioritaires.
• Le navigateur commence à récupérer leurs ressources critiques plus tôt.
• Les différences entre les fenêtres d'affichage des ordinateurs et des appareils mobiles sont correctement gérées.

Sans logique de préchargement, les navigateurs donnent généralement la priorité à la première section. Les autres sections, encore visibles au-dessus de la ligne de flottaison, peuvent être chargées ultérieurement, une fois la mise en page et le rendu terminés. Cela peut retarder le chargement des images et impacter directement le LCP (Low Page Charge).

Ceci est particulièrement important pour les mises en page réactives où :

• La fenêtre d'affichage sur ordinateur peut contenir 2 à 3 sections au-dessus du pli.
• La structure de la fenêtre d'affichage mobile diffère sensiblement
• Le préchargement garantit que le contenu prenant en compte la taille de la fenêtre d'affichage est traité en priorité élevée quel que soit le point de rupture.

Pourquoi cette combinaison fonctionne

L'objectif n'est pas de tout activer ou désactiver simultanément. L'optimisation des performances est optimale lorsque le comportement de chargement est coordonné de manière stratégique.

Une approche efficace comprend :

• Do pas Chargement différé des images critiques → protection LCP
• Chargement différé des sections non visibles → réduction du coût de chargement initial
• Précharger toutes les sections de la fenêtre d'affichage → aligner la priorité réseau sur la priorité visuelle

Cela garantit que ce que les utilisateurs voient en premier se charge immédiatement, tandis que le contenu non essentiel attend.

Nous avons testé une page produit avec la configuration suivante :

• L'image est de qualité optimale.
• La liste des produits contient des éléments d'image de produit, qualité = optimale
• Image à chargement différé is ON
• Section de chargement différé is de remise
• Section de préchargement est désactivé

→ Le résultat est :

Comme vous pouvez le constater, la livraison d'images doit être amélioré, car le temps de téléchargement des images est long :

Nous avons ensuite reconfiguré la page en utilisant la stratégie recommandée :

• Configurer le élément de configuration qui contient des images dans l'éditeur : Image, Image du produit ; qualité définie sur Moyenne
• Image à chargement différé is de remise
• Section de chargement différé is ON
• Section de préchargement is activé

Après avoir appliqué toutes les modifications, nous avons cliqué Publier dans l'éditeur de page pour mettre à jour la page en direct.

Ensuite, nous avons testé à nouveau les performances de cette page.. Le résultat a changé : Les performances de cette page sont optimisées.

La livraison d'images est amélioré:

Plats à emporter

L'optimisation des performances ne consiste pas à activer ou désactiver un seul paramètre.

C'est à propos de:

• Afficher des images de taille appropriée
• Chargement immédiat du contenu visible
• Reporter intelligemment le contenu non essentiel
• Prioriser les ressources en fonction de ce que les utilisateurs voient réellement

Lorsque ces stratégies fonctionnent de concert, la diffusion d'images et le LCP s'améliorent de manière constante sur tous les appareils, en particulier sur les pages riches en images comme les pages produits et les pages de destination.