Fragen Sie sich, warum die Bilder auf Ihrer Website beim Einsatz von Ezoics Leap nicht in das WebP-Format konvertiert werden? Dieser Artikel soll diese häufige Sorge ansprechen, indem er detaillierte Informationen darüber liefert, wie Leap die Bildoptimierung handhabt, insbesondere mit dem Schwerpunkt auf der Verwendung von Next-Gen-Formaten wie WebP. Sie erfahren mehr über die Abhängigkeiten und Einstellungen, die für die korrekte Funktion dieser Funktion erforderlich sind, mögliche Konflikte, die auftreten können, und andere Faktoren, die verhindern könnten, dass Bilder in WebP konvertiert werden. Durch das Verständnis dieser Elemente können Sie die Bilder Ihrer Website effektiver beheben und optimieren.

In unterstützten Browsern wird die Funktion „Next-Gen Formats“ Bilder im WebP-Format bereitstellen, das für eine kleinere Dateigröße ausgelegt ist. Leap verwendet "Lazy Loading", um Bilder zu optimieren, bevor sie auf der Website angezeigt werden. Lazy Loading lädt ein Bild nur, wenn es sich im sichtbaren Bereich befindet, was die Leistung optimiert.

Die Leap-Optimierungseinstellungen Explizite Breite und Höhe festlegen, Next-Gen Formats und Bilder skalieren hängen von der Einstellung Bilder Lazy Loaden ab.

Wenn das zu optimierende Bild das LCP (Largest Contentful Paint) Element ist—wie ein Feature- oder "Hero"-Bild—wird es ohne Lazy Loading in das WebP-Format konvertiert. Solche Bilder haben Attribute wie loading="eager" und importance="high".

Um die Attribute und Klassennamen von Bildern auf Ihrer Website zu überprüfen, können Sie mit der rechten Maustaste darauf klicken und im Menü „Inspektieren“ auswählen.

Mögliche Probleme und Konflikte für die Einstellung „Next-Gen Formats“:

1. Wenn Leap ein Bildelement erfolgreich lazy loadet, wird es eine Klasse namens "ezlazyloaded" haben. Das Fehlen dieser Klassennamen bei einem Nicht-LCP-Bild deutet darauf hin, dass etwas Leap daran hindert, es lazy zu loaden und zu optimieren.

1. Stellen Sie sicher, dass Bilder explizite Breiten- und Höhenattribute haben. Dies hilft Browsern, Platz für das Bild zu reservieren, während es geladen wird, und verbessert die allgemeine Layoutstabilität.

2. Überprüfen Sie regelmäßig die Attribute und Klassennamen der Bilder auf Ihrer Website. Dies kann durch Rechtsklick auf ein Bild und Auswahl von „Untersuchen“ im Menü erfolgen. Suchen Sie nach dem Klassennamen "ezlazyloaded", um zu bestätigen, dass Leap das Bild erfolgreich verzögert geladen hat.

3. Vermeiden Sie die Verwendung anderer Plugins, die versuchen, die Seitengeschwindigkeit durch verzögertes Laden von Elementen zu optimieren, da sie mit den Optimierungsbemühungen von Leap in Konflikt geraten können. Seien Sie insbesondere vorsichtig mit Plugins wie LazyLoad von WP Rocket.

4. Vermeiden Sie es, Bilderlementen nicht-Ezoic-Klassennamen mit dem Wort „lazy“ zuzuweisen, um Konflikte mit dem verzögerten Laden von Leap zu verhindern.

5. Weisen Sie Bilderelementen kein „onload“-Ereignisattribut zu, da dies das verzögerte Laden stören und das Verhalten der Website negativ beeinflussen könnte.

6. Seien Sie sich spezifischer Attribute und Bedingungen bewusst, die verhindern können, dass Bilder in das WebP-Format konvertiert werden. Diese beinhalten:

   • Vorhandensein von "data-image" oder "data-src" Attributen
   • Bilder im .gif-Format
   • Bilder, die von Cloudinary gehostet werden
   • Leere "src" oder "srcset" Attribute

Wenn Sie diese bewährten Verfahren befolgen, können Sie sicherstellen, dass die Next-Gen-Formats-Funktion und die Funktionalität des verzögerten Ladens optimal funktionieren, um die Leistung Ihrer Website zu verbessern.