Vous vous demandez pourquoi les images de votre site ne se convertissent pas au format WebP lorsque vous utilisez Leap d'Ezoic ? Cet article vise à répondre à cette préoccupation courante en fournissant des informations détaillées sur la manière dont Leap gère l'optimisation des images, en se concentrant particulièrement sur l'utilisation des formats de nouvelle génération tels que WebP. Vous apprendrez quelles sont les dépendances et les paramètres nécessaires pour que cette fonctionnalité fonctionne correctement, les conflits potentiels qui peuvent survenir et d'autres facteurs qui pourraient empêcher les images de se convertir en WebP. En comprenant ces éléments, vous pourrez résoudre les problèmes et optimiser plus efficacement les images de votre site.

Dans les navigateurs pris en charge, la fonction Next-Gen Formats servira les images au format WebP, conçu pour avoir une taille de fichier plus petite. Leap utilise le « lazy loading » pour optimiser les images avant qu'elles ne soient affichées sur le site. Le lazy loading ne charge une image que lorsqu'elle se trouve dans la fenêtre d'affichage visible, ce qui aide à optimiser les performances.

Les paramètres d'optimisation de Leap Définir une largeur et une hauteur explicites, Next-Gen Formats et Redimensionner les images dépendent du paramètre Lazy Load Images.

Lorsque l'image à optimiser est l'élément LCP (Largest Contentful Paint) - tel qu'une image vedette ou « héroïque » - elle sera convertie au format WebP sans lazy loading. Ces images auront des attributs comme loading="eager" et importance="high".

Pour inspecter les attributs et les noms de classe des images sur votre site, vous pouvez faire un clic droit dessus et sélectionner « inspecter » dans le menu.

Problèmes et conflits potentiels pour le paramètre Next-Gen Formats :

1. Si Leap charge correctement une image en lazy loading, elle aura le nom de classe « ezlazyloaded ». L'absence de ce nom de classe sur une image non-LCP suggère que quelque chose empêche Leap de la charger en lazy loading et de l'optimiser.

1. Assurez-vous que les images ont des attributs de largeur et de hauteur explicites définis. Cela aide les navigateurs à allouer de l'espace pour l'image pendant son chargement, améliorant ainsi la stabilité globale de la mise en page.

2. Inspectez régulièrement les attributs et les noms de classe des images sur votre site. Cela peut être fait en cliquant avec le bouton droit sur une image et en sélectionnant « inspecter » dans le menu. Recherchez le nom de classe "ezlazyloaded" pour vérifier que Leap a bien chargé l'image en mode lazy load.

3. Évitez d'utiliser d'autres plugins qui tentent d'optimiser la vitesse du site en chargeant les éléments en mode lazy load, car ils peuvent entrer en conflit avec les efforts d'optimisation de Leap. En particulier, soyez prudent avec des plugins tels que LazyLoad de WP Rocket.

4. Évitez d'assigner des noms de classe non-Ezoic contenant le mot « lazy » aux éléments d'image pour éviter les conflits avec le chargement en mode lazy de Leap.

5. N'assignez pas d'attribut d'événement "onload" aux éléments d'image, car cela pourrait perturber le chargement en mode lazy et affecter négativement le comportement du site.

6. Soyez conscient des attributs et des conditions spécifiques qui peuvent empêcher les images d'être converties au format WebP. Ceux-ci incluent :

   • Présence des attributs "data-image" ou "data-src"
   • Images au format .gif
   • Images hébergées par Cloudinary
   • Attributs "src" ou "srcset" vides

En suivant ces meilleures pratiques, vous pouvez vous assurer que la fonctionnalité des formats de nouvelle génération et le chargement en mode lazy fonctionnent de manière optimale pour améliorer les performances de votre site.