[GELÖST] Lazy Load Probleme
- DirkD.72
-
Autor
- Senior Mitglied
-
- Beiträge: 57
- Dank erhalten: 4
Lazy Load Probleme wurde erstellt von DirkD.72
Posted 5 Monate 1 Tag her
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?
- WM-Loose
-
- Moderator
-
- Beiträge: 2848
- Dank erhalten: 492