Frage zu webp und user agents. Spezielle Bilder für spezielle User-Agents

janwill

Hallo, ich habe da mal eine Frage bezüglich eines Fallbacks für webp-Bilder und hoffe, dass ich hier richtig bin.

Ich habe folgendes vor:
Webp Bilder werden im Grunde in allen modernen Browsers mittlerweile dargestellt nur IOS 13.XX mach Probleme.
Nun habe ich vor, mittels USER-AGENTS eine Abfrage zu erstellen (BEVOR DIE WEBSEITE im Browser sich aufbaut), so dass alle Bilder auf der Webseite von .jpg zu .webp umbenannt werden. Beide Bilder liegen jeweils im gleichen Ordner. Also wird es geben hund.jpg und hund.webp.
Ich will damit erreichen, dass alle User und BOTS die webp-Bilder sehen nur eben die User mit dem alten IOS13.XX die .jpg-Bilder.

Natürlich will ich das ganze auch SEO.konform bauen (Aus technischen Gründen kann ich andere FALLBACK-LÖSUNGEN) leider nicht benutzen, da ich mit einem Pagebuilder arbeite, der automatisch best. Bilder als background-image einbindet, hier funktioniert dann leider nicht mehr der TAG <picture>.

Könnt ihr mir sagen, ob das Probleme mit Google und dem dazugehörigen Ranking der Seite gibt, wenn ich das so mache oder ist das Google egal, da es keinen expliziten IOS13-Googlebot gibt?

Ich hoffe, ich konnte mein Anliegen richtig darstellen und freue mich auf jegliche Antworten und Denkhilfen....

janwill

arnego2

Was versprichst du dir davon?
Nutze die Formate die alle kennen und annehmen.

janwill

Ich erwarte mir davon, dass ich eine seo-optimierte Webseite habe und auch noch eine schnelle Ladegeschwindigkeit und das die IOS13 User auch was sehen.

Kannst du weiterhelfen?

arnego2

Wenn du wirklich eine schnellere Ladezeit haben willst solltest du auf den pagebuilder verzichten.
Auch bei SEO ist es besser ohne Pagebuilder.

Bis alle Browser webP und webM schaffen dauert es eben noch.
Soviel Unterschied gibt es eh kaum.

ModPagespeed macht das, was du suchst, von ganz alleine, und noch viel mehr (lässt sich alles konfigurieren). Es erspart dir auch die Arbeit, jedes Bild immer in zwei Formaten zu speichern. Die Konvertierung passiert automatisch und wird gecached.

janwill

Also ich habe gemerkt, dass wenn ich ein Bild relativ radikal optimiere seitens Photoshop und ein paar anderer Tools, dass ich mit webp ohne weiteres fast noch einmal 10%-15% rausholen kann. Das finde ich schon ne ganze Menge - und das alles ohne Qualitätsverlust.

Das der Pagebuilder nicht die erste Wahl bei einer SEO-optimierten Seite ist ist auch klar. Aber ein Kunde hat schon mehrere Vorteile mit einem Pagebuilder, wenn es um größtmögliche Admininstration der Seite geht.

Wenn ich das richtig verstehe liefert ein CDN, beispielsweise imagekit.io, auch unterschiedliche Bildformate in abhängigkeit des Browser (ob webp-kompatibel oder nicht) aus. Wäre denn dann meine Variante - siehe Anfrangsthread - seo-(un)konform oder geht es in Ordnung.

Sorry, aber ich würde ungern die generelle Frage angehen, ob nun ein Pagebuilder toll oder nicht toll ist - ist nun mal da - daher meine gezielte Frage OBEN...

janwill

EDIT:
Ah ok, danke... modpagespeed kannte ich noch nicht. Werde ich mir einmal anschauen...

supervisior

arnego2 hat geschrieben: ↑03.03.2021, 21:07 Wenn du wirklich eine schnellere Ladezeit haben willst solltest du auf den pagebuilder verzichten.
Auch bei SEO ist es besser ohne Pagebuilder.

