Beschleunigen Sie WordPress mit Lazy Loading für Bilder und Videos (kein Plugin erforderlich)
Lazy Loading ist eine der einfachsten und effektivsten Möglichkeiten, das Laden Ihrer WordPress-Site zu beschleunigen, insbesondere auf Mobilgeräten – und Sie benötigen für die Implementierung nicht einmal ein Plugin. In dieser Anleitung zeigen wir Ihnen, wie Sie das native Lazy Loading für Bilder und Videos mithilfe von sauberem, leichtem Code manuell aktivieren.
Was ist Lazy Loading?
Lazy Loading ist eine Performance-Technik, bei der Medieninhalte wie Bilder und Videos erst geladen werden, wenn sie im Ansichtsbereich des Benutzers erscheinen (d. h. auf dem Bildschirm sichtbar werden). Dadurch wird die Anzahl der HTTP-Anfragen beim ersten Laden der Seite reduziert, wodurch die Website schneller und schlanker wird.
Warum Lazy Loading für die WordPress-Leistung entscheidend ist
- Reduziert das anfängliche Seitengewicht: Seiten werden schneller geladen, da im Voraus weniger Ressourcen angefordert werden.
- Spart Bandbreite: Unbekannte Medien werden nur bei Bedarf heruntergeladen.
- Verbessert die Core Web Vitals: Lazy Loading verbessert Metriken wie Largest Contentful Paint (LCP).
- Bessere SEO und Benutzererfahrung: Geschwindigkeit ist ein Rankingfaktor. Eine schnellere Website hält die Nutzer bei der Stange.
So implementieren Sie natives Lazy Loading für Bilder
Seit WordPress 5.5 wird natives Lazy Loading automatisch zu Bild-Tags hinzugefügt mit dem loading="lazy" Attribut. Mit minimalen Anpassungen können Sie die ordnungsgemäße Funktion sicherstellen:
<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">Bewährte Methode: Immer angeben width Und height um Layoutverschiebungen zu vermeiden (wichtig für den CLS-Score).
So erzwingen Sie Lazy Loading für alle Bilder (optional)
Wenn einige Themen oder Plugins das Hinzufügen überspringen loading="lazy", können Sie es mit einem einfachen JavaScript-Snippet erzwingen:
<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>Fügen Sie dieses Skript zu Ihrer Fußzeile hinzu oder verwenden Sie ein untergeordnetes Design, um es ordnungsgemäß einzubinden.
Lazy Loading von Videos ohne Plugins
Videos sind schwer. Eingebettete Videos von YouTube oder Vimeo laden mehrere externe Skripte. Um sie ohne Plugins verzögert zu laden, ersetzen Sie den Iframe durch eine anklickbare Bildvorschau und laden Sie das Video erst nach der Interaktion.
Beispiel: Lazy Load YouTube-Video
<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>Ersetzen VIDEO_ID mit der tatsächlichen YouTube-Video-ID.
Hilfreiches Styling (optional)
Fügen Sie einige grundlegende CSS hinzu, damit es gut aussieht:
.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }Warum kein Plugin verwenden?
Plugins sind praktisch, bringen aber oft zusätzliche Skripte, Stile oder unnötigen Ballast mit sich. Manuelles Lazy Loading bietet Ihnen:
- Mehr Kontrolle darüber, was geladen wird
- Keine Auswirkungen auf die Leistung durch Funktionen von Drittanbietern
- Sauberere Front-End-Ausgabe
Wann Sie stattdessen ein Plugin in Betracht ziehen sollten
Wenn Sie eine große Website mit häufigen Medien-Uploads betreiben oder Mitwirkende haben, die mit Code nicht vertraut sind, sollten Sie diese optimierten Lazy-Loading-Plugins in Betracht ziehen:
- LiteSpeed Cache (sofern Ihr Server dies unterstützt)
- FlyingPress
- Leistungsfragen (Prämie)
Bedenken Sie jedoch, dass selbst bei diesen Plugins eine Überprüfung des tatsächlichen Lazy-Load-Verhaltens in DevTools ein Muss ist.
Abschließende Tipps
- Verwenden Sie Browser DevTools, um zu testen, ob
loading="lazy"wird angewendet - Testen Sie Ihre Site mit Google PageSpeed Insights
- Verfolgen Sie LCP-Verbesserungen, nachdem Lazy Loading aktiviert wurde
Benötigen Sie Expertenhilfe zur Verbesserung der WordPress-Geschwindigkeit ohne aufgeblähte Plugins? Probieren Sie ein kostenloses manuelles Audit aus unter SpeedWP Pro – wir optimieren von Grund auf.
