Beeinflussen, was bei der homepage erst geladen/angezeigt wird

  • Hi,

    wenn jemand meine seite http://press-photographer.de aufruft, sieht das, bis das hintergrundbild geladen ist, so aus:

    Kann man beeinflussen, dass er erst den slider im hintergrund lädt? oder notfalls das logo?
    Das stört mich irgendwie schon lange.

    Thank god for great material

    • 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

  • Ich hab sehr flottes Internet, kenne aber die Problematik (hat ja auch nicht jeder LTE).

    Du kannst einen Preloader vorschalten. Entweder selber programmieren (jQuery) oder einen der verfügbaren aus dem WordPress-Repo ausprobieren. Bitte auf Kompatibilität und Aktualität achten. Das Theme hat (glaube ich) einen Loader, aber das ändert nix an den Umständen.

    Ggf. kannst Du aber auch noch etwas an der Dateigröße optimieren. Da eh ein Overlay vorhanden ist (die Rasterpunkte), kann man ggf. auch mal mit Artefakten leben. Wird vermutlich aber nicht bei allen Bildern gehn und bei einer Kompression unter 40 wird's für einen Fotografen eh empfindlich.

    Ansonsten deaktiviere mal Autoptimize und vergleich die Ladezeiten in der Entwicklerkonsole (FF/Chrome, Reiter Network -> Images).

    Abhilfe schafft das setzen einer Cookie-Domain und die Einrichtung eines CDN für statischen Content.

  • Ohne Autooptimize wirds schlimmer :razz:
    Die Preloader schaue ich mir an.

    Den Satz muss ich mir zu Gemüte führen und erst tante google fragen

    Abhilfe schafft das setzen einer Cookie-Domain und die Einrichtung eines CDN für statischen Content.

    Thank god for great material

  • Ok.

    Ganz Abstrakt kannst Du ja auch mal hergehen, und das Bild mit base64 kodieren und direkt im Quelltext einbinden. Der Aufwand ist sehr hoch (Anpassung des Themes, Workflow, etc.) und für ein großformatiges Hintergrundbild eher "too-much", aber es lädt deutlich schneller. Umwandeln eines Bildes bspw. über http://www.base64-image.de/. Am besten testest Du das mit einer normalen HTML-Seite und nicht in WordPress.

    Hilft aber alles nix, wenn man nur Wald- und Wiesen-DSL zur Verfüfung hat... :D

    Ein CDN ist praktisch einfach nur eine Subdomain, von der die statischen Inhalte ausgeliefert werden. Das sind CSS, Javascript, ggf. können dort auch Plugins und Themes ausgelagert werden, Bilder, usw.
    Alles das, was sich nicht ständig ändert. Im Zusammenspiel mit header und expire des Webservers speichern die Browser diese Daten dann brav (und lange) im Cache. Ladezeiten werden dadurch teilweise erheblich minimiert. Macht Sinn bei stark frequentierten Webseiten, aber auch der Hobbymensch kann sich das zueigen machen.

    Selber testen: http://tools.pingdom.com

  • Nur zum Verständnis: Es wird einfach das zuerst angezeigt, was zuerst komplett geladen ist?
    Und ist die grundsätzliche Reihenfolge, was geladen wird, im Theme zu finden?

    Thank god for great material

  • Du kannst das im FF/Chrome selber nachschauen (oder oben den Link nutzen), was wann geladen wird und wie lange es dauert. Einfach mal F12 drücken und auf den Reiter "Netzwerk/Network" gehen...

  • Geladen wird das logo zuerst - aber wohl nicht angezeigt, weil es am ende des oberen sliders liegt. grrrrrrr.

    Die Hintergrundbilder sind schon mehrfach verkleinert - noch mehr wollte ich bei den dingern nicht machen.

    Thank god for great material

    Einmal editiert, zuletzt von hydro (26. Juni 2015 um 17:22)

  • *ächz* Hier mal ein Snippet:

    1. Funktion zum Laden von Bildern, jQuery.
    2. Nimmt ein Array von Bildern (inkl. Pfad) entgegen.
    3. Jedes Bild wird an den BODY-Tag des Dokuments gehängt und "versteckt" (Anm.: .hide() verursacht Probleme im IE9, abhängig von der jQuery-Version).
    4. Durch das Anhängen landen die Bilder im Cache.

    Ändert nichts an der Tatsache, dass das Bild erst geladen sein muss. Hat den Vorteil, dass die Bilder als erstes geladen werden.

    Ganz plump könnte man auch einfach ein Delay beim Aufruf der Startseite machen - bspw. 2 Sekunden - und dann geht's erst weiter. In der Zeit ein rotierendes Eichhörnchen einblenden oder so... :D


  • Ganz plump könnte man auch einfach ein Delay beim Aufruf der Startseite machen - bspw. 2 Sekunden - und dann geht's erst weiter. In der Zeit ein rotierendes Eichhörnchen einblenden oder so... :D

    Eins das Nüsse knackt
    Ich weiß ja, dass ich keine Ahnung hab, aber ich muss ja wo anfangen :razz:

    Thank god for great material

  • Dann probier mal einen Preloader aus dem WordPress-Repository aus... sind ja einige vorhanden.

    Bitte keine Uralt-Versionen verwenden! :)

Jetzt mitmachen!

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