Bis alle Browser webP und webM schaffen dauert es eben noch.
Soviel Unterschied gibt es eh kaum.

Mit dem Pagebuilder hast Du recht. Mit den webp Formaten leider nicht. Inzwischen unterstützten alle aktuellen Browser das webp Format, selbst der Safari, wenngleich (noch) nicht mit allen OS Versionen. Aber HTML hält im Falle dessen eine Lösung dafür bereit, sodass im Falle dessen immer das richtige Image Format zur Verfügung steht.

supervisior

Hanzo2012 hat geschrieben: ↑03.03.2021, 21:45 ModPagespeed macht das, was du suchst, von ganz alleine, und noch viel mehr (lässt sich alles konfigurieren). Es erspart dir auch die Arbeit, jedes Bild immer in zwei Formaten zu speichern. Die Konvertierung passiert automatisch und wird gecached.

Einspruch: modPagespeed ist deprecated, buggy und seit Ur-Zeiten wurde nichts mehr daran gemacht. Zumal es unnötig Ressourcen verbraucht, die an anderer Stelle fehlen.

Warum denn überhaupt so kompliziert? HTML bringt mit dem <picture> tag doch alles mit.

supervisior

janwill hat geschrieben: ↑03.03.2021, 18:48 Webp Bilder werden im Grunde in allen modernen Browsers mittlerweile dargestellt nur IOS 13.XX mach Probleme.
Nun habe ich vor, mittels USER-AGENTS eine Abfrage zu erstellen (BEVOR DIE WEBSEITE im Browser sich aufbaut), so dass alle Bilder auf der Webseite von .jpg zu .webp umbenannt werden. Beide Bilder liegen jeweils im gleichen Ordner. Also wird es geben hund.jpg und hund.webp.
Ich will damit erreichen, dass alle User und BOTS die webp-Bilder sehen nur eben die User mit dem alten IOS13.XX die .jpg-Bilder.

Das hat mit SEO überhaupt nichts zu tun. Du stellst mit dem webp Format nur Bilder zur Verfügung, die bei gleicher Qualität um bis zu 50% kleiner sind in der Datengröße. Und eine Browser Weiche brauchst Du dafür auch nicht.

Das ist alles, was Du dafür brauchst und sich auch noch pimpen lässt. Der Browser sucht sich das Format selbst raus, das er unterstützt.

Code: Alles auswählen

<picture>
<source srcset="image.webp" type="image/webp">
<img src=image.jpg"" width="" height alt="" >
</picture>

https://developer.mozilla.org/de/docs/W ... nt/picture

janwill

Alles fein und richtig, aber ich habe das Problem, dass ich auch Bilder in CSS-Dateien als background-images habe und da funktioniert der <picture>-Tag nicht. Daher habe ich eben das vor, was ich oben beschrieben habe... Aber wäre denn das nun seo-nonkonform? Bei einem externen CDN gibt es anscheinend ja auch die Möglichkeit unterschiedliche Bildformate für unterschiedliche Browser anzeigen zu lassen....

zumindest interpretiere ich das so. Ich habe bis dato noch kein CDN aufgebaut und teste mich da erst richtig rein. zur zeit bei imagekit.io...

Aber am liebsten wäre mir meine eigene Lösung - ganz oben beschrieben - weiß eben nur nicht, ob Google dann die Seite "schlechter Rankt" wenn der Bot erkennt, dass in IOS13 andere Bilderformate angezeigt werden oder ob das alles eben egal ist...

supervisior hat geschrieben: ↑03.03.2021, 21:51 Einspruch: modPagespeed ist deprecated, buggy und seit Ur-Zeiten wurde nichts mehr daran gemacht. Zumal es unnötig Ressourcen verbraucht, die an anderer Stelle fehlen.

