Neu Ladereihenfolge des Shops definieren

[Steve K.]

Hallo,

wir sind gerade dabei, unseren JTL 4 Shop mit Inhalten zu füllen. Der Content bei den einzelnen Artikeln ist ziemlich umfangreich, viele große Bilder, Text usw.

Dass die Shopseiten einen kleinen Moment brauchen, bis sie komplett geladen werden, das lässt sich vermutlich nicht vermeiden, was stört, ist, dass die Produktbilder erst ganz zum Schluss geladen werden und manchmal bei einem Seitenaufruf längere Zeit erst mal sogar gar nichts angezeigt wird.

Was kann man tun, damit die Produktbilder zuerst geladen werden und möglichst schnell schon mal etwas zu sehen ist?

Vielen Dank im Voraus für die Unterstützung, Steve.

 

[martinwolf]

Das ist der falsche Ansatz. Ressourcen wie Bilder, Scripte und CSS Dateien werden IMMER erst nach dem HTML geladen. Vorher geht das auch garnicht, da vorher garnicht bekannt ist was alles geladen werden soll.

 

[fibergirl]

Naja, CSS möglichst am Anfang, sonst gibt es Gewackel und Geflacker beim Bildschirmaufbau.

 

[Steve K.]

Ich verstehe die Tipps nicht so recht, angeblich ist es möglich zu bestimmen, in welcher Reihenfolge welcher Content geladen wird. Hieße das, dass ich in den Shopsourcen nach dem Aufruf der Produktbilder suchen muss und diesen Aufruf möglichst weit nach oben kopiere?

Der Shop ist generell langsam, wir haben ihn auf einem 1&1 Server in einem Unteraccount laufen, was ja nicht optimal sein soll. Die Standard-Hilfen, die ich im Netz gefunden habe ( Cache-Aktivierung, Deaktivierung einiger Megamenü-Optionen) brachten wenig Besserung. Hier mal ein Link zu einem Produkt im Shop, ist noch in der Mache:

http://jtl4.motionstudios.de/Vasco-StreetMaps-5-Afrika-Australien-und-Ozeanien

PS.: Ich nutze Dropper mit diversen Plugins, um den Content und Menus zu gestalten. Ich hoffe, das ist nicht der Grund für die Bremse.

Bis alles zu sehen ist, dauert es, wenn er Cache vorher geleert wurde im Browser, schon ein paar Sekunden, bis alles da ist. Oder ist das bei Ihnen anders? Vor allem das Laden des Produktbildes dauert.

 

[ag-websolutions.de]

Die Bremse ist dein 1&1-Paket

 

[Steve K.]

Ich habe mal einen Performancetest laufen lassen, folgender Hinweis spricht auch genau für die 1&1 Hypothese:

"Latenz: Schlecht!

Der Server liefert sehr verspätet die angeforderten Daten! Hier sollte auf jeden Fall überprüft werden, ob der Server überlastet ist oder evtl. eine SQL-Datenbank hängt."...

Gibt es Tools, bei denen man genau testen kann, was die Bremsen des Shops sind? Der Grafikanteil ist bei der Page recht hoch, aber da komme ich nicht drum herum.

 

[martinwolf]

Es gibt einige SQL-Abfragen im Shop die als Bottleneck erkennbar sind, aber daran wirst du eh nichts ändern können wenn du nicht gerade vorhast den Core umzuschreiben.
Du sagst dein Shop ist sehr bildlastig. Die Bilder sollten unabhängig vom Server grundlegend immer optimiert werden. In wie fern da bei deinen Motiven Potenzial vorhanden ist kann man ohne Link zum Shop nicht sagen.

Es gibt einige Möglcihkeiten die Ladezeiten zu verbessern, jedoch hört es spätestens dann auf wenn Plugins im Einsatz sind. So oder so, je mehr Plugins im Einsatz sind, desto langsamer wird der Shop im Gesamten. Ein einfaches 1&1 Paket stößt da sehr schnell an seine Grenzen.

 

