Ladezeit wegen viele Bilder - Suche nach Alternative

[supervisior]

...andere jeweils einzeln immer erst testen

Ich habe noch eine mit Passwort geschütze Staging Umgebung auf meinem Account. Kann ich die Einstellungen (wie zB kritisches CSS) auch da testen, oder geht das nur in der Live Umgebung?

Mit Stageing Umgebung kann ich leider nix anfangen. Damit es aber keine Probleme mit diesem Rocket Dingenskirchen gibt, brauchst gesichert in jedem Fall eine physikalisch davon getrennte 2te Installation unter einer anderen (Sub)Domäne. Alles andere halte ich für gewagt....

Du brauchst kein CDN, wenn Du nicht annäherend so viele internationale Nutzer, wie Nutzer aus dem eigenen Land hast.

Wo siehst Du da die Grenze? Aktuell sind es 60% aus Deutschland, der Rest aber aus anderen Ländern (USA, England usw.)

Ich persönlich sehe da überhaupt keine Grenze, sondern würde das so machen, dass DACH* Nutzer überhaupt keinen CDN bekommen, was Dir aber nicht möglich ist so etwas umzusetzen. Nachdem ich generell kein Freund von CDN bin, würde ich generell darauf verzichten, sodass es Dir überlassen ist.

* DeutschlandAustriasCHweiz

[omp-blog]

Damit es aber keine Probleme mit diesem Rocket Dingenskirchen gibt

Meinst Du Probleme (wie zB 404 Seiten), wenn ich WPRocket vollständig von jetzt auf gleich deaktiviere?

Mit Stageing Umgebung kann ich leider nix anfangen.

Na ich hab die Seite auf meinem Account unter einer Subdomain dubliziert, dieser ganze Bereich ist aber für Google ausgeschlossen und zudem für den Zugang mit einem Passwort versehen.

[supervisior]

Damit es aber keine Probleme mit diesem Rocket Dingenskirchen gibt

Meinst Du Probleme (wie zB 404 Seiten), wenn ich WPRocket vollständig von jetzt auf gleich deaktiviere?

Egal welche Probleme. Es muss ausgeschlossen sein, dass es keine Wechselwirkung gibt. Deaktivieren heißt zwar deaktivieren, aber wenn Du es gleich in den Wind schießen (deinstallieren) kannst, wäre mir wohler, wenn ich Du wäre.

Mit Stageing Umgebung kann ich leider nix anfangen.

Na ich hab die Seite auf meinem Account unter einer Subdomain dubliziert, dieser ganze Bereich ist aber für Google ausgeschlossen und zudem für den Zugang mit einem Passwort versehen.

Na das wäre ja das ideale. Da kannst Du erstmal problemlos austesten und herumspielen.

[staticweb]

> Es gibt nicht das eine Hauptkeyword. Der Hauptfokus sind die Reiseberichte zu den einzelnen Ländern oder Orten. Nimm als Beispiel "le morne wanderung" für eine Aktivität auf Mauritius. Genau nach sowas haben wir auch vorher gesucht, als wir dorthin gefolgen sind.

Mit dem Keyword seit ihr ja (immer noch) ganz oben. Du schreibst ja von SEO Problemen.

Im Bereich interne Verlinkung gibt es aber sicher noch Potential.

> Das kann natürlich sein. Ich hatte nur in Sistrix kurz gesehen, dass der Blog im Sichtbarkeitsindex ab November wieder runter gegangen ist.

Dieser Sichtbarkeits-Anstieg von August bis Oktober war einfach unnatürlich. Da musste es früher oder später eine Korrektur geben. Ansonsten steigt der SI ja seit Jahren moderat an. Achte lieber auf den over the fold Bereich und den User Search Intent, als auf die Gesamtladezeit.

[arnego2]

Willst Du damit sagen, dass nicht die Bilder das Problem sind?

Jupp der @Nerd hat es ja schon ausreichend erläutert.
Bilder würde ich an deiner Stelle verkleinern und auch mal local laden da ich irgendwo mal gelesen hab das Lazyload nun out wäre.

