loading="lazy" optimieren

[top]

Seit kurzem lässt sich ja bei Bildern loading="lazy" in der Config aktivieren. Leider lässt sich das nur global ein oder ausschalten. Macht aber nur Sinn bei Bildern die beim Seitenaufbau noch nicht im Viewport sind.
(Siehe hier: https://web.dev/lcp-lazy-loading/ )

Da ich das beim Titelbild nicht haben möchte, ergänze ich einfach folgendes bei meiner Datei in "frontend_render/":

Code: Select all

//
// Erstes Bild bei Lazy-Loading auf "eager" setzen.
//

$content['all'] = preg_replace('/ loading="lazy"/', ' loading="eager"', $content['all'], 1); 

Vielleicht hat ja jemand das gleiche Problem.

(Und falls ich das mal bei mehreren Bildern deaktivieren will, kann ich die "1" am Ende durch eine entsprechend größere Zahl ersetzen.)

[Oliver Georgi]

Ich habe das selbst bisher nicht auf dem Schirm gehabt, glaube aber nicht an einen ernsthaften Impact. Die meisten Lead Bilddaten wie Logo etc. werden in aller Regel auch eher von Hand gebaut und dort greifen wiederum keine Automatismen von phpwcms.

[top]

Logo & Co. sind auch nicht das Problem.

Meistens gibt es bei mir aber ein Titelbild (oder gar Slider) was über das Backend für jede Unterseite editierbar sein sollte. Diesem will ich kein "lazy" verpassen. (Und bei einem Titel-Slider halt nicht das erste Bild, welches beim Seitenaufruf schon sichtbar ist.)

Wie dramatisch die Warnung beim Pagespeed-Test tatsächlich ist, kann ich nicht beurteilen. Zumindest lässt sich der Test mit meiner Ergänzung im "frontend-render/" besänftigen.

Als Nächstes habe ich mir vorgenommen zu schauen ob man "srcset" ( https://www.mediaevent.de/html/srcset.html ) sinnvoll in einem Contentpart nutzen kann. Das habe ich letzte Woche zum ersten mal in einer statischen Seite verwendet und ich bin mir noch nicht sicher wie man das in phpwcms am geschicktesten nutzen könnte. Kann aber etwas dauern bis ich dazu komme...

[Oliver Georgi]

Du kannst die wichtigsten Templates inzwischen selbst bauen, dann ist auch srcset unproblematisch realisierbar: srcset="im/HxWxC/hash, …". Damit löst Du eigentlich auch Dein lazy Loading Problem, z.B. beim Slider. Da hast Du auch teils die Wahl, auf das erste Bild zu prüfen.

[top]

Danke schon mal für den Schubs in die richtige Richtung.
Die Templates der Contentparts bastele ich mir in der Regel auch schon nach Bedarf zurecht.

(In meinem Größenwahn würde ich ja am liebsten alle Zwischengrößen und Umschaltpunkte über das Backend editierbar gestalten. Irgendwo höre ich aber meine innere Stimme der Vernunft, dass das nicht sinnvoll ist. Der Redakteur sollte höchstens eine Handvoll optimierter Vorlagen haben, aus denen er auswählen kann. Sonst gibt das nur Chaos wenn das Editieren zu komplex wird. Es soll ja auch ein "Content Management System" bleiben und sich nicht in Richtung "Webbaukasten" entwickeln.)