Sehr viele Bilder auf einer Seite - optimieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
auffassung
bild
ersten zehn
festzustellen
freuen
gestaltung
golem
http
inhalt
laden
ladezeit
nutzer
obige fehler
optimieren
platzhalter
url
volumen
webseite
zehn
-
Hallo zusammen.
Auf einer Seite von mir werden sehr viele Bilder angezeigt, um die 500 Stück. Jetzt möchte ich das Laden der Seite optimieren.
Also erstens kommt es fast immer vor, dass mindestens ein Bild nicht geladen werden kann. Das sind dann auch bei jedem Neuladen unterschiedliche Bilder. Anstelle des Bildes wird dann immer dieses Platzhalter Bild angezeigt.
Wenn ich unter Chrome das Developer Tool öffne und mir die Fehlermeldungen anzeigen lasse, kommen die Errors:
GET http://.../7.png net::ERR_EMPTY_RESPONSE
GET http://...//14.png net::ERR_CONNECTION_TIMED_OUT
Außerdem lädt die Seite relativ lange, deshalb kommt vermutlich auch der obige Fehler.
Wie kann ich also meine Seite optimieren, sodass die Ladezeit verkürzt wird und der obige Fehler behoben werden kann?
Ich würde mich über Hilfe freuen.
Viele Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ultimate-bravery schrieb:
Und hier ist auch schon die Antwort:
Außerdem lädt die Seite relativ lange, deshalb kommt vermutlich auch der obige Fehler.
Auf einer Seite von mir werden sehr viele Bilder angezeigt, um die 500 Stück.
500 Bilder auf einer einzigen Webseite? Weia.. :)
Wie kann ich also meine Seite optimieren, sodass die Ladezeit verkürzt wird und der obige Fehler behoben werden kann?
Ganz eindeutig weniger Bilder pro Seitenaufruf. Entweder z.B. 10 Bilder pro Seite und einen "Weiter" -Link, oder per Ajax eine Nachlade-Funktion, die erst dann weitere Bilder nachlädt, wenn ganz heruntergescrolt wurde. Also so, wie bei Facebook oder Twitter.
Oder man bietet Themen von A-Z an, oder gibt Themenbereiche vor - beides anklickbar.
Man darf ja auch die vielen Smartphone-Nutzer nicht außer Acht lassen: Viele haben keine Traffic-Flatrate. Würdest Du dich darüber freuen, wenn Du eine Webseite besuchst, und dann ist dein Volumen bereits halb aufgebraucht? ;)
Grundsätzlich lassen sich Antworten auf Fragen wie "Wie löse ich dies & jenes" an bekannten seriösen Webseiten abschauen, wie z.B. bei heise.de oder golem.de.
Was mich betrifft, bemühe ich die Esc-Taste, wenn eine Webseite nicht aufhören will, zu laden. Ich mag es nicht, erschlagen zu werden. Meistens überfliege ich dann nur kurz die Inhalte, um festzustellen, dass mich so eine Webseite nicht wiedersieht. Wer wirklich wichtige Informationen bereitstellt, bietet weiterführende Links an: Zum Beispiel so.
;) -
Ich würde das so wie bei Google machen, dass die ersten zehn Bilder geladen werden und die restlichen erst beim Scrollen weiter nach unten. Falls das jedoch zum Problem wird, könntest du mehrere Seiten anlegen. Auf jeder Seite so zehn Bilder und einen Weiter-Button mit integrieren.
-
menschle schrieb:
Man darf ja auch die vielen Smartphone-Nutzer nicht außer Acht lassen: Viele haben keine Traffic-Flatrate. Würdest Du dich darüber freuen, wenn Du eine Webseite besuchst, und dann ist dein Volumen bereits halb aufgebraucht? ;)
Man darf ganz allgemein bei der Gestaltung von Webseiten den Nutzer=Besucher nicht außer Acht lassen. Solcher Webseiten sind nach meiner Auffassung ein Fall für's Internet-Ordnungsamt.
Bezüglich des kontinuierlichen Nachladens von Inhalten liest man allerdings auch immer wieder kritische Stimmen. -
Für jQuery gibt es einige gute Lazyload Plugins die mit dem HTML data- Attribut arbeiten. Diese laden die benötigten Bilder erst, wenn sie in den Viewport oder dessen Nähe gelangen und verhindern auf diese Art das unnötige Laden von Bildern. Alternativ wäre es auch möglich mehrere Seiten durchzublättern, z.B. indem die nächsten Bilder mittels PHP und reload oder per Ajax bereitgestellt werden.
-
Und natürlich sollten die Bilder auch nicht wirklich größer sein, als sie angezeigt werden. Wenn du Bilder mit über 500px laden lässt, die dann per CSS auf 100px skaliert werden, dann wird auch unnötig Traffic verbraucht.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
