Wie Lazy Load selektiv steuern?

  • Gelöst Anonymous User 20597857

    (@anonymized-20597857)


    vor 2 Jahren

    Zugegeben, ich beschäftige mich erst jetzt mit dem Thema Performance Optimierung.
    Dies, weil meine bisherigen Sites meist auf schnellen Hostern liefen, mit leichten Themes, wenig Plugins und wenigen, aber optimierten Bildern betrieben wurden.
    Da sind gute Ergebnisse in den div. Speedtests keine Kunst.

    Mein Bruder aber ist bei einem Verbund von Medienportalen dabei und ist momentan ganz wild darauf, alle Optimierungen aus den riesigen Magazin-Sites mit zig-vielen großen Bildern, endlos vielen Rubriken usw. herauszuholen.
    So wurde ich angesteckt, dass auch mal zu hinterfragen, wie man noch mehr herausholen kann.

    So habe ich mir auch mal alle bekannten und weniger bekannten Optimierung-Plugins angesehen, getestet und versucht, daraus zu lernen. Doch das Thema scheint sehr komplex zu sein.

    Mein favorisiertes Plugin ist dzt. „WP Fastest Cache„: Wenig Settings, alles deutsch und bringt auch als Free echte Pluspunkte.

    Doch mit jedem, trotz dem drehen an allen Schrauben immer noch angemeckerten Kriterium tauchen mehr Fragen auf.
    Jetzt grade etwa das mit dem „Lazy Load“. Das soll ja gut sein für Bilder, welche unter dem „Above the Fold“ sind. Doch es soll kontraproduktiv sein, wenn dieses „faule Laden“ auch auf Bilder angewandt wird, welche eh oben sind. Oder so.
    Dieser Kritikpunkt taucht eigentlich bei allen Performance Optimierung-Plugins auf, egal was man mit welcher Empfehlung einstellt.

    Nach dem langen Wort zum Sonntag endlich erste Fragen:
    Soll man „Lazy Load“ in WP generell abschalten, wenn ja wie?
    Reicht der (grade nicht zu findende Eintrag) in der wp-config?
    Wie könnte man das besser lenken, also das nur die sofort sichtbaren Bilder vom Lazy Load ausgenommen werden?

    Anm.: Alle Tests erfolgen lokal, also nur mit dem erwähnten Google Chrome Tool „Lighthouse„. Ich habe grade keine offizielle Site, wo ich das online testen und die Ergebnisse öffentlich zeigen könnte. Die Vielfalt an damit erreichbaren Test-Portalen würde mich wahrscheinlich noch mehr überfordern. Daher: Ein Test-Tool, mit dem ich die Auswirkungen der Stellschrauben div. Optimierungen vergleichen kann.

    T’schuldigung ob der langen Einleitung und so. Es in der WP Welt halt mein First Contact zum Thema und ich bin völlig platt, wie komplex das alles scheint.

    Schönen SO an alle!

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    vor 2 Jahren

    Kleiner Nachtrag: Keins der kolportierten Methoden wie add_filter( 'wp_lazy_loading_enabled', '__return_false' ); in die functions.php und keines der Plugins wie „Disable Lazy Load“ usw. können Lazy Load so abstellen, dass „Lighthouse“ es nicht anmeckert.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren

    Wir haben seit einer Weile in WordPress ein Team, dass sich mit Fragen rund um die Performance-Optimierung beschäftigt. In einer Roadmap 2023 beschreiben sie einige Aufgabengebiete, um die sie sich kümmern wollen. Dazu gehört auch das Handling von Bildern.

    In der Roadmap wird beschrieben, dass Bild(ern) im Largest Contentful Paint das Attribut fetchpriority="high" zugewiesen werden soll:

    „Originally introduced in WordPress 5.9, there are still outstanding problems with LCP images being lazy-loaded.

    Im Beitrag, der zur Einführung veröffentlicht wurde, wird auch geschrieben, wie du – z.B. bei Themes, die Beitragsbilder mehrspaltig ausgeben – das Verhalten verändern kannst: Customizing the behavior (Im Grunde wird die Anzahl der Beitragsbilder hochgesetzt.)

    Die Funktion ganz abzuschalten, halte ich für keine gute Idee. Deine Website lädt dann so lange, bis auch das letzte Bild einer umfangreichen Galerie eingelesen ist, obwohl nicht einmal feststeht, ob der Webseitenbesucher es sich jemals ansehen wird.

    Die Auswahl von Plugins hängt immer sehr stark von persönlichen Prämissen ab und Pauschalempfehlungen sind selten hilfreich. Einsteigern empfehle ich gerne Comet Cache, weil die Einstellungen gut erklärt werden. Wer sich damit überfordert fühlt, bekommt mir Surge ganz ausgezeichnete Performance-Werte, ganz ohne Einstellungen. Bei den gekauften Plugins hat WP Rocket einen ausgezeichneten Wert, aber für meine eigenen Webseiten habe ich nichts ausgeben wollen.
    Seit WordPress 6.1 können Abfragen besser den Objekt-Cache nutzen. Deshalb solltest du zusätzlich ein Plugin einsetzen, dass den Objekt-Cache nutzt.
    Bei Webservern, die noch mit HTTP/1.1 arbeiten, kann der Einsatz von Autoptimize einen Performance-Gewinn liefern, weil JavaScript- und CSS-Dateien zusammengefasst werden und der Browser weniger Dateien abrufen muss. Hier sollte aber beim Durchgehen der Einstellungsmöglichkeiten nicht geschlampt werden, weil das rasch zu einer unbrauchbaren Website führen kann.
    Die Liste kann noch lange fortgeführt werden, auch mit einigen populären aber erfahrungsgemäß weniger rühmlichen Plugins. Wie immer gilt: das beste Plugin ist eines, das für dich funktioniert.

    Bei der Performance-Messung habe ich persönlich mit GTMetrix die besten Erfahrungen gemacht. Ich habe mich auf der Website registriert, nutze den Dienst aber kostenlos.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren

    Mit WordPress 6.2 gibt es wohl einige Korrekturen.
    Trac-Ticket 55093, 57490

    Ggf. solltest du den Filter wp_img_tag_add_loading_attr nutzen.

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    vor 2 Jahren

    Danke, Bego.

    WordPress ein Team, dass sich mit Fragen rund um die Performance-Optimierung beschäftigt

    Das ist sicher gut, aber für mich ist das alles trotz Übersetzung unverständlich.
    Es sieht auch so aus, als ob diese Anleitungen eher für Theme Autoren, als für den Anwender sind.

    fetchpriority=“high“

    wo sollte das hin?

    Themes, die Beitragsbilder mehrspaltig ausgeben

    Keine Ahnung. Höre zum ersten Mal, das Bilder in manchen Themes mehrspaltig ausgegeben werden. Wie erkennt man das?

    Die Funktion ganz abzuschalten, halte ich für keine gute Idee.

    Will ich ja nicht. Nur für die Elemente, welche ohnehin sofort geladen werden sollen. Also das, was unzählige Testtools und Testseiten empfehlen. Aber dies entweder nicht oder in einer Art Dissertation abhandeln.

    Die beiden verlinkten Plugins habe ich getestet. Beide haben mir aber keinen Speed Gewinn gezeigt. Vllt. auch falsch eingestellt, ich weiß es nicht.

    WP Rocket soll sehr gut sein, aber auch ich will nur was ausgeben, wenn es für mich was taugt und ich damit zurechtkomme.

    zusätzlich ein Plugin einsetzen, dass den Objekt-Cache nutzt

    Aha, darauf kam ich auch. Nur keine Ahnung welches da passt. Dazu habe ich zu wenig Durchblick, was das überhaupt macht oder machen sollte.
    Etwas mit „Redis“ hatte ich glaube ich installiert, brachte aber auch nichts.

    weil JavaScript- und CSS-Dateien zusammengefasst werden und der Browser weniger Dateien abrufen muss

    ja, das las ich oft wo und habe es bei allen getesteten Plugins aktiviert. Solange, bis man halt irgendwo einen Designfehler hatte oder so. Doch ob genau das was gebracht hat oder ob die Cachefunktion dieses oder jenes Tools mehr brachten, weiß ich nicht.

    das beste Plugin ist eines, das für dich funktioniert.

    Genau. Und das ist für mich noch immer „WP Fastet Cache„.

    Ggf. solltest du den Filter wp_img_tag_add_loading_attr nutzen.

    Hm … da warte ich lieber bis WP 6.2.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren

    als ob diese Anleitungen eher für Theme Autoren, als für den Anwender sind.

    … wie jetzt, gibt’s da einen Unterschied? 😆

    fetchpriority=“high“

    wo sollte das hin?

    Nehmen wir an, du verwendest ein Hero-Image (diese bildschirmfüllenden Bilder, die auf einer (Start-)seite als erstes gezeigt werden). Das Foto nimmt die ganze Fläche ein, wirkt sich also bei der Performance auf „Largest Contenfull Paint“ (LCP) unmittelbar aus. Schlecht für SEO. Sowas muss direkt da sein und nicht „gemütlich“ („lazy“) geladen werden. Um das zu erreichen, kannst du dazu ein experimentelles Attribut fetchpriority verwenden, das allerdings noch nicht von allen Browsern unterstützt wird. Das HTML ist dann nicht mehr <img src="hero.jpg" loading="lazy" /> sondern <img src="hero.jpg" fetchpriority="high" />.

    Die beiden verlinkten Plugins habe ich getestet. Beide haben mir aber keinen Speed Gewinn gezeigt. Vllt. auch falsch eingestellt, ich weiß es nicht.

    Installiert, nach links und rechts gekuckt, gelöscht? 😜

    Du musst dich (bis auf Surge) schon ein wenig mit den Einstellungen auseinandersetzen. Für angemeldete Benutzer werden übrigens auch keine Seiten gecacht, weil du sonst deine Änderungen nicht direkt siehst.

    Hast du mit GTMetrix getestet?

    Allerdings solltest du von den Cache-Plugins auch keine Magie erwarten. Ein Multipurpose-Theme mit Page-Builder wird zwangsläufig eine schlechtere Performance erzielen.

    WP Rocket soll sehr gut sein, aber auch ich will nur was ausgeben, wenn es für mich was taugt und ich damit zurechtkomme.

    Naja, wenn dir an deiner Website viel liegt, sind 60,– US$ mit 100% Geld-zurück-Garantie jetzt auch nicht tragisch. Ab und zu gibt es Rabatt-Aktionen.

    Objekt-Cache … Dazu habe ich zu wenig Durchblick, was das überhaupt macht oder machen sollte.

    Haben wir hier schon öfters behandelt. Vielleicht magst du nachlesen?
    Kleine Doktor-Arbeit „was ist ein Cache“.

    Doch ob genau das was gebracht hat oder ob die Cachefunktion dieses oder jenes Tools mehr brachten, weiß ich nicht.

    So ist das mit der Performance-Optimierung. Bei einem multinationalen Kaufhaus mit angeschlossenem Streaming-Dienst macht sich ein Quentchen an Performance-Gewinn finanziell so sehr bemerkbar, dass sich der Aufwand lohnt. Bei deinem eigenen Blog wägst du hingegen ab, ob dir 60,– US$ pro Jahr schon zu viel sind.

    Dass die Website flott sein soll, ist verständlich. Allerdings gibt es auch Leute, die heute nicht mehr den Chrome ihres Manta prolieren, sondern stundenlang PageSpeed-Berichte studieren und sich Vorwürfe machen, wenn nicht noch ein paar Zehntelsekunden drin sind (während die Tippfehler und überflüssigen Fotos in den Webseiten bleiben, wie sie sind). Lesenswert: http://bit.ly/3EYeH0J Wenn das Thema dann durch ist, geht es mit SEO weiter. Mehr Besucher gibt’s trotzdem nicht. Weil Tippfehler, überflüssige Fotos und so … 😂

    Thread-Starter Anonymous User 20597857

    (@anonymized-20597857)

    vor 2 Jahren

    Also müsste man das fetchpriority=“high“ bei einem Hero-Image oder beim, bei den ersten großen Bild(ern) irgendwie manuell, bzw. ins Theme oder wie einbauen?
    Oder sollte das nicht besser eins der Optimierer-Plugins machen? So wie WP, bez. eben diese Plugins auch loading=“lazy“ reinhängen.
    Ich wüsste nämlich nicht, wie ich das wo einbauen soll.

    Wenn ich teste, dann echt gründlich! Wenn ich ein Plugin suche, wird alles abgegrast, vom allseits bekannten Branchenstar bis zu exotischen kleinen Sachen. Alles wird unter gleichen Bedingungen gecheckt, die Ergebnisse, Vor und Nachteile in einer Tabelle notiert. Also nichts mit bloß „links und rechts gekuckt„.
    Allein für die 15 ausgesuchten Optimierung-Plugins habe ich mir das WE Zeit genommen. Immerhin versuche ich ja stets aus den Hinweisen der Autoren zu lernen.
    (Ja, bei Surge ist man gleich fertig. Brachte aber 0)

    Für angemeldete Benutzer werden übrigens auch keine Seiten gecacht, weil du sonst deine Änderungen nicht direkt siehst.

    Weiß ich.
    Aber auch aus einem anderen Grund laufen alle Tests immer in einem Inkognito-Fenster: Weil z.B. Chrome meint, das andere Extensions das Ergebnis beeinflussen würden.

    GTMetrix läuft ja nur online, oder? Bei den erwähnten Tests ausschließlich am lokalen Rechner kann ich nur Lighthouse nehmen.

    keine Magie erwarten. Ein Multipurpose-Theme mit Page-Builder

    Logisch. Ja, ich habe u.a. auch mit Mehrzweck Themes zu tun, aber auch mit schlanken OnePagern usw.
    Page Builder mag ich nicht.
    Aber: In dem Bezug Shop-Themes, Magazin-Themes oder eben üppig aussehende Layouts war ich überrascht, dass es darunter echte Speed-Kings gibt! Trotz vieler Grafik blitzschnell z.B. „VisualSite„.
    Klar kommt kaum was an „GeneratePress“ heran.

    Die Doktorarbeit zum OpCache kenne ich. Aber kapieren ist eine andere Sache …
    Apropos „Litespeed-Cache“: Das Ding macht einer Site ordentlich Dampf! Aber ich bin erschlagen von den Mio. Optionen und alle in EN.
    Habe mich mit dessen Presets gespielt und ja, die beiden stärksten Einstellungen sind ein echter Boost. Aber ich möchte so ein Tool auch verstehen und nicht bei 256 Optionen rätseln, was das heißt.

    Weil Tippfehler, überflüssige Fotos und

    und FakeNews.
    Stimmt eh, es gibt weit schlimmere Baustellen als diese Werte, die vllt. keinem Besucher auffallen.
    Sicher, wenn eine Site 10 Sekunden lang nichts zeigt, dann isses bescheiden.
    Aber ob 0,6 sek oder 0,7 sek bis zum „First Contentful Paint“ ist mir schnuppe.

    Da ist echt wichtiger, dass die Site, der Inhalt zielgruppenorientiert, aktuell und wenn’s leicht geht auch wahr ist; die Navi und Struktur klar. Und das alle Rechtsdokumente passen.

    SEO: Auch so eine Neverending Story

    Der Beitrag ist … Mr. Spock würde es in StarTrek 4 so ausdrücken „sehr mit farbigen Metaphern durchsetzt“

    In dem Sinne 🖖

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren

    Insgesamt mehr ein Thema für ein Meetup, nicht unbedingt für den Support. Deshalb markiere ich den Thread jetzt als „gelöst“, bevor noch jemand meckert.

    Dass du mit Chrome englische Webseiten inzwischen in recht brauchbarer Form auf Deutsch übersetzen kannst, ist dir sicher bekannt? Ansonsten hilft nur viel lesen, nachfragen, ausprobieren.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Das Thema „Wie Lazy Load selektiv steuern?“ ist für neue Antworten geschlossen.