Des images de héros Elementor plus rapides en 2 minutes !

Des images de héros Elementor plus rapides

Elementor, un éditeur de pages WordPress populaire, simplifie la conception de pages. Malheureusement, il ralentit souvent les sites. Parfois en raison d'erreurs de l'utilisateur et parfois en raison des choix de conception d'Elementor. Un exemple que je vois presque quotidiennement est la façon dont Elementor gère les images de héros. Par défaut, Elementor utilise des images d'arrière-plan pour celles-ci, ce qui ralentit le chargement de la page à chaque fois.

L'attrait des images d'arrière-plan Elementor

Elementor ajoute des images de héros comme image d'arrière-plan par défaut. Tout en modifiant la page avec Elementor, cliquez simplement sur le premier conteneur, naviguez vers le style et ajoutez votre image. C'est facile, pratique et à l'épreuve des idiots. Si cela vous suffit, arrêtez de lire ici, mais si vous vous souciez de vos visiteurs, lisez la suite et apprenez comment créer des images de héros Elementor de la bonne manière.

Le problème avec les images d'arrière-plan Elementor

Maintenant, qu'est-ce qui ne va pas avec les images d'arrière-plan, pourriez-vous demander ? Les images d'arrière-plan sont connues pour ce comportement : elles couvrent tout l'arrière-plan d'un élément. Cela fait ce que cela doit faire. Mais à un coût de performance :

• Découverte tardive : D'un point de vue technique, les images d'arrière-plan sont loin d'être idéales. Les images d'arrière-plan Elementor ne sont pas immédiatement découvertes dans le html. Ces images d'arrière-plan sont liées dans les feuilles de style. Comme les feuilles de style doivent être téléchargées et analysées séparément, cela signifie qu'elles sont découvertes beaucoup plus tard au cours du processus de rendu.
• Pas optimisé pour la vitesse :  Les images d'arrière-plan ne sont pas optimisées pour la vitesse car il leur manque des propriétés plus récentes comme le chargement différé (lazy loading) natif, fetchpriority et le décodage asynchrone.
• Pas réactif : Enfin et surtout, les images d'arrière-plan Elementor ne sont pas réactives et chargeront toujours une image de taille bureau complète, même pour les petits appareils mobiles.

Je n'entrerai pas beaucoup plus dans les détails (si vous êtes intéressé, lisez à propos de [url=/pagespeed/background-images-are-evil]pourquoi les images d'arrière-plan sont le mal[/url]) mais il suffit de dire qu'une page avec cette configuration échouera probablement aux core web vitals.

La correction en 2 minutes pour les images d'arrière-plan lentes

Les images d'arrière-plan lentes ne sont pas forcément un problème. Avec un simple ajustement CSS, elles peuvent être transformées en images rapides et réactives.  Le secret ? Utiliser object-fit: cover pour mettre l'image à l'échelle et le combiner avec position: relative sur le conteneur et position: absolute sur l'image. 

Fait amusant : Je me suis chronométré aujourd'hui en convertissant des images d'arrière-plan Elementor en images réactives ultra-rapides. Cela m'a pris moins de 2 minutes ! 

Si cela semble compliqué, ne vous inquiétez pas ! Je vous guiderai étape par étape. Et il y a même une vidéo explicative qui vous attend à la fin !

Étape 1 : ajoutez les styles nécessaires

Pour corriger les images d'arrière-plan lentes, commencez par appliquer quelques styles CSS essentiels. Ces styles feront en sorte que l'image se comporte comme une véritable image de couverture d'arrière-plan et garantissent  qu'elle n'entre pas en conflit avec les divs d'aide d'Elementor.

/* Le conteneur parent relatif */
  .relative{
      position: relative;
  }
  
  /* Réinitialise les divs d'aide d'Elementor pour éviter les conflits de mise en page */
  .relative .elementor-container, 
  .relative .elementor-column, 
  .relative .elementor-widget-wrap {
      position: initial;
  }
  
  /* La nouvelle image de héros améliorée */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

