it-swarm.com.de

Gibt es einen Webpage-Preloader?

Ich habe einen Preloader für Flash | SWF-Dateien, einen Preloader und einen Lazy Loader für Bilder gefunden. Aber nichts für die komplette Webseite.

Einige Sites, wie meine, haben große Kopf- und Fußzeilen. Ich brauche einen Preloader dafür. Bitte vorschlagen.

3

Möchten Sie eine komplette Webseite vorab laden? Junge, habe ich die perfekte Lösung für dich!

Firefox unterstützt Link Prefetching und ist Teil von HTML 5, was bedeutet, dass es in den kommenden Monaten von mehr Browsern unterstützt wird.

Schreiben Sie einfach so etwas in den Abschnitt <head> Ihres HTML-Dokuments:

<link rel="prefetch" href="http://url.goes.here/" />
<link rel="prefetch" href="http://url.goes.here/images_work_too.jpg" />

Lesen Sie hier mehr darüber:

3
Anirvan

Ich bin mir nicht sicher, was du mit Preloader meinst. Sie können auf einer Seite nichts laden, bevor Sie sie aufrufen, es sei denn, es wird auf einer Seite wiederverwendet, die bereits aufgerufen wurde, oder es wird in Erwartung auf eine frühere Seite geladen (dies ist keine gute Idee).

Sie können JavaScript zum verzögerten Laden von Kopf- und Fußzeilen verwenden, indem Sie die Kopf- und Fußzeile mit allen leeren Tags mit IDs laden und sie später mit JavaScript laden. Im Allgemeinen würde ich nicht empfehlen, dies zu tun, da dies viel zusätzliche Arbeit bedeutet und Ihre Seite größer machen kann. Sie werden zusätzliches JavaScript haben und Sie haben nicht wirklich etwas gewonnen.

Ich würde vorschlagen, dass Sie Ihre Bilder faul mit JavaScript laden, da sie anscheinend einen Großteil Ihrer Seite ausmachen. Probieren Sie Ihre Seite auch in Fire Fox aus und installieren Sie Firebug und YSlow. Auf diese Weise können Sie erkennen, warum Ihre Seite langsamer ist.

Hier sind ein paar Dinge, die mir besonders aufgefallen sind und die Sie sofort erledigen können:

  1. Kombinieren und verkleinern Sie Ihre CSS-Dateien. Du hast gerade 6. Sie haben Overhead für jede Datei, die Sie laden.
  2. Verwenden Sie den Browser-Cache, um die auf Ihrer Site verwendeten Bilder zwischenzuspeichern. Auf diese Weise wird nur eine Seite langsam geladen. Danach werden die Bilder aus ihrem Cache gezogen.
  3. Geben Sie die Breite und Höhe aller Ihrer Bilder an. Dies verringert die Ladezeit.
  4. Minimieren Sie Ihr HTML
  5. Minimieren Sie Ihre Bilder. Sie sind 11% größer als sie sein müssen.
  6. Platzieren Sie Bilder in einer Domain ohne Cookies, damit sie schneller geladen werden.
  7. Sprite kleinere Bilder, die Sie immer und immer wieder verwenden. Dadurch wird die Anzahl der http-Aufrufe verringert, die zum Laden jeder Seite erforderlich sind.

Schließlich ist eine weitere Möglichkeit, Ihnen zu helfen, das Zwischenspeichern von Dingen auf Ihrem Server. Wenn auf Ihrer Site viele Datenbankabfragen nach Inhalten vorhanden sind, die sich selten oder nie ändern, speichern Sie die Ergebnisse von Abfragen im Cache Ihres Servers. Dadurch sinkt die Verarbeitungszeit des Servers. Unternehmen wie Facebook tun dies bis zu einem Punkt, an dem 99% ihres Inhalts im Server-Cache gespeichert sind.

6
Ben Hoffman

Ihre Kopf- und Fußzeile ist insgesamt 202 KB groß. Wenn Sie den JPEG-Qualitätsparameter beim Speichern der Bilder verringern, können Sie ihn wahrscheinlich auf 150 KB oder sogar 100 KB reduzieren, ohne dass ein merklicher Qualitätsverlust auftritt.

Eine andere Möglichkeit besteht darin, den Header in zwei Teile zu unterteilen, einen mit den detaillierten Grafiken wie den im Wasser planschenden Würfeln und einen anderen mit den "einfarbigen" Blöcken. Speichern Sie den zweiten Teil als PNG und Sie können dort sparen. Reduzieren Sie nach Möglichkeit auf 256 Farben (dies können Sie mit ziemlicher Sicherheit in der Fußzeile tun).

Mir ist auch aufgefallen, dass die Kopf-/Fußzeile als application/octet-stream angezeigt wird. (Wenn Sie das Bild direkt öffnen werden Sie aufgefordert, es herunterzuladen.) Ich weiß nicht, ob dies einen Unterschied macht, aber ich würde versuchen, die entsprechenden Bild-MIME-Typen wie image/jpeg zu verwenden. . Möglicherweise lädt der Browser die gesamte Datei herunter, bevor er genau weiß, um welchen Typ es sich handelt.

Andernfalls könnten Sie einen Javascript-Trick verwenden, um die Bilder zuletzt zu laden. Verschieben Sie die CSS-Regeln für die Hintergrundbilder in zwei separate CSS-Klassen, fügen Sie sie jedoch nicht zum HTML-Code hinzu. (Jetzt, wenn die Seite geladen wird, werden die Bilder nicht angezeigt.) Verwenden Sie Javascript, um diese Klassen hinzuzufügen, sobald die Seite geladen ist.

1
DisgruntledGoat