Strona z ogromną ilością zdjęć, Jak możliwie NAJBARDZIEJ skrócić czas ładowania ? Opcje

[SpiJay]

Cześć forumowicze,

długo nie otwierałem żadnego tematu na forum i wkońcu nastał ten dzień, gdzie muszę radzić się was - bardziej doświadczonych w tym temacie.

Mam stronę o tematyce win - powiedzmy, że to jest sklep.
Strona jest dość nietypowej konstrukcji, ponieważ do wyświetlania win
wykorzystałem takie wizualne rozwiązanie:

(IMG:http://spijay.com/download/problem1.png)

[HTML] pobierz, plaintext 
<div id="slider>
	<div class="slide-custom">Lorem... <img src="wino1.jpg" /></div>
	<div class="slide-custom">Lorem... <img src="wino2.jpg" /></div>
	<div class="slide-custom">Lorem... <img src="wino3.jpg" /></div>
	<div class="slide-custom">Lorem... <img src="wino4.jpg" /></div>
	<div class="slide-custom">Lorem... <img src="wino5.jpg" /></div>
	(...)
</div>
<ul id="miniaturki">
	<li><div class="mini-slide"><img src="mini-wino1.png" /></div></li>
	<li><div class="mini-slide"><img src="mini-wino2.png" /></div></li>
	<li><div class="mini-slide"><img src="mini-wino3.png" /></div></li>
	<li><div class="mini-slide"><img src="mini-wino4.png" /></div></li>
	<li><div class="mini-slide"><img src="mini-wino5.png" /></div></li>
	(...)
</ul>
[HTML] pobierz, plaintext 

Fioletowe, elementy to OBRAZKI.
Na dole ponumerowane są miniaturki etykietek win, po kliknięciu slider (szary element) przesuwa się do klikniętego wina.
Każde wino ma swój opis i swoje 2 zdjęcia - miniaturka w nawigacji na dole oraz zdjęcie duże w górnym oknie opisowym.

Wszystko działa superowo, ale jest problem... Mam już 200 win czyli razem 400 obrazków (IMG:style_emoticons/default/sad.gif)
W miniaturki wbudowałem skrypt jCarousel do przewijania ich, czyli mam 200 pozycji <li> ...
Strona się BARDZO DŁUGO wczytuje, jakie rozwiązanie zastosować przy takim układzie ?

Obecnie przy wczytaniu strony następuje zapis obrazków do pamięci podręcznej przeglądarki:

.htaccess

[PHP] pobierz, plaintext 
<FilesMatch "\.(ico|jpg|gif|png|css|js)$">
Header set Cache-Control "max-age=2851200, public"
</FilesMatch>
[PHP] pobierz, plaintext 

(dobrze?)

Nie mogę pozwolić na tak długie ładowanie strony przy wejściu.
Jak rozwiązać ten problem jednocześnie zachować udostępnianie botom internetowym indeksowanie wszystkich win ?

Proszę o wskazówki, temat jest dla mnie ważniejszy niż rocznica małżeństwa - w sumie bez przesady, ale to równie ważne (IMG:style_emoticons/default/smile.gif)

Ten post edytował SpiJay 12.09.2013, 22:31:20

[phpion]

Obrazki to jedno, ale JS to drugie. Skryptu typu karuzele mielą sporo w czasie swojej pracy dokładając kolejne elementy do DOM. Jeśli u Ciebie karuzela ma 200 elementów to nie dziw się, że strona się długo wczytuje. Pomijając wczytywanie samych obrazków JS też potrafi przyciąć. Co sugeruję? Inaczej zorganizować prezentację win.

[SpiJay]

Zależy mi aby układ został (IMG:style_emoticons/default/closedeyes.gif)

Dodałem jeszcze skrypt IsoTope -> http://isotope.metafizzy.co/ który daje możliwość bardzo zaawansowanego filtrowania treści bez przeładowania strony.
Szukanie na podstawie frazy, koloru, rodzaju, nazwy, dosłownie wszystkiego.

Aczkolwiek treści do filtrowania muszą być wygenerowane w dokumencie.

Ale mam pytanie...
1. Czy wygenerowana baza w XML pomogła by przy dodaniu takiego "sekwencyjnego" ładowania tych win ?
Na początek wyświetlam 10 win, jeżeli karuzela dojedzie do końca, ładuje kolejne 10.

2. Czy skrypt Isotope, który (jak wyżej napisałem) filtruje mi wyniki mógłby jakoś pracować na tym pliku XML ?
Po wybraniu opcji filtrowania wyświetlałby wina z XML oraz..

3. Jest jeszcze problem ze skryptem jCarousel i właśnie Isotope, ponieważ jak wybiorę filtry, to ukrywa elementy, które nie są wynikami filtrów.
Dla jCarousel jest nadal 200 pozycji. Można jakoś zaktualizować szerokość / ilość listy karuzeli ?

4. Co na to roboty internetowe ? Czy można im jakiś "podrzucić" XML do indeksowania ?

Ten post edytował SpiJay 13.09.2013, 11:13:08