[supervisior]

Willst Du damit sagen, dass nicht die Bilder das Problem sind?

Jupp der @Nerd hat es ja schon ausreichend erläutert.
Bilder würde ich an deiner Stelle verkleinern und auch mal local laden da ich irgendwo mal gelesen hab das Lazyload nun out wäre.

Lazy load ist alles andere als out und ist wichtiger denn je. Man darf es nur nicht above the fold einsetzen und auch erst dann, wenn es im viewport ist.

Mit Bilder verkleinern sprichst Du eine elementare Widrigkeit von Responsive Design an. Wann ist kleiner machen zu klein oder groß genug, um alle Geräte in gleichbleibender Qualität damit zu versorgen? Auf die Antwort bin ich jetzt mal gespannt...!

Bilder auch mal local laden? Geht grundsätzlich schon, aber die dafür notwendige Funktionen gibt es nicht von der Stange. Also vergessen wir das mal schnell wieder, was nicht heißen soll, dass man es nicht machen sollte, weil warum Bilder über einen CDN laden, wenn die inländische Verbindung schneller ist und die ist dann immer schneller?

[Hanzo2012]

Wann ist kleiner machen zu klein oder groß genug, um alle Geräte in gleichbleibender Qualität damit zu versorgen? Auf die Antwort bin ich jetzt mal gespannt...!

Mit dem srcset-Attribut des img-Tags geht das. Da kann man viele verschiedene Varianten eines Bilds verlinken, und der Browser sucht sich je nach Bildschirm die passende raus.

[omp-blog]

Richtig, aber LiteSpeed nutzt dafür eigene und nicht fremde Funktionen/Dienste. Und ja es ist kostenlos, zumal auf die Bedürfnisse von WP und der Verwendung von LiteSpeed angepasst.

So, ich hab jetzt den Abend damit verbracht um folgendes zu machen:

Ich habe WPRocket deaktiviert, alle Caches gelöscht, den Rocket CDN ausgeschaltet und gelöscht, das Kritische CSS und Autoptimize deaktiviert und stattdessen LightSpeed aktiviert.

Lazy Load hab ich angeschlatet und auch den Responsive Placeholder aktiviert. Die Bilder above-the-fold hab ich aber bei den Lazy Load Image Excludes ausgeschlossen, sonst erscheinen die wirklich sehr spät im sichtbaren Bereich.

@supervisior Es fällt mir schwer zu beurteilen, ob das jetzt eine Verbesserung ist. Hast Du da eine Einschätzung zu?

Und darf ich Dich was Fragen zu den Einstellungen?

Ich würde gerne die Headerbilder in den Reiseberichten vom Lazy Load ausschließen, da sie im sichtbaren Bereich sind. PageSpeed Insights sagt:

Largest Contentful Paint-Bild wurde mit Lazy Loading geladen. „Above the fold“-Bilder, die mit Lazy Loading geladen werden, werden später im Lebenszyklus der Seite gerendert. Dies kann zu Verzögerungen beim Largest Contentful Paint führen.

Ich denke, dass geht über den Tab LiteSpeed Cache Page Optimization > Media Excludes > Lazy Load Image Class Name Excludes

Die Headerbilder in den Reiseberichten enthalten z.B. alle die CSS Klasse alignnone

Code: Alles auswählen

<img loading="lazy" src="https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild.jpg" alt="Bruce Peninsula National Park Headerbild" class="alignnone size-full wp-image-106154" srcset="https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild.jpg 1200w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-800x200.jpg 800w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-400x100.jpg 400w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-768x192.jpg 768w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-100x25.jpg 100w" sizes="(max-width: 1200px) 100vw, 1200px" width="1200" height="300">

Ich dachte es reicht, wenn ich unter Lazy Load Image Class Name Excludes alignnone eintrage, aber das scheint so nicht zu greifen. Kannst Du mir da helfen?

[supervisior]

