Bildaufbau optimieren

[Sven Rautenberg]

Moin!

• (Anzahl der einzelnen Grafiken) * ((Größe des HTTP-Request-Heads)+(Größe des HTTP-Response-Heads))

Das sagt mir eigentlich gar nichts, sowas in der Art hatte ich allerdings auch schon im Hinterkopf. Wie läßt sich der Daten/Zeitaufwand berechnen, der für die 'Koordination' entsteht?

Du darfst davon ausgehen, dass pro Anforderung einer Bilddatei vom Webserver zusätzlich zu den nutzbaren Daten (also die Bytes, die auf deiner Festplatte angezeigt werden) noch mindestens ein Kilobyte an HTTP-Daten übertragen wird.

Wenn du also 15 KB an Bilddaten hast, und das ganze in 20 Einzeldateien verteilst, dann kommen nochmal geschätzte 20 KB an Downloadmenge zusammen, die sinnlos für HTTP verbraten werden.

Wobei das noch nichts mit der Zeit zu tun hat, die u.a. auch aus server- und clientseitiger Bearbeitungszeit sowie - immens wichtig - den Roundtrips besteht.

Was sind roundtrips?

Das ist Zeit, die vergeht, während der Browser eine neue Grafik vom Server anfordert und auf das Ergebnis wartet.

In HTTP/1.1 (das benutzen aktuelle Browser) sind üblicherweise nur vier parallele Verbindungen zum Server erlaubt. Das bedeutet: Nur vier Grafiken werden gleichzeitig geladen.

Rechnen wir mal etwas herum: Du hast 15 KB an Dateien. Der Einfachheit halber 15 Stück zu 1 KB.

Sobald der Browser die HTML-Seite geladen hat und Bilder findet, startet er den Download derselben. Also vier Bilder. Die 1 KB mal 4 plus 1 KB für HTTP mal 4 macht 8 KB. 8 KB übertragen sich bei einem 56K-Modem in grob 2 Sekunden. Danach kommen die nächsten vier Grafiken - nochmal 2 Sekunden. Insgesamt werden die 15 Grafiken in 4 Durchgängen mit insgesamt 8 Sekunden Zeitdauer übertragen. Wobei zu beachten ist, dass die Anforderung einer Grafik nicht nur Downloadzeit benötigt, sondern auch Zeit vergeht, bis der Server endlich anfängt, zu senden. Also sind 8 Sekunden schon sehr idealisiert.

Im Gegensatz dazu hätte eine Gesamtgrafik sicherlich auch nur 15 KB Größe und würde zum einen wesentlich einheitlicher geladen werden, und andererseits würde es nur 4 Sekunden dauern - das aber dann tatsächlich so schnell, weil nicht noch auf weitere Teile gewartet werden muß.

Du hast also abzuwägen, ob du 15 KB als große Blockgrafik willst, die definiert von oben nach unten sichtbar lädt und 4 Sekunden (bei Modems) benötigt, oder ob du Minimum 8 Sekunden benötigen willst, um wild zusammengewürfelte Einzelteile zu laden.

Und noch ein Argument: Wer DSL hat, lädt an der Einzelgrafik natürlich fast gar nicht mehr, die Grafik ist eher spontan da, sobald sie angefordert wurde. Aber auch ein DSL-Benutzer wartet geduldig, wenn viele einzelne Grafiken geladen werden sollen, weil viele Grafiken einzeln angefordert werden müssen, und der Server dann eine Verzögerung darstellt. Insbesondere, wenn sich der Server wegen hoher Auslastung jedesmal zwei Sekunden Zeit läßt, bevor er eine Grafik sendet (und das Senden selbst in Nullkommanichts geschehen ist), wartet man bei einer Grafik eben nur genau einmal diese zwei Sekunden - bei den Schnipseln mehrfach 2 Sekunden.

WAAAAH! ...rum denn das, in Gottfrieds Namen?
... keine einpixeligen gifs? Ist doch vom Ladeaufwand das minimalste, war mein Gedankengang, da für ca. 90% der Grafik nur ein paar bit benötigt werden...

Wie oben erklärt: 42 Byte plus ein Kilobyte für die HTTP-Anforderung plus die Zeit, die vergeht, damit das Bild beim Browser ankommt. Dann doch lieber ein paar Byte fürs CSS spendieren und auf Blindgifs verzichten.

- Sven Rautenberg