Viele Bilder mobile Webseite - Optimierung?

Hansi05 · 27.10.2015

Hallo liebe Leute,

ich habe eine mobile Webseite gebaut, die je nach Suchanfrage relativ viele Produkte untereinander auflistet. Wenn ich z.B. nach Cola suche, werden 15 Produkte gefunden. Zu jedem Produkt gibt es dann ein kleines Vorschaubild (für die mobile Webseite wurde die Auflösung schon reduziert). Damit das Datenvolumen möglichst gering bleibt, habe ich die Bilder alle als Hintergrund-Bilder geladen (dann wird beim erneuten Laden des Produktes ja auf das zwischengespeicherte Bild zurückgegriffen).

Ich bin mit dem Prinzip eigentlich ganz zufrieden. Aber es kann natürlich auch vorkommen, dass ein Nutzer einen allgemeineren Suchbegriff eingibt, bei dem es dann um die 50 Bilder laden muss. Ich fände es jetzt ideal, wenn es nur die Hintergrundbilder lädt, die der User auch wirklich sieht (also dass es die Bilder erst beim Scrollen nachlädt).

Entsprechend habe ich gesucht, und "lazy load" gefunden. Das einzige Problem was ich jetzt habe: Die Bilder werden jetzt nicht mehr als Hintergrundbild geladen. Und somit müssen die Bilder bei doppelter Suchanfrage auch doppelt geladen werden (das Hintergrundbild muss halt nur einmal geladen werden).

Ich habe jetzt schon mehrfach im Internet gesucht, aber irgendwie nicht das passende gefunden um eine Webseite mit relativ vielen Bilder einigermaßen "Smartphone-Freundlich" zu gestalten (bis auf das besagte reduzieren der Auflösung).

Habt ihr vielleicht eine Idee, ob und wie ich das besser lösen kann? Oder habe ich vielleicht sogar schon die beste Lösung?

In der Hoffnung dass ihr meine Gedankengänge versteht - und schon mal besten Dank für eure Tipps

Myhar · 27.10.2015

Wieso werden normale Bilder nicht gecached?

Hansi05 · 27.10.2015

Meinst du, dass die regulären Bilder (also die "Nicht-Hintergrundbilder") auch genauso im Zwischenspeicher landen, wie Hintergrundbilder, und dadurch nicht neu geladen werden?

Ich bin immer davon ausgegangen, dass die "normalen" Bilder bei jedem Aufruf neu geladen werden und dadurch mehr Traffic erzeugen (wenn ich ein Bild ändere, kommt auch immer sofort das aktuelle). Bei Hintergrundbildern dauert es ja in der Regel eine Weile, bis der Browser das neue Bild lädt.

Meinst du also es ist (im Bezug auf den Traffic) egal ob ich die Bilder einfach per <img src=""> einfüge, oder als Hintergrundbild?

Myhar · 27.10.2015

Ja natürlich. Wieso sollten diese Bilder auch nicht gecached werden? Das würde doch keinen Sinn ergeben?
Man muss natürlich auch die Servereinstellungen anschauen, man kann meines Wissens nach mitschicken, was wo wie gecached wird. Vielleicht muss bei den Bildern nur zusätzlich was mitgeschickt werden, damit diese im Cache landen.

lachender_engel · 27.10.2015

Hansi05 schrieb:
Meinst du, dass die regulären Bilder (also die "Nicht-Hintergrundbilder") auch genauso im Zwischenspeicher landen, wie Hintergrundbilder, und dadurch nicht neu geladen werden?

Ja, genau so ist es.
Der Brwoser macht keinen Unterschied wofür ein Bild verwendet wird. Du kannst zudem über die .htaccess sogar noch einige Einstellungen, wie die Cache-Zeit, dazu vornehmen.
Weitere Optimierungen, um den Traffic zu verringern, ist das Komprimieren der Dateien. Genaueres kannst Du hier nachlesen.

lipsum media · 27.10.2015

Korrigiere man mich, wenn ich mich irre - aber lässt sich die Anzahl der Zugriffe und somit auch die Datenmenge nicht reduzieren, wenn man alle Bilder als sogenanntes Sprite anlegt und somit nur eine einzige Datei zu laden hat? Das entsprechend gewünschte Bild ließe sich dann über CSS-Positionierung in entsprechenden Containern anzeigen...
Den einen oder anderen Nachteil gibt es wie im verlinkten Artikel natürlich auch, müsste man dann eben abwägen...

patrick_l · 28.10.2015

wheelie86 schrieb:
[...]wenn man alle Bilder als sogenanntes Sprite anlegt und somit nur eine einzige Datei zu laden hat?

Bloß nicht! Inhalts und somit auch Suchmaschinen relevante Bilder und Grafiken niemals als Sprite zusammenfassen. Lediglich die fürs Layout benötigen Grafiken in einer Spritemap organisieren und über CSS laden.

Liebe Grüße, Patrick

Hansi05 · 28.10.2015

Das mit dem Sprite scheint mir auch - mal abgesehen vom SEO Aspekt - keine Praktikable Lösung. Bisher sind über 1000 Produkte in der Datenbank. Dieses "Monsterbild" dann zu pflegen würde auch einen relativ großen Aufwand bedeuten.

Ich bedanke mir erst mal für die Tipps und werde sehen was und wie genau ich die umsetze!

afr0kalypse · 28.10.2015

Also.
1. Bilder cachen ist gut.
Es ist eher selten, dass sich die Bilder ändern. Es kommen vielleicht welche hinzu und es werden welche entfernt aber wirklich ändern tun die sich eher nicht. Daher ist cachen gut.
2. Rich Media Hosting.
Es gibt Produkte, die dir entsprechend für dein Endgerät optimierte Grafiken liefern.
Z.B. http://imageresizing.net/

und nächstes mal schicke ich meinen post auch rechtzeitig ab damit man ihn lesen kann xD

lipsum media · 28.10.2015

patrick_l schrieb:
Bloß nicht! Inhalts und somit auch Suchmaschinen relevante Bilder und Grafiken niemals als Sprite zusammenfassen. Lediglich die fürs Layout benötigen Grafiken in einer Spritemap organisieren und über CSS laden.

Liebe Grüße, Patrick

Wieder was dazu gelernt - ich komme ursprünglich eher aus der Print-Ecke, mache so Webgeschichten eher hobbymäßig und habe mich bisher noch nicht SO sehr damit befasst