Wann ist kleiner machen zu klein oder groß genug, um alle Geräte in gleichbleibender Qualität damit zu versorgen? Auf die Antwort bin ich jetzt mal gespannt...!

Mit dem srcset-Attribut des img-Tags geht das. Da kann man viele verschiedene Varianten eines Bilds verlinken, und der Browser sucht sich je nach Bildschirm die passende raus.

Na endlich mal einer, der was produktives rüberbringt! Wo warst Du denn? Hab Dich schon vermisst!

Das mit dem srcset-Attribut könnte man so machen, keine Frage. Andererseits, warum dem Browser noch mehr Arbeit aufladen, wenn man das dem Server machen lassen kann?

[supervisior]

Richtig, aber LiteSpeed nutzt dafür eigene und nicht fremde Funktionen/Dienste. Und ja es ist kostenlos, zumal auf die Bedürfnisse von WP und der Verwendung von LiteSpeed angepasst.

So, ich hab jetzt den Abend damit verbracht um folgendes zu machen:

Ich habe WPRocket deaktiviert, alle Caches gelöscht, den Rocket CDN ausgeschaltet und gelöscht, das Kritische CSS und Autoptimize deaktiviert und stattdessen LightSpeed aktiviert.

Lazy Load hab ich angeschlatet und auch den Responsive Placeholder aktiviert. Die Bilder above-the-fold hab ich aber bei den Lazy Load Image Excludes ausgeschlossen, sonst erscheinen die wirklich sehr spät im sichtbaren Bereich.

Braver Bub!

@supervisior Es fällt mir schwer zu beurteilen, ob das jetzt eine Verbesserung ist. Hast Du da eine Einschätzung zu?

Und darf ich Dich was Fragen zu den Einstellungen?

Ich würde gerne die Headerbilder in den Reiseberichten vom Lazy Load ausschließen, da sie im sichtbaren Bereich sind. PageSpeed Insights sagt:

Largest Contentful Paint-Bild wurde mit Lazy Loading geladen. „Above the fold“-Bilder, die mit Lazy Loading geladen werden, werden später im Lebenszyklus der Seite gerendert. Dies kann zu Verzögerungen beim Largest Contentful Paint führen.

Ich denke, dass geht über den Tab LiteSpeed Cache Page Optimization > Media Excludes > Lazy Load Image Class Name Excludes

Die Headerbilder in den Reiseberichten enthalten z.B. alle die CSS Klasse alignnone

Code: Alles auswählen

<img loading="lazy" src="https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild.jpg" alt="Bruce Peninsula National Park Headerbild" class="alignnone size-full wp-image-106154" srcset="https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild.jpg 1200w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-800x200.jpg 800w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-400x100.jpg 400w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-768x192.jpg 768w, https://one-million-places.com/wp-content/uploads/2021/kanada/09/bruce-peninsula-national-park-headerbild-100x25.jpg 100w" sizes="(max-width: 1200px) 100vw, 1200px" width="1200" height="300">

Ich dachte es reicht, wenn ich unter Lazy Load Image Class Name Excludes alignnone eintrage, aber das scheint so nicht zu greifen. Kannst Du mir da helfen?

Die Klasse alignnone scheint mir kein eindeutiger Identifier zu sein und es deswegen nicht funktioniert. Diese Klasse könnte auch bei anderen Objekten im Einsatz sein. Funktionieren tut das aber. Ich bin speziell mit dem WP Plugin im Detail aber nicht sehr tiefgehend vertraut und hab abtuell auch keine WP Installation am Laufen, um das verifizieren zu können. Deswegen meine Empfehlung wenn möglich. Gib diesem besagten Bild zusätzlich einen uniquen Identifier in Form einer Klasse und versuchs nochmal. Wenn das nicht hinhauen sollte, frag mal den Support auf der WP Seite. Antwort kommt in der Regel noch am gleichen Tag. https://wordpress.org/support/plugin/litespeed-cache/

[omp-blog]

Die Klasse alignnone scheint mir kein eindeutiger Identifier zu sein und es deswegen nicht funktioniert.

Das kann natürlich sein. Wobei die Beschreibung "Images containing these class names will not be lazy loaded." ja aussagt, dass diese Klasse nur enthalten sein muss.

Ein Feld darüber gibt es ja sogar die Einstellung: Lazy Load Image Excludes. Aber selbst wenn ich da eine komplette URL von einem Bild eintrage wird es trotzdem nicht vom Lazy Load ausgenommen. Irgendwie komisch.

Aber klar, wenn Du da nicht weiterhelfen kannst, frag ich einfach mal den Support.

[supervisior]

Die Klasse alignnone scheint mir kein eindeutiger Identifier zu sein und es deswegen nicht funktioniert.

Das kann natürlich sein. Wobei die Beschreibung "Images containing these class names will not be lazy loaded." ja aussagt, dass diese Klasse nur enthalten sein muss.

Sollte man so verstehen, aber der Laden besteht fast nur aus Chinesen und selbst der überwiegende Teil nativer US-Amerikaner hat eine nur geringe Bildung, was sich unweigerlich auf die Sprachfertigkeiten auswirkt. Deswegen darf man nicht unweigerlich erwarten, dass die sich in allen Fällen unmissverständlich ausdrücken können. Der WP Support für das Plugin ist aber super drauf, immer höflich und gibt in der Regel schon bei der ersten Antwort die passende Lösung dazu.

[supervisior]

Ich hab auf Deiner Seite gerade mal versucht das besagte Header Bild zu finden, aber ich find da nix. Hast Du eine URL zu der Seite?

And btw. was ganz anderes. Dein Cookie Banner Plugin macht sehr viel Murks im Code und trägt nicht wirklich zu schnellen Ladezeiten bei. Inline Javascript ist selten gut und dann auch noch als document.write mit base64 im HTML Header codiert grenzt an Körperverletzung. Hau wech das Teil!

[supervisior]

Und gleich noch was hinterher. Du hast nicht wenige Bilder in CSS als Hintergrundbild definiert. Bei so was funktioniert lazy load nicht. Außerdem ist der was mit diesen Bildern faul. Die haben zwar ein .jpg als Datei Endung, aber zumindest der Firefox will solche Bilder als .webp speichern, sodass man vermuten kann, dass diese Bilder eine falsche Datei Endung haben und der FF das Format aus dem Header der Bilder heraus identifiziert.

[omp-blog]

Ich hab auf Deiner Seite gerade mal versucht das besagte Header Bild zu finden, aber ich find da nix. Hast Du eine URL zu der Seite?

Nimm zum Beispiel auf der Startseite dieses hier: https://one-million-places.com/wp-conte ... s-2020.jpg

Und in Beiträgen sind Headerbilder für mich immer die, die über dem Inhaltsverzeichnis stehen. Hilft das?

Du hast nicht wenige Bilder in CSS als Hintergrundbild definiert.

Hast Du dafür ein Beispiel? Ich glaube nicht, dass ich da was selber definiert habe.

Dein Cookie Banner Plugin macht sehr viel Murks im Code und trägt nicht wirklich zu schnellen Ladezeiten bei. Inline Javascript ist selten gut und dann auch noch als document.write mit base64 im HTML Header codiert grenzt an Körperverletzung.

Ja, das das Cookie Banner zumindest auf meiner Seite Probleme bereitet, ist mir auch schon aufgefallen. Interessant ist, dass dieses Plugin eines der bekanntesten Cookie Banner derzeit ist, daher wundert mich das. https://de.wordpress.org/plugins/real-cookie-banner/. Die Bewertungen sind auch durchweg positiv.

Entweder es gibt einfach mit dem Plugin einen Konflikt auf meiner Seite (oder dem Theme) oder es ist generell nicht ideal. Dann müsste das doch aber auch anderen auffallen, oder?

Es gibt ja noch andere Cookie Banner Plugins, muss ich halt mal schauen, welches vielleicht besser ist.