Lazy Load Probleme
- DirkD.72
-
Autor
- Senior Mitglied
-
- Beiträge: 55
- Dank erhalten: 4
Hallöchen,
da ist man monatelang nicht hier, und dann häufen sich plötzlich wieder mehrere Dinge gleichzeitig.
Ich habe durch ein Tool die Meldung bekommen, dass meine Bilder nicht ordnungsgemäß laden.
Deshalb wollte ich mich jetzt mit dem Thema Lazy Load beschäftigen und habe dazu wieder meinen besten Freund ChatGPT gefragt.
Nun soll ich dafür aber irgendwelche Codes einfügen, und ich bin mir nicht sicher, ob ich am Ende vielleicht mehr Schaden anrichte, als ich verbessere.
Darum wollte ich einmal nachfragen, ob das, was ich hier mitschicke, so in Ordnung ist, damit meine Bilder besser und schneller geladen werden.
Da ich mich mit dem Thema überhaupt nicht auskenne, würde ich gern wissen, was ich beachten muss und ob diese Vorgehensweise, die ich hier kopiere, wirklich korrekt ist.
Im Template habe ich das eingesetzt was mir ChatGPT empfohlen hat, gespeichert den Cache geleert, dann die Seite neu aufgerufen und dann prüfen lassen.
ChatGpt meint dazu:
Sehr gut — du machst das exakt richtig und der Screenshot zeigt alles, was man wissen muss.👉 Ergebnis: Lazy Loading ist immer noch nicht aktiv.
Das erkenne ich daran, dass im Code (rechte Seite) dein Bild so steht:
💡 Wenn Lazy Loading aktiv wäre, würde dort mindestens eines dieser Merkmale stehen:
oder
Beides fehlt → das Bild wird sofort beim Seitenaufruf geladen → kein Lazy Load.🔧 Lösung (funktioniert sofort)Da du die Bilder direkt im Beitrag eingefügt hast (also manuell im Editor), erkennt Astroid sie nicht.
Wir lösen das einfach und dauerhaft update-sicher über ein kleines Plugin-Snippet.✅ Variante: Automatisches Lazy Loading für alle Bilder1. Datei anlegenPfad:
(Falls der Ordner
nicht existiert, bitte anlegen.)2. Folgenden Code einfügen:
3. Datei speichern → Cache leeren → Seite neu laden🔍 PrüfenDanach wieder Rechtsklick → „Untersuchen“ →
suchen.
Wenn alles korrekt ist, siehst du jetzt:
Damit ist Lazy Loading aktiv — ganz ohne händisches Nachrüsten bei jedem Beitrag.🧠 Warum das besser ist
) so schreiben, dass du ihn exakt einfügen kannst – mit vollständigem Pfad, Header und Prüfliste.
Möchtest du das?
da ist man monatelang nicht hier, und dann häufen sich plötzlich wieder mehrere Dinge gleichzeitig.
Ich habe durch ein Tool die Meldung bekommen, dass meine Bilder nicht ordnungsgemäß laden.
Ladezeiten / Performance: Viele Bilder auf der Seite können Wirkung auf Core Web Vitals haben. Empfehlenswert: Bildgrößen optimieren, Lazy-Loading einsetzen, Bildformate modern nutzen.
Deshalb wollte ich mich jetzt mit dem Thema Lazy Load beschäftigen und habe dazu wieder meinen besten Freund ChatGPT gefragt.
Nun soll ich dafür aber irgendwelche Codes einfügen, und ich bin mir nicht sicher, ob ich am Ende vielleicht mehr Schaden anrichte, als ich verbessere.
Darum wollte ich einmal nachfragen, ob das, was ich hier mitschicke, so in Ordnung ist, damit meine Bilder besser und schneller geladen werden.
Da ich mich mit dem Thema überhaupt nicht auskenne, würde ich gern wissen, was ich beachten muss und ob diese Vorgehensweise, die ich hier kopiere, wirklich korrekt ist.
Im Template habe ich das eingesetzt was mir ChatGPT empfohlen hat, gespeichert den Cache geleert, dann die Seite neu aufgerufen und dann prüfen lassen.
ChatGpt meint dazu:
Sehr gut — du machst das exakt richtig und der Screenshot zeigt alles, was man wissen muss.👉 Ergebnis: Lazy Loading ist immer noch nicht aktiv.
Das erkenne ich daran, dass im Code (rechte Seite) dein Bild so steht:
Code:
<img src="/images/dirk-dittrich-hochzeit-fotograf-gruender-streetwearx.jpg"
alt="Fotograf und Gründer der Brand StreetwearX Dirk Dittrich aus Sömmerda mit Kamera auf schwarz-weiß Foto"
width="313" height="433"
style="border: 6px inset #000000; margin-left: 10px; margin-bottom: 5px; float: right;">
Code:
<img loading="lazy" ...>
Code:
<img class="lazyload" data-src="images/..." ...>
Wir lösen das einfach und dauerhaft update-sicher über ein kleines Plugin-Snippet.✅ Variante: Automatisches Lazy Loading für alle Bilder1. Datei anlegenPfad:
Code:
/templates/astroid_template_zero/html/layouts/lazyload.php
Code:
layouts
Code:
<?php
// Automatisches Lazy Loading für alle Bilder in com_content-Artikeln
defined('_JEXEC') or die;
$body = $this->getBuffer('component');
$body = preg_replace('/<img(?![^>]*loading=)([^>]+)>/i', '<img loading="lazy"$1>', $body);
$this->setBuffer($body, 'component');
?>
Code:
<img>
Wenn alles korrekt ist, siehst du jetzt:
Code:
<img loading="lazy" src="..." alt="..." ...>
- alle bestehenden und zukünftigen Blogbilder profitieren automatisch
- keine Eingriffe im Editor
- Google erkennt „native lazy loading“ direkt → bessere LCP- und Speed-Scores
Code:
tp_power
Möchtest du das?
Last Edit:2 Tage 18 Stunden her
von DirkD.72
Letzte Änderung: 2 Tage 18 Stunden her von DirkD.72.
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- WM-Loose
-
- Moderator
-
- Beiträge: 2502
- Dank erhalten: 447
Viel zu kompliziert. Wir haben das kurz und knapp hier einmal auf der JP Com Seite erklärt.
www.joomlaplates.com/forum/joomla-5-temp...azy-load-images.html
Felder leer lassen und dann nur eintragen was an Bildern ausgeschlossen werden soll (es gibt Fälle, da müssen oder vielmehr sollen die Bilder direkt geladen werden. Solche Bilder müssen dann angegeben werden).
Ich selbst halte generell nichts von Lazy Load, Minify usw. und nutze keine dieser Optimierungstools .
Bilder sollten vielmehr eine entsprechende optimierte Größe /Formate in Breite und Höhe sowie reduzierte Pixel haben, was man sehr gut im Joomla Medienmanager anpassen kann.Die Nachteile von Lazy Loading sind potenzielle Ladezeiten, die Nutzererfahrung bei schnellem Scrollen, Komplexität durch zusätzlichen Code und negative Auswirkungen auf die Suchmaschinenoptimierung (SEO), falls Inhalte nicht richtig indexiert werden. Insbesondere kann Lazy Loading den größten sichtbaren Inhalt ( Largest Contentful Paint - LCP ) negativ beeinflussen, wenn das Hauptelement ebenfalls verzögert geladen wird.
www.joomlaplates.com/forum/joomla-5-temp...azy-load-images.html
Felder leer lassen und dann nur eintragen was an Bildern ausgeschlossen werden soll (es gibt Fälle, da müssen oder vielmehr sollen die Bilder direkt geladen werden. Solche Bilder müssen dann angegeben werden).
Ich selbst halte generell nichts von Lazy Load, Minify usw. und nutze keine dieser Optimierungstools .
Bilder sollten vielmehr eine entsprechende optimierte Größe /Formate in Breite und Höhe sowie reduzierte Pixel haben, was man sehr gut im Joomla Medienmanager anpassen kann.Die Nachteile von Lazy Loading sind potenzielle Ladezeiten, die Nutzererfahrung bei schnellem Scrollen, Komplexität durch zusätzlichen Code und negative Auswirkungen auf die Suchmaschinenoptimierung (SEO), falls Inhalte nicht richtig indexiert werden. Insbesondere kann Lazy Loading den größten sichtbaren Inhalt ( Largest Contentful Paint - LCP ) negativ beeinflussen, wenn das Hauptelement ebenfalls verzögert geladen wird.
JP-Admin
Mitglied im forum.joomla.de/
Mitglied im forum.joomla.de/
Last Edit:2 Tage 35 Minuten her
von WM-Loose
Letzte Änderung: 2 Tage 35 Minuten her von WM-Loose.
Folgende Benutzer bedankten sich: DirkD.72
Bitte Anmelden oder Registrieren um der Konversation beizutreten.