Bilder auf Startseite erst nach neu laden sichtbar

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 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.

    Einmal editiert, zuletzt von Melewo (1. August 2013 um 20:24)

  • 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.

  • Da wir vom Programmieren keine Ahnung haben, haben wir ein vorgefertigtes Theme genommen und am Code selbst nichts gemacht...
    Die CSS- und JavaScript-Dateien kommen doch aber vermutlich in erster Linie vom Theme selbst, oder?
    Was können wir denn da überhaupt groß machen (ohne etwas zu zerstören ;) )?

  • Die CSS- und JavaScript-Dateien kommen doch aber vermutlich in erster Linie vom Theme selbst, oder?


    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.

    Was können wir denn da überhaupt groß machen (ohne etwas zu zerstören ;) )?


    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!