Ce que cela fait :

• .relative : Rend le conteneur parent relatif pour positionner les éléments enfants à l'intérieur.
• .relative .elementor-* : Réinitialise les divs d'aide d'Elementor pour éviter les conflits de mise en page.
• .heroimg : Garantit que l'image s'adapte pour couvrir le conteneur tout en se plaçant derrière lui.

Comment ajouter les styles :

• Naviguez vers votre Tableau de bord WordPress.
• Allez dans Apparence > Personnaliser.
• Cliquez sur CSS additionnel.
• Collez le code CSS ci-dessus et enregistrez vos modifications.

Cela pose les bases pour convertir ces images d'arrière-plan lentes en images de héros réactives et optimisées. Ensuite, appliquez les classes .relative et .heroimg à votre section héros pour voir la magie opérer ! 

Étape 2 : Préparez le conteneur

Maintenant que les styles sont en place, il est temps de préparer le conteneur pour la nouvelle image de héros. Cela implique de supprimer l'image d'arrière-plan existante et d'appliquer la classe .relative au conteneur.

Étapes :

• Modifiez le conteneur :
• Allez dans votre éditeur Elementor et sélectionnez le conteneur où l'image de héros est actuellement appliquée.
• Supprimez l'image d'arrière-plan :
• Naviguez vers l'onglet Style.
• Localisez la section Arrière-plan où l'image est appliquée.
• Cliquez sur l'icône de corbeille pour supprimer l'image d'arrière-plan.
• Appliquez la classe .relative :
• Passez à l'onglet Avancé.
• Sous Classes CSS, tapez relative.

Étape 3 : Ajoutez une nouvelle image et appliquez les nouvelles classes

Le conteneur étant prêt, il est temps d'ajouter l'image de héros réactive et optimisée en utilisant Elementor. Voici comment :

À quoi s'attendre : Lors de l'étape finale, l'image de héros peut sembler mal alignée ou étrange avant l'application des classes ! C'est normal ! La classe .heroimg transformera l'image en une image de héros réactive en pleine largeur qui se comporte comme une couverture d'arrière-plan. Une fois terminé, votre image de héros optimisée se placera derrière le conteneur, offrant le même impact visuel avec des performances considérablement améliorées.

Étapes :

• Ajoutez un élément Image :
• Dans l'éditeur Elementor, cliquez sur l'icône plus dans le coin supérieur gauche pour ajouter un nouvel élément.
• Glissez et déposez le widget Image dans le conteneur supérieur (celui avec la classe .relative).
• Téléchargez et sélectionnez votre image :
• Dans les paramètres de l'image sur le panneau de gauche, cliquez sur l'espace réservé à l'image.
• Téléchargez l'image plein écran que vous souhaitez utiliser ou sélectionnez-en une existante dans votre galerie média WordPress.
• Appliquez la classe .heroimg :
• Avec l'image toujours sélectionnée, naviguez vers l'onglet Avancé dans le menu Elementor.
• Dans le champ Classes CSS, tapez heroimg.

Terminé, profitez d'une page plus rapide !

Vous y êtes arrivé ! À ce stade, votre image de héros est entièrement optimisée et prête à offrir une expérience de page plus rapide. 

Une fois la page publiée, inspectez l'élément, et vous remarquerez quelque chose de génial : l'image d'arrière-plan lente a été remplacée par une image de premier plan réactive et rapide. Cette image est maintenant probablement chargée avec une fetchpriority élevée, garantissant qu'elle se charge plus rapidement, améliorant à la fois les Core Web Vitals et l'expérience utilisateur.

Félicitations pour la création d'une page plus rapide et plus efficace. Vos visiteurs remarqueront la différence !

Avant : 2.6 sec

Après : 0.6 sec

Bonus : préchargez l'image de héros

Regardez la démonstration complète sur YouTube.