Neu Dem Kundenbrowser mitteilen, dass Bilder aktualisiert wurden

[trebis]

Moin zusammen!

Folgendes Problem:
Wir fügen einzelnen Artikeln gerne Goodies hinzu und bilden diese auf den Artikelbildern (und dem Vorschaubild) auch ab. Auch ändern wir bei verschiedenen Aktionen gerne mal das erste Artikelbild. Diese werden mir - wenn ich die betreffenden Shopseiten vorher besucht habe - aber erst angezeigt, wenn ich F5 gedrückt habe. Das ist natürlich extrem ungeschickt. Weniger für mich, mehr für unsere Kunden.

Zum Beispiel haben wir neulich den Spritzgebäckvorsatz aus unseren Küchenmaschinen-Paketen herausgenommen. Drücke ich nicht F5, wird er mir auf den Bildern aber noch angezeigt. Wenn ein Kunde jetzt ein paar Tage um einen Artikel schleicht, bevor er diesen bestellt, kann es also durchaus passieren, dass er beim Kauf keine aktuellen Produktbilder angezeigt bekommt, weil er die Seite vorher bereits besucht hat und sich die alten Bilder im Cache des Browsers befinden. So denkt er, er bekommt den Spritzgebäckvorsatz dazu, obwohl der auf den aktuellen Bildern gar nicht mehr abgebildet ist.

Wie bekomme ich es hin, dass bei Bildaktualisierungen dem Browser des Kunden mitgeteilt wird, dass die Bilder neu geladen werden müssen?

Jruß!
t

 

[Inge]

Ob der Browser das Bild neulädt bei der nächsten Abfrage hängt an den Cache-Control sowie Expire HTTP-Headern.

Je nach Serverkonfiguration kannst du diese eigenständig setzen und/oder verwalten, z.B. der htaccess und/oder Server .conf-Datei.

Öffne mal ein Bild direkt und schaue dir die HTTP-Header Antwort per Web Developer Console, Tab Network, an und schaue dir die HTTP-Header Cache-Control und Expire an.

Sendet der Server diese bereits? Wenn ja, sind die Werte zufriedenstellend?

Man kann die Werte anpassen und/oder für besondere Dateien umgehen.

Du kannst eine Cache-Auflösung, nachdem der Header mal gesendet wurde und im Browser gelandet ist, nicht so einfach aufheben.
Dazu gibt es wieder andere Tricks, wie das Umbennenen von Dateien, damit die Datei auf jeden Fall neu geholt werden muss (das wird z.B. mit den .JS und .CSS Dateien gemacht, indem ein jtl.js?v=<zufällige-Number> erstellt wird, abhängig von der Theme Version, um so bei Updates bei den Kunden neue Abfragen zu den Quelldateien auszulösen. Ein Workaround wäre daher immer das umbenennen bzw. anhängen eines Suffixes.

Überprüfe erstmal deine aktuellen Cache-Einstellungen und passe diese ggf. an deine Bedürfnisse an.
Je nachdem welchen Server du einsetzt (apache, nginx, varnish) können wir detaillierter werden und/oder hast du nur C-Panel Zugriff und/oder htaccess?

 

[trebis]

Puhhh... Das scheint ja komplexer zu werden als befürchtet...
XD

Cache-Control

max-age=31104000

Expires

Fri, 05 Feb 2021 11:16:19 GMT

Das sind 360 Tage.


Es wird aber nichts bringen, hier etwas zu ändern, da bei einer Bildänderung die Änderung sofort im Browser umgesetzt werden muss und nicht erst in 10 Minuten oder 24 Stunden. Ein ständiges Neuladen ist aber ebenso unsinnig. Es sollte nur neu geladen werden, wenn sich ein Bild geändert hat. Dann aber sofort.

Server ist Apache und steht bei Hosteurope. Ehrlichgesagt keine Ahnung, was ich für da für Möglichkeiten habe.
C-Panel höre ich zum ersten Mal.
htaccess bin ich hin und wieder mal drin für diverse Codes und Redirects.

Umbenennen von Bilddateien funktioniert bei Artikelbildern nicht, da JTL den Bildern eigene Namen gibt - dummerweise immer die gleichen.

NGINX kann ich einschalten, sehe ich für einen Onlineshop aber als problematisch an wegen dem sich ändernden Warenbestand.

 

[Inge]

Kein Thema, man kann das langsam aufbröseln. Wir müssten aber erstmal schauen wo man steht .
C-Panel war die Frage, ob du direkten Zugriff auf deinen Server hast (SSH z.B.) oder nicht, weil du hast als Serveradministrator noch ein paar mehr Einstellungsmöglichkeiten hättest, auch zur Analyse (Debugging).
Cpanels ist die Firma hinter Plesk, dass war im Endeffekt nur eine Frage, ob du deinen Server per "GUI" (klickmich-fertig Oberfläche eines Hosters) konfigurierst oder tatsächlich tief in der Materie steckst und die .conf Dateien auf deiner Linux Büchse selbst managed . Dann weiß ich wie tief du in der Materie bist, um entsprechend Antworten zu können. Ich denke das ist hier aber nicht der Fall, von daher wahrscheinlich ein gewöhnliches Setup, ohne Server Mods (wie pagespeed) oder Spezialanpassungen. NGINX musst du nicht nutzen, war nur gefragt, da es hier wiederrum andere Möglichkeiten gibt.
-------
Somit gehe ich davon aus, dass du einen Standard Apache einsetzt ohne Anpassungen an irgendwelche module.
Mein Vorschlag, überprüfe deine HTACCESS.

Erste Sache wäre, ein Expire-Header für 360 Tage (+1 Jahr) für Bilder ist extrem hoch und würde ich nicht machen.
Cache die Bilder maximal 1 Monat, Fonts 2 Wochen, JS und .CSS ein paar Tage etc.. Cachen ist immer gut und solltest du auch machen. Damit das Problem beim nächsten Mal nicht mehr Auftritt (in der Länge, im Bestenfall warten man ab bis die Ablaufzeit erfüllt ist) (bzw. den nächsten Gast-Browser erwischt), musst du zuerst mal deine Cache-Einstellungen anpassen.
Das kannst du dann über die .htaccess Datei Regeln, ein Best-Practise habe ich dir hier hochgeladen: https://pastebin.com/Sz9rmzeL weitere Hilfe dazu: https://www.inmotionhosting.com/support/website/apache-module-mod-expires/ und https://www.a2hosting.com/kb/develo...nfiguring-caching-with-the-mod-expires-module

Beispiele:
nach last Modification-Time:
ExpiresByType image/jpeg "modification 1 week"
nach last Access-Time:
ExpiresByType image/jpeg "access 1 week"

Jetzt sind die Cache-Einstellungen erstmal korrekt von dir optimiert.

Jetzt geht es darum, in manchen Fällen den Browser vorab zum Neuladen zu bewegen. Dazu gibt es mehrere Optionen:

0. Abwarten bis du maxage (Expire Time) legitimerweise erreicht hast und der Client wird das Bild erneut abfragen.
1. Die Bildquellen-Adresse dynamisch ändern (?v=2342143) dranhängen oder einen Timestamp z.B. Damit hebt man das Caching immer forciert auf beim Client. Das ist aber hier keine elegante Lösung für deinen Anwendungsfall.
2. Da du das Bild legitim aktualisiert hast, solltest du über das den HTTP Header "Last- Modified" (https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.29) angeben, wann das Bild zuletzt geändert wurde. So weiß der Browser, wenn das Bild geändert wurde vor meiner End-Cachelaufzeit, dann hole es mir trotzdem erneut. Apache sendet den HTTP-Header automatisch anhand des Timestamps der Datei auf dem Server (der sich dann nach dem Hochladen in der Regel ändern sollte). Überprüfe, ob du eine Last-Mod-Time Gesetzt hast. . Das Problem, Last-Modified wird von einigen Browsern als schwach empfunden oder gar ignoriert und Cache-Control wird immer vorrang haben. Siehe dazu: https://de.ryte.com/wiki/if-modified-since sowie https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Last-Modified und https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.29
3. Auf Grund von 2 kannst du natürlich auch das Caching für Bilder immer deaktivieren
<Files ~ "-nocache\.jpg">
Header set Cache-control "no-cache"
</Files>
Per Cache-Control sagen, dass alle .jpg im Ordner nocache niemals gecached werden sollten. Das ist aber auch hier keine elegante Lösung.
4. Statt mit Schritt (0 "Expires) oder Schritt (2 "Last-Modified") kannst du auch mit sog. "ETags" arbeiten.
ETags sind am besten und noch akurrater als der Last-Modifed HTTP Timestamp. Aber bitte nicht beides zusammen nutzen. Das muss der Apache2 als HTTP-Header mitsenden (entsprechend konfigurieren).
Siehe auch https://httpd.apache.org/docs/2.4/caching.html und https://ladezeit-optimierung.de/caching-von-inhalten/

Mein Vorschlag wäre erstmal per HTACCESS das Caching der Bilder auf last-modified per modification 1 week oder access 1 week zu ändern.
Alles andere ist denke ich erstmal keine konkreter Lösungsvorschlag, aber Stoff hast du genug um weiter in die Materie einzusteigen und entsprechend weitere zu optimieren.

 

[trebis]

Puhhhh... erstmal vielen Dank für diese ausführliche Antwort Inge! Das geht aber völlig über meinen Arbeitsbereich heraus. Ich fuchse mich zwar gerne in die ein und andere Sache rein - und beim Umgang mit JTL muss man das zwangsläufig immer wieder tun - aber das ist too much. Ich werde es wohl an unsere externen Profis durchreichen.

Eine Frage habe ich aber noch:

In den Einstellungen für Bilder im Backend kann ich unter dem Punkt "Bildnamen von Artikelbildern" die Option "Primärschlüssel Vorgabe von JTL WaWi" auswählen. Weil ich dazu nichts im Internet finde: Was bedeutet das?