Wie würden Sie das "zufällige" Laden großer Bilddateien optimieren/simulieren?

Question

Wir verwenden große Hintergrundbilder (hochauflösende Fotos, bis zu 700 KB) für unser Seitendesign. Es ist Teil der Erfahrung der Website, dass Sie beim Durchsuchen verschiedene Bilder sehen.

Im Moment wird auf jeder Seitenanforderung ein anderes (zufälliges) Bild aus einem Pool von ~ 15 Bildern geladen, die mit der Zeit wachsen könnten.

Ich bin für eine vernünftige Art und Weise suchen, dies zu optimieren:

1. die Benutzer zu vermeiden herunterladen, die eine große Image-Datei auf jede Seite Ansicht
2. Um Last auf dem Server zu reduzieren (ist dies ein Problem ist, hält der Server die Bilder im Speicher)

die Ideen, die ich bisher sind:?

• Ein Timer, der in festgelegten Intervallen
• Progressiv lädt andere Bilder im Hintergrund mit Ajax
• Zuordnen von Bildern mit bestimmten Inhalten (Seiten, Tags)

Die Frage ist, wie ein anderes Bild lädt zu halten Es fühlt sich etwas zufällig an, während Seitenladezeiten und Servertreffer minimiert werden.

Answer 1

Ich vermeide normalerweise Seiten mit riesigen Bildern, ich bin sehr ungeduldig. Ich würde dein Design überdenken.

Answer 2

Als ersten Schritt sollten Sie sich vergewissern, dass die Bilder korrekt zwischengespeichert werden können:

• Verwendung sane Urls (keine etc Sitzung id)
• gesetzt entsprechenden HTTP-Header ETag

Answer 3

Erstens, wenn ich höre, dass die Hintergrundbilder allein 700kb sind, erstaunt mich. Neben dem Inhalt auf dem Bildschirm ... das ist eine ziemlich schwere Seite.

Für den Anfang würde ich versuchen, Bildkomprimierungswerkzeuge zu verwenden. Zwei Werkzeuge kommen mir in den Sinn: Imagemagick und PNGCrush. PNGCrush reduziert alle an Metadaten angehängten überflüssigen Metadaten hervorragend, ohne die Fotoqualität zu beeinträchtigen.

Ich empfehle nur dies als Komprimierung der Bilder wird Ihnen dabei helfen, den Benutzer zu ermöglichen, eine kleinere Menge von Inhalten zu downloaden, was schnellere Ladezeiten bedeutet, was ... am Ende des Tages ... ist, was Benutzer wollen .

Ich würde auch die Bilder zwischenspeichern, so dass, wenn ein Benutzer die Website erneut besucht, das Bild bereits an ihrem Ende zwischengespeichert ist. Dies minimiert die HTTP-Anforderungen, die bei jedem Besuch eines Nutzers auf Ihrer Website gestellt werden. Ein Beispiel für die Verwendung dieser Technik auf einer kommerziellen Website ist www.reactive.com. Wenn Sie die Datei /js/headerImages.js durchsuchen, verwenden sie das Image-Caching. Lustigerweise finden Sie den gleichen src-Code unter: http://javascript.internet.com/miscellaneous/random-image.html

Angesichts der Tatsache, dass Sie erwähnt haben, dass Bilder nach dem Zufallsprinzip geladen werden, nehme ich an, dass Sie eine Javascript-Bibliothek wie jQuery verwenden, um den Effekt zu erstellen. Wenn dies der Fall ist, können Sie die Ladezeiten von Seiten mithilfe eines CDN minimieren, anstatt auf eine lokale Kopie der jQuery-Bibliothek zu verweisen, die auf Ihrem Server gespeichert ist. Ich habe auf einer Website, die ich für einen Kunden erstellt habe, Leistungstests durchgeführt und über durchschnittlich 20 Treffer 1,6 Sekunden durch diese Technik eingespart!

Hoffnung, die jetzt hilft :)