Ich betreibe es seit vielen Jahren ohne nennenswerte Probleme. Die letzte Version ist von letztem Jahr. Klar braucht es Ressourcen, aber es hilft dir auch dabei die woanders wieder einzusparen und kann Seiten deutlich schneller und mit weniger Server-Anfragen laden lassen.
Z. B. kombiniert und komprimiert es JavaScript und CSS, kann sogar viele kleine Bilder in ein großes kombinieren, Bilder, CSS und JavaScript inlinen und vieles mehr.
Das für mich beste ist allerdings das Umbenennen von Ressourcen durch Einfügen eines Hash-Werts in den Dateinamen, so dass diese Ressourcen sehr lange beim Client gecached werden können und er bei erneuten Besuchen überhaupt keine Anfrage an den Webserver schicken muss (auch keine "Ist meine gecachte Version noch aktuell?"-Anfrage). Sogar das automatische Auslagern von Ressourcen in ein CDN geht, soweit ich weiß.
Das alles passiert völlig transparent im Hintergrund. Man muss es nur einmal konfigurieren.
Kann man natürlich auch alles per Hand machen, ist aber ziemlich viel Arbeit.

@janwill: ModPagespeed wurde von Google ins Leben gerufen. Ist zwar keine Garantie, aber es würde mich wundern, wenn sie da Dinge tun, die Google nicht mag. Und es macht diese WebP-Sache ganz automatisch je nach Browser, und auch für Bilder, die in CSS referenziert werden.

supervisior

janwill hat geschrieben: ↑03.03.2021, 22:03 Alles fein und richtig, aber ich habe das Problem, dass ich auch Bilder in CSS-Dateien als background-images habe und da funktioniert der <picture>-Tag nicht. Daher habe ich eben das vor, was ich oben beschrieben habe... Aber wäre denn das nun seo-nonkonform? Bei einem externen CDN gibt es anscheinend ja auch die Möglichkeit unterschiedliche Bildformate für unterschiedliche Browser anzeigen zu lassen....

zumindest interpretiere ich das so. Ich habe bis dato noch kein CDN aufgebaut und teste mich da erst richtig rein. zur zeit bei imagekit.io...

Aber am liebsten wäre mir meine eigene Lösung - ganz oben beschrieben - weiß eben nur nicht, ob Google dann die Seite "schlechter Rankt" wenn der Bot erkennt, dass in IOS13 andere Bilderformate angezeigt werden oder ob das alles eben egal ist...

Auch für background images gibt es eine Lösung.

Code: Alles auswählen

body{
    background-image: url(background.jpg);
    background-image: -webkit-image-set(url(background.webp)1x)
}

Und jetzt nochmal, welches Bildformat Du welchem Browser anbietest, ist für SEO schnurzpiepegal.

supervisior

Hanzo2012 hat geschrieben: ↑03.03.2021, 23:15
supervisior hat geschrieben: ↑03.03.2021, 21:51 Einspruch: modPagespeed ist deprecated, buggy und seit Ur-Zeiten wurde nichts mehr daran gemacht. Zumal es unnötig Ressourcen verbraucht, die an anderer Stelle fehlen.
Ich betreibe es seit vielen Jahren ohne nennenswerte Probleme. Die letzte Version ist von letztem Jahr. Klar braucht es Ressourcen, aber es hilft dir auch dabei die woanders wieder einzusparen und kann Seiten deutlich schneller und mit weniger Server-Anfragen laden lassen.
Z. B. kombiniert und komprimiert es JavaScript und CSS, kann sogar viele kleine Bilder in ein großes kombinieren, Bilder, CSS und JavaScript inlinen und vieles mehr.
Das für mich beste ist allerdings das Umbenennen von Ressourcen durch Einfügen eines Hash-Werts in den Dateinamen, so dass diese Ressourcen sehr lange beim Client gecached werden können und er bei erneuten Besuchen überhaupt keine Anfrage an den Webserver schicken muss (auch keine "Ist meine gecachte Version noch aktuell?"-Anfrage). Sogar das automatische Auslagern von Ressourcen in ein CDN geht, soweit ich weiß.
Das alles passiert völlig transparent im Hintergrund. Man muss es nur einmal konfigurieren.
Kann man natürlich auch alles per Hand machen, ist aber ziemlich viel Arbeit.

