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

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?

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.

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
10. …

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