[Steve K.]

Danke erst einmal für die Antworten. Leider ist das Problem mit dem Produktbild nicht gelöst. Es muss doch möglich sein, das Laden der Produktbilder vor dem Laden der anderen Inhalte zu stellen. Definitiv wird das Produktbild als Allerletztes (!) geladen, siehe den Snap der Timeline aus Safari im Anhang, die markierte Zeile ganz unten ist das Produktbild, das erst nach rund 7 Sekunden geladen wird, nachdem alles andere abgearbeitet wurde.

Ich habe das auch mal an einem anderen Shop getestet (anderer Provider), auch dort kommen die Produktbilder zum Schluss, also ist das kein Providerproblem in diesem Fall, sondern es hakt am JTL Shop.

Deshalb noch einmal die Frage: Was muss ich umstellen, um das Produktbild im Content zuerst geladen zu bekommen?

 

[martinwolf]

Danke erst einmal für die Antworten. Leider ist das Problem mit dem Produktbild nicht gelöst. Es muss doch möglich sein, das Laden der Produktbilder vor dem Laden der anderen Inhalte zu stellen.?

Dann schmeiß in der snippet/image.tpl auf Zeile 4 das "data-" raus. Dann werden sämtliche Artikelbilder nicht mehr verzögert geladen. Das wird dir aber die Ladezeiten verschlechtern. Ich versteh auch nicht wieso du da soviel Wert drauf legst. Wenn dir Bilder einmal geladen wurden und im Cache sind sind die doch instant da. Oder ist dein Shop so langsam?

Ich würde viel eher daran ansetzen die Seite bzw. die ganzen Ressourcen die du nutzt zu optimieren. CSS udn JS im Template komrpirmieren um die Anfragen zu reudzieren und auch mal überlegen ob 500KB große Kartenmotive nötig sind. Alleine die Bilder auf der genannten Seite ziehe mit 7,1MB!!! Das ist ein absolutes No-Go, besonders in der heutigen Zeit mit sovilene Möglichkeiten der Optimierung. Das ist ja ein Todesurteil für jedes mobile Datenvolumen.

Dann bindet sich für jedes Video eine über 400k große Scripdatei mit ein: https://s.ytimg.com/yts/jsbin/player-de_DE-vflQ2nz71/base.js
Ich denke hier wäre eine Playlist besser als multiple Einzeleinbindungen.

 

[martinwolf]

Bzw. auch mal ein Beispiel wo mehrere Videos performant eingebunden sind: https://www.dj-technik.de/Traktor-Kontrol-S5

 

[Steve K.]

Hallo Herr Wolf, vielen Dank für diese Hinweise.

Zur Erklärung: Das Produktbild ist aus unserer Sicht die wichtigste Info, die der Kunde so schnell wie möglich sehen sollte, denn darum geht es ja auf der jeweiligen Seite. Die ganzen Zusatzbilder, Texte, Videos etc. können theoretisch nach und nach eintrudeln. Die Gesamtladezeit des Shops ist für diese Datenmenge für uns okay, lässt sich sicher noch etwas optimieren. Die Videos müssen auf diese Art (iframes von Youtube) eingebunden werden, damit man sie gleich starten kann. Eine Playlist ist leider auch keine Option.

Ich habe die snippet/image.tpl bearbeitet (Evo-Template), bei den Kategorieübersichten werden dann die Produktbilder nicht mehr geladen und auf den eigentlichen Produktseiten sah ich leider keine Verbesserung bei der Ladezeit des Produktpics. Wenn ich Sie richtig verstanden habe, bedeutet die Änderung der Datei aber eh, dass man andere Performanceeinbußen in Kauf nehmen muss. Von daher ist das eigentlich auch nicht die Lösung. Uns schwebt eine Änderung der Abfragen vor, wann was im Shop abgearbeitet wird, da die Produktbild-Abfrage ja scheinbar ganz zum Schluss erfolgt. Dieses ist nicht möglich?

 

[martinwolf]

Hallo Herr Wolf, vielen Dank für diese Hinweise.

Zur Erklärung: Das Produktbild ist aus unserer Sicht die wichtigste Info, die der Kunde so schnell wie möglich sehen sollte, denn darum geht es ja auf der jeweiligen Seite. Die ganzen Zusatzbilder, Texte, Videos etc. können theoretisch nach und nach eintrudeln. Die Gesamtladezeit des Shops ist für diese Datenmenge für uns okay, lässt sich sicher noch etwas optimieren. Die Videos müssen auf diese Art (iframes von Youtube) eingebunden werden, damit man sie gleich starten kann. Eine Playlist ist leider auch keine Option.

Ich hatte ja gestern noch ein Beispiel gepostet wo die Videos einzeln eingebunden werden aber nicht im Vorfeld schon alles von Youtube geholt wird außer dem Bild. Es gaht also auch performant

Ich habe die snippet/image.tpl bearbeitet (Evo-Template), bei den Kategorieübersichten werden dann die Produktbilder nicht mehr geladen und auf den eigentlichen Produktseiten sah ich leider keine Verbesserung bei der Ladezeit des Produktpics. Wenn ich Sie richtig verstanden habe, bedeutet die Änderung der Datei aber eh, dass man andere Performanceeinbußen in Kauf nehmen muss. Von daher ist das eigentlich auch nicht die Lösung. Uns schwebt eine Änderung der Abfragen vor, wann was im Shop abgearbeitet wird, da die Produktbild-Abfrage ja scheinbar ganz zum Schluss erfolgt. Dieses ist nicht möglich?

Das lässt sich ohne den Einsatz eines CDN garnicht beeinflussen. Bilder werden grundsätzlich nach JS und CSS Ressourcen geladen wenn sie von der selben Domain kommen.

 

[Steve K.]

Vielen Dank nochmals für die Hinweise und Mühe bei der Beantwortung meiner Fragen.

Ich frage mal etwas provokant: Ist das evtl. ein konzeptioneller Fehler des JTL - Shops?

Dass Bilder nach Abarbeitung des CSS geladen werden, das ist wohl so, aber es bleibt wichtig, wann welches Bild geladen wird. Alle (!) anderen Inhalte werden vor dem Produktbild geladen.

Mein Kollege formulierte das gerade aus meiner Sicht ganz treffend, ich zitiere ihn mal komplett:

"Unser Shop befindet sich im Aufbau und ist daher auch noch nicht optimiert, da wird noch einiges geändert. Aber das ändert doch nichts an der Tatsache, dass das Produktbild zur falschen Zeit geladen wird. Entweder ist das ein konzeptioneller Designfehler im JTL Shop 4 oder wir haben die Reihenfolge der zu ladenden Objekte nicht korrekt gesetzt. Es kann doch nicht sein, dass der Shop den Bereich der Seite, den der Kunden zuerst sieht, als letztes lädt. Der Kunde fängt doch nicht unten an zu lesen. Selbst wenn wir den Content auf 1MB oder weniger reduzieren, würde ein Kunde mit langsamen Internet (z.B. auf dem Land oder Mobile EDGE) lange warten, bis im oberen Bereich das Produktbild angezeigt wird. In der Zeit wird der Kunde wahrscheinlich schon wieder die Seite verlassen.

Das Ganze hat nichts mit 1und1, schlechter Latenz oder zu großem Content zu tun. Es muss doch eine Lösung geben, womit das Produktbild vor dem eigentlichen Content geladen werden kann. Irgendwie muss doch die Reihenfolge verändert werden können oder?"


Ich hoffe, dass einer hier im Forum eine Lösung für uns hat.

 

[ag-websolutions.de]

Ist das evtl. ein konzeptioneller Fehler des JTL - Shops?

Nein, ganz im Gegenteil

Irgendwie muss doch die Reihenfolge verändert werden können oder?"

lesen: https://www.html5rocks.com/de/tutorials/internals/howbrowserswork/