@janwill: ModPagespeed wurde von Google ins Leben gerufen. Ist zwar keine Garantie, aber es würde mich wundern, wenn sie da Dinge tun, die Google nicht mag. Und es macht diese WebP-Sache ganz automatisch je nach Browser, und auch für Bilder, die in CSS referenziert werden.

Es braucht doch nicht extra einen Hash um dem Browser mitzuteilen, dass er Bilder und andere statische Sourcen bitte im Cache behalten soll. Dafür genügt ein einfacher define in der .htaccess. Dann gibts auch keinen Status 304 im cache, sondern 200 im Cache.

Code: Alles auswählen

<FilesMatch "\.(jpg|JPG|jpeg|webp|jpe?g|woff|woff2|png|css|js|gif|swf|ico|ttf|eot|ico|js|mp4|webm|svg|json)$">
Header set Cache-Control "public,max-age=31536000,no-transform"
Header unset ETag
</FilesMatch>

Auch wenn Du mit modPagespeed glücklich sein magst, ist der besagte Ressourcenvebrauch nicht unerheblich, was eines der Gründe ist, warum modPagespeed in vielen Hostings gar nicht verfügbar ist. Gleiches gilt für webp, bzw. CWEBP. Wenn das wegen Ressourcenverbrauch ebenso nicht installiert ist, hilft Dir modPagespeed auch nicht weiter. Außerdem haben GET Parameter in statischen Sourcen nun absolut nichts zu suchen.

Alles in allem kann man mit einfachsten Mitteln webp verfügbar machen und man braucht auch kein Extra Apache Modul dafür.

supervisior

@janwill

Magst Du uns bitte mal verraten für welche Applikation Du das brauchst und welche Art Hosting Du nutzt? Mit den Antworten zu diesen Fragen ließe sich vieles weitaus gesicherter beantworten.

supervisior hat geschrieben: ↑04.03.2021, 08:24 Es braucht doch nicht extra einen Hash um dem Browser mitzuteilen, dass er Bilder und andere statische Sourcen bitte im Cache behalten soll. Dafür genügt ein einfacher define in der .htaccess. Dann gibts auch keinen Status 304 im cache, sondern 200 im Cache.
Code: Alles auswählen
<FilesMatch "\.(jpg|JPG|jpeg|webp|jpe?g|woff|woff2|png|css|js|gif|swf|ico|ttf|eot|ico|js|mp4|webm|svg|json)$">
Header set Cache-Control "public,max-age=31536000,no-transform"
Header unset ETag
</FilesMatch>

Klar geht das, aber wenn du eine Änderung an der Ressource durchführst, dann kriegen die Besucher, welche die alte Version im Cache haben, das nicht mit. Das ist bei Bildern eher weniger ein Problem, weil man die nicht so oft ändert, aber Stylesheets oder JavaScript werden (zumindest bei mir) recht häufig angepasst. Da ist es sehr praktisch, dass ModPagespeed automatisch einen neuen Dateinamen für die Ressource generiert.

supervisior hat geschrieben: ↑04.03.2021, 08:24 Auch wenn Du mit modPagespeed glücklich sein magst, ist der besagte Ressourcenvebrauch nicht unerheblich

Der Ressourcenverbrauch hängt vom konkreten Szenario und von der Konfiguration ab. So pauschal kann man das nicht sagen.

supervisior hat geschrieben: ↑04.03.2021, 08:24 Außerdem haben GET Parameter in statischen Sourcen nun absolut nichts zu suchen.

Ich weiß nicht, was du damit meinst. Ich kann mich nicht erinnern, irgendwas über GET-Parameter gesagt zu haben.

supervisior hat geschrieben: ↑04.03.2021, 08:24 Alles in allem kann man mit einfachsten Mitteln webp verfügbar machen und man braucht auch kein Extra Apache Modul dafür.

Natürlich, aber dann muss man halt auf andere Weise dafür sorgen, jedes Bild in beiden Formaten vorzuhalten. Vergisst man dann vielleicht gerne mal, wenn man ein neues Bild hochlädt oder ändert. Insbesondere wenn man ein CMS nutzt.