Bilder auf Startseite erst nach neu laden sichtbar

Deine Startseite sendet laut Firebug 92 Requests in einer Zeit von rund 15 Sekunden. Also, die Bilder laden schon oder besser gesagt noch, wenn die ersten Besucher bereits wieder verschwunden sind. Beim zweiten Aufruf holt der Browser sich dann vieles aus dem Cache, was die Ladezeit verkürzt.

Also, meine Meinung dazu wäre, die Anzahl der Anfragen (Requests) solltest Du minimaler halten und alles was nicht gleich sein muss, erst nach onload nachladen. Wichtig ist doch, das die Seite erst einmal fertig angezeigt wird.

Habe jetzt nicht weiter geschaut, doch wenn es sich um viele kleinere Grafiken handelt, so sollte eventuell bereits CSS Sprites etwas bringen.

 

Ich kann Dir jetzt keine umfassende Analyse anbieten, doch allein wenn ich mir den Quelltext betrachte und sehe, was da im Head eingebunden ist. 6 x CSS-Dateien und 16 x JavaScript-Dateien. Im Footer kommen weitere 6 bis 7 JS-Dateien hinzu. Drei von den JS-Dateien habe ich geöffnet, die enthielten auf dem ersten Blick nicht mehr, als was man nicht auch in eine Datei hätte schreiben können.

Außer was direkt das jQuery-Framework betrifft und die JS, die auf entfernten Servern liegen, würde ich alle anderen eventuell nur in ein bis zwei Dateien zusammenführen. Und schon brauchte der Browser 20 Dateien oder mehr weniger vom Server anzufordern.

Dann 8 oder 9 große Bilder für den Slider, die Bilder bis zu über 300 kB groß und alle direkt im Quelltext notiert. Sieht toll aus, doch es gab auch einmal Modem-Zeiten, wo die ganze Startseite nicht größer als 50 bis 100 kB sein sollte. Nun gut, ohne etwas mehr geht es heute nicht mehr ab, doch man kann es auch übertreiben.

Ich habe schon Tutorials gesehen, wo Grafiken für Slider vorgeladen wurden, damit die möglichst reibungslos arbeiten. Vorladen ja, aber erst nach onload, also nach dem das Fenster fertig geladen ist und somit eigentlich nachladen. Denke hier ist es ganz gut erklärt an Hand von Beispielen:

http://www.mediaevent.de/javascript/lib-jquery-Events.html

Nur hätte mich das als absoluter Neuling eher alles abgeschreckt, statt ermutigt, mich damit auseinander zusetzen bzw. ich hätte vor einem scheinbar undurchdringlichen Dickicht gestanden.

 

Weiß ich nicht, ich könnte mir auch vorstellen, dass da jedes Plugin seine eigene CSS oder JS mit in den Header schiebt. Habe erst eins entwickelt und da schreibe ich gleich mit zu, dass die Nutzer besser fahren, wenn sie die CSS nicht aktivieren, sondern stattdessen die Klassen kopieren und mit in die vorhandene CSS einfügen. Ob das andere auch so handhaben, keine Ahnung.

Ich würde im ersten Durchlauf die Bilder in verschieden Stufen komprimieren, dann mir die Stufen heraussuchen, bei denen ein Qualitätsverlust noch nicht sichtbar wird. Da sollten sich schon einige hundert kB einsparen lassen. Zumindest war das bei mir immer ein Schritt, als mir für weitere Schritte noch die Kenntnisse fehlten.

Anschließend heißt es halt lernen oder jemanden beauftragen.