Lazy Load auf Webseiten nutzen & die Ladegeschwindigkeit von Bildern erhöhen

Heutzutage ist die Geschwindigkeit von Webseiten ein kritischer Faktor für SEO-Erfolg und Benutzererfahrung. Insbesondere bei visuell orientierten Seiten bietet die Lazy Load (Träges Laden)-Methode eine sehr effektive Lösung, um die Seitenladezeit zu verkürzen und den Ressourcenverbrauch zu reduzieren. In diesem Artikel werden wir die Lazy-Load-Implementierung sowohl für PHP-basierte Seiten als auch für WordPress mit technischen Details und Beispielcode erläutern.

Darüber hinaus wurde die interne SEO-Kompatibilität in Bezug auf die folgenden Inhalte sichergestellt:

Was ist Lazy Load?

Lazy Load ist eine Technik, bei der nicht alle Bilder beim Laden der Seite im Voraus geladen werden, sondern nur die Bilder, die auf dem Bildschirm des Benutzers sichtbar sind. Dadurch öffnet sich die Seite schneller und es wird Bandbreite gespart.

Lazy-Load-Implementierung in PHP-basierten Seiten

Für die Lazy-Load-Implementierung auf einer benutzerdefinierten, mit PHP entwickelten Seite kann das HTML5-Attribut loading="lazy" zu den Bild-Tags hinzugefügt werden:

<img src="resimler/urun.jpg" alt="Produktbild" loading="lazy">

Für eine fortgeschrittenere Steuerung können Sie jedoch eine JavaScript-gestützte Methode verwenden. Beispiel:

<img class="lazy" data-src="resimler/urun.jpg" alt="Produktbild">
<script>
document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

Dieser Code stellt sicher, dass nur die Bilder geladen werden, die in den sichtbaren Bereich gelangen. Dies ist besonders nützlich auf Seiten mit Grid- und Flex-Strukturen.

Verwendung von Lazy Load in WordPress

Ab WordPress-Version 5.5 wird loading="lazy" standardmäßig automatisch zu Bildern hinzugefügt. Für mehr Kontrolle können jedoch die folgenden Plugins bevorzugt werden:

a3 Lazy Load
Smush (Bildoptimierung + Lazy Load)
Lazy Load by WP Rocket

Beispiel für functions.php mit manueller Unterstützung:

function lazyload_images($content) {
  $content = preg_replace('/<img(.*?)src=/i', '<img$1loading="lazy" src=', $content);
  return $content;
}
add_filter('the_content', 'lazyload_images');

Mit diesem Code wird das Lazy-Loading-Attribut automatisch zu allen Bild-Tags im gesamten Artikelinhalt hinzugefügt.

Auswirkungen auf die Leistung

Durch die Verwendung der Lazy-Load-Technik:

Die Seitenladezeiten werden deutlich reduziert
Die Absprungrate sinkt, die SEO-Bewertungen steigen
Der Google PageSpeed Insights-Score wird positiv beeinflusst

Darüber hinaus ermöglicht Lazy Load in Mobile-First-Designs (siehe: Mobile First Design) und responsiven Grid-Strukturen eine effiziente Nutzung der Geräteressourcen.

Fazit

Die Verwendung von Lazy Load auf visuell orientierten Seiten ist eine der unverzichtbaren Techniken sowohl für die Benutzererfahrung als auch für den SEO-Erfolg. Diese Technik, die in PHP- und WordPress-basierten Seiten einfach zu implementieren ist und eine hohe Wirkung hat, funktioniert in Schnittstellen mit Grid- und Flex-Strukturen noch effizienter.

Weitere UI/UX- und Performance-Tipps finden Sie in den folgenden Inhalten: