Effektive Methoden zur Reduzierung der Bandbreite (und damit der Ladezeiten)?

12

Was sind die effektivsten Methoden zur Reduzierung der Bandbreite, die eine Website zum Rendern einer Seite benötigt?

Aggressives Caching? JS / CSS reduzieren? Gzip? CMS? Sprites?

Mark Henderson
quelle
Doppelte Frage wird doppelt beantwortet: webmasters.stackexchange.com/questions/569/…
Bryson
1
Diese Frage war die erste, die andere ist das Duplikat
Mark Henderson

Antworten:

10

Einige grundlegende Methoden, die von jeder Website leicht implementiert werden können:

  • Komprimieren Sie Ihr HTML, CSS und Javascript mit deflateoder gzipwenn der Browser, der die Anfrage gestellt hat, dies unterstützt.
  • Reduzieren Sie Ihr Javascript mit dem Google Closure Compiler
  • Minimieren Sie Ihre CSS mit YUI Compressor

Ein bisschen mehr beteiligt:

  • Wenn sich eine Seite oder ein Bild wahrscheinlich nicht ändert, teilen Sie dem Browser mit, dass er es zwischenspeichern soll. Die meisten Webserver tun dies bereits für statische Dateien. Sie müssen sie daher nach Möglichkeit nur zu Ihren dynamischen Skripts hinzufügen.
  • Führen Sie Ihre CSS- und JS-Dateien automatisch zu einer einzigen zusammen . Dies ist vorteilhaft, da es die HTTP-Anforderungen verringert (die Overhead haben und von bestimmten dummen Browsern - und damit meine ich Internet Explorer - standardmäßig 2 Anforderungen gleichzeitig pro Domäne begrenzt werden).
  • Verschieben Sie Ihre statischen Dateien (CSS, JS, Bilder usw.) in einen separaten Domainnamen. Dadurch werden in der HTTP-Anforderung keine Cookie-Informationen gesendet.
  • Verwenden Sie Sprites, die automatisch generiert werden . Ein Sprite ist ein einzelnes Bild mit mehreren Symbolen oder anderen kleinen Bildern. Anschließend wählen Sie aus, welches Bild mit der CSS- backgroundEigenschaft angezeigt werden soll . Beispiel .

    Der Vorteil besteht darin, dass der Client weniger HTTP-Anforderungen stellt (die Overhead haben).

Ich habe "automatisch" gewagt, weil es sich definitiv nicht lohnt, wenn Sie diese Dinge manuell erledigen, und die Codewartung zu einem Albtraum wird. In der Regel bedeutet dies automatisch, dass Sie ein benutzerdefiniertes Skript schreiben.

Thomas Bonini
quelle
Ich wollte antworten, aber ich denke, Sie haben alles abgedeckt :)
Echo sagt Reinstate Monica
Overhead ist in der Tat wichtig, da kleine Dateien einen guten Anteil der übertragenen Daten ausmachen können.
HoLyVieR
Verwenden Sie deflate nur, wenn Sie den Benutzeragenten sorgfältig überprüfen, da es im Internet Explorer einen Fehler in Bezug auf deflate gibt.
@ Kinopiko: ja, gute ratschläge. Siehe meine Frage zum Stapelüberlauf.
Thomas Bonini
5

Google hat seine Empfehlungen erläutert, um die Nutzlastgröße zu minimieren . Sie umfassen die folgenden Techniken:

  1. Aktivieren Sie die Komprimierung
  2. Unbenutztes CSS entfernen
  3. Minimieren Sie JavaScript
  4. CSS reduzieren
  5. HTML verkleinern
  6. Verzögern Sie das Laden von JavaScript
  7. Bilder optimieren
  8. Servieren Sie skalierte Bilder
  9. Stellen Sie Ressourcen über eine konsistente URL bereit

Diese Vorschläge sind Teil ihres Open-Source-Firefox / Firebug-Add-On-Projekts mit dem Namen Page Speed . Ähnlich wie das YSlow- Plugin von Yahoo! Das eigentliche Seitengeschwindigkeits-Add-On sucht nach viel mehr Optimierungen, als in dieser Liste ausführlich erläutert wird. Anweisungen zur Verwendung der Seitengeschwindigkeit werden ebenfalls angezeigt.

Die Best Practices von Yahoo! zur Beschleunigung Ihrer Website enthalten eine Reihe ähnlicher Best Practices:

  1. Minimieren Sie HTTP-Anforderungen
  2. Verwenden Sie ein Content Delivery-Netzwerk
  3. Fügen Sie einen Expires- oder Cache-Control-Header hinzu
  4. Gzip-Komponenten
  5. Legen Sie Stylesheets oben ab
  6. Stellen Sie die Skripte unten ein
  7. Vermeiden Sie CSS-Ausdrücke
  8. Machen Sie JavaScript und CSS extern
  9. Reduzieren Sie DNS-Lookups

(Die Liste von Yahoo! ist ~ 35 Elemente lang, es ist nicht erforderlich, sie vollständig zu zitieren.)

Sowohl mit YSlow ( Bildlink ) als auch mit Page Speed ( Bildlink ) können Sie Tests auf Ihren Seiten durchführen, indem Sie Vorschläge für mögliche Aktionen machen und zeigen, welche der Empfehlungen bereits implementiert sind.

Bryson
quelle