Aktueller Stand loading="lazy"

    Hi,


    ich nutze die aktuellste Joomla-Version, das Template ist auf Basis von Bootstrap selbst geschrieben. Nun möchte ich in meiner Webseite lazy-loading integrieren, ganz ohne Javascript, sondern das native Browser-lazy-loading.


    Hier sehe ich bei Joomla nicht durch, da sich in den letzten Monaten und Jahren immer wieder was geändert hat. Es fing mit einem Plugin an, dann konnte man es irgendwie im Media Manager zuschalten etc.


    Wie ist denn nun der aktuelle Stand? Kann mich da bitte jemand aufklären, wie ich lazy loading integrieren kann?



    MfG neoman

    Das Plugin basiert auf Javascript, was ich nicht möchte, sondern ich möchte die Browser-native lazyload-Funkionalität nutzen.


    Dazu ist ja lediglich im <img>-Tag folgendes aufzunehmen. loading="lazy"


    Das soll Joomla automatisch machen, nur ist mir nicht klar, wie?



    MfG neoman

    Genau. Das funktioniert. Aber nur, wenn man den media Manager von Joomla für das Einfügen verwendet. zero24 hat zum Themaeinen Artikel für das JCM geschrieben. Er weist darin auf sein Plugin hin, welches Lazyload automatisch aktiviert, egal, wie das Bild eingefügt wurde. Das Plugin wurde für Joomla 3 geschrieben, funktioniert aber auch in der 4er Version.

    Also fügt Joomla nicht automatisch zu jedem <img> das loading="lazy" hinzu?


    Man muss dies entweder händisch im Editor machen oder das oben genannte Plugin verwenden. Hab ich das so richtig verstanden?


    Es sollte doch das mal in den Joomla-Core integriert werden, anstatt das mit dem Plugin, so habe ich das jedenfalls mal irgendwo gelesen.

    Joomla 4 hat das mittlerweile nahezu überall "automatisch" drinnen. Setzt aber voraus, dass man mit Joomla-Hausmitteln arbeitet bzw. die Bilder mit Joomla-Hausmitteln eingesetzt hat (weie oben ja schon gesagt). Einleitungs- und Beitragsbilder z.B. müssen dann auch ein spezifisches Joomla-eigenes JLayout nutzen bzw. ein entsprechend angepasstes nutzen, wenn ein Template das überschreibt. Joomla-Hausmittel verwenden im letzten Schritt https://github.com/joomla/joom…uts/joomla/html/image.php


    Was aber immer nur dann entsprechend funktionieren kann, wenn so ein "komischer Wurm" am Bildpfad hängt.

    Zitat von neoman666

    Also fügt Joomla nicht automatisch zu jedem <img> das loading="lazy" hinzu?


    Man muss dies entweder händisch im Editor machen oder das oben genannte Plugin verwenden. Hab ich das so richtig verstanden?

    Also: Jain ;) Manche Bilder per se automatisch, ohne, dass man was mitbekommt oder speziell einstellen muss, andere nein.


    Und das o.g. Plugin auch nicht überall, aber nahezu. Bei einem "Eigenen Modul" kann man "Inhalte vorbereiten" aktivieren, wenn om Editor ein Bild ist und das Plugin greift zu. Andere Module haben dieses Feature vielleicht nicht oder sind noch nicht auf aktuell möglichem Stand, weil es auch andere Hausmittel-Wege gibt, die man in sein Werk integrieren könnte.

    Das Plugin setzt kein width und height, was aber verständlich ist, mindestens der Seiten-Performance wegen, wenn es jetzt auch noch diese Werte, wenn sie fehlen, ermitteln würde.


    Man kann nicht alles haben ;) Und ich bin froh, dass der Joomla-Core da (noch) nicht zu radikal eingreift, sondern noch überschaubar "aushebelbar".

    Hi neoman!


    Nein, die Standardeinstellung meines Plugins ist das von dir gewünschte automatische Hinzufügen des loading="lazy" Attributs zu jedem Bild, welches du nicht über die Einstellungen ausschließt (Unterstützte Nachladelösungen: Natives Laden auf Browser-Ebene für moderne Browser (nur Pro-Version)". Als Alternative sind noch 2 JavaScript Bibliotheken eingebaut, die du aber explizit auswählen musst, wenn du möchtest.

    Zitat von Kubik-Rubik

    Hi neoman!


    Nein, die Standardeinstellung meines Plugins ist das von dir gewünschte automatische Hinzufügen des loading="lazy" Attributs zu jedem Bild, welches du nicht über die Einstellungen ausschließt (Unterstützte Nachladelösungen: Natives Laden auf Browser-Ebene für moderne Browser (nur Pro-Version)". Als Alternative sind noch 2 JavaScript Bibliotheken eingebaut, die du aber explizit auswählen musst, wenn du möchtest.

    Hallo Viktor,


    sorry, wenn ich hier dein Plugin falsch beschrieben habe, das war keine Absicht sondern leider Unwissenheit. Du hast es zum Glück richtig gestellt.



    MfG neoman

    Vielen Dank für deine ausführliche Anleitung, die mir sehr geholfen hat. Jedoch scheint das lazy-loading aus irgend einen Grund nicht zu funktionieren, alle Bilder werden "eager" geladen.


    Was muss ich beachten? Meine Zeile sieht z.B. so aus:


    Code
    <img loading="lazy" src="meinbild.jpg" width="1200" height="900">


    Das Bild wird aber nicht erst geladen, wenn es in den Viewport komt, sondern schon bei Seitenaufruf. Was mache ich falsch, bzw. was habe ich vergessen?

    Kann es sein das die Browser-interne lazy-loading Funktionalität nicht lokal funktioniert? z.B. unter Xampp?

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: 2 Beiträge von neoman666 mit diesem Beitrag zusammengefügt.

    Zitat von neoman666

    Das Bild wird aber nicht erst geladen, wenn es in den Viewport komt, sondern schon bei Seitenaufruf.

    Woher weißt du das denn? Geladen werden sie schon deutlich bevor sie in den Viewport kommt.


    Wenn ich mit Firefox in der Netwerkanalyse mit Filter "Grafiken" bin, sehe ich, dass einige Bilder auf einem Desktop-Bildschirm schon da sind, obwohl noch nicht im Viewport. Wenn ich dann ganz langsam runterscrolle, sehe ich, dass weitere Bilder ebenfalls früher nachgeladen werden.


    Das entscheidende ist, dass Bilder noch nicht geladen sind, wenn sie noch "ziemlich weit weg sind."

    Wenn du dein Bildbeispiel also sehr weit unten auf die Seite setzt. Netzwerkanalyse > Grafiken anschaust, sollte es erst mal nicht in der Liste sein.

    Genau so habe ich das überprüft. Firefox -> Entwicklertools -> Netzwerkanalyse. Dort sehe ich, das bereits alle Bilder geladen sind, obwohl ich noch gar nicht gescrollt habe.


    Ich habe mal ohne Joomla eine einfache HTML-Seite erstellt, dort ein paar Bilder eingefügt und dann lokal getestet. Auch hier werden alle Bilder schon im Voraus geladen, obwohl ich noch gar nicht gescrollt habe. Lade ich das ganze auf meinem Webspace hoch, funktioniert das ganze.


    Gibt es da einen Unterschied zwischen lokal und onilne?

    Nochmal zum Thema. In einem ganzen normalen Joomla-Artikel funktioniert das native lazy-loading. Habe einfach folgende Zeile eingefügt.


    Code
    <img src="japan.jpg" alt="japan" loading="lazy" width="1920" height="1280">

    Nun verwende ich aber auch Module, z.B. mod_category, wo ich mir durch ein Override die Artikelbilder (Intro und Full Image) ausgeben lasse. Hier funktioniert das lazy-loading nicht, warum auch immer. Die Bilder werden sofort geladen, obwohl diese gar nicht im Viewpoint sondern ganz am Ende der Seite sind.


    Warum das so ist kann ich mir nicht erklären. Die Bilder in den Modulen werden genau so wie im Artikel selbst eingebunden, also mit dem selben Code wie oben gezeigt.


    Wo könnte hier der Fehler liegen?



    MfG neoman