Tabelle oder CSS - Eine Frage der Größe?
In diesem Jahr hatte ich die Gelegenheit, bei zwei Projekten eine bestehende HTML Seite in Typo3 umzusetzen. In beiden Fällen gab es nur minimale Änderung an der Gestaltung. Die bestehenden Seiten waren technisch jedoch mit Layouttabellen realisiert, und reichlich angestaubt.
Beispiel 1
Umstellung auf xhtml 1.1 Strict + CSS 2.0. Da zur Zeit keine Auslieferung als xhtml+application vorgesehen ist, im Prinzip überflüssig – für mich bedeutet es jedoch keinen zusätzlichen Aufwand, und der Kunde freut sich irgendwann darüber.
Die Eckdaten vor der Umstellung:
- Realisiert in php (kein Framework)
- Tabellenlayout, kein nennenswertes CSS
- Größe der HTML Seiten im Durchschnitt 21kb
- Größe der Layoutbilder pro Seite 31kb
Die Daten nach der Umstellung:
- Realisiert mit Typo3 4.0
- xhtml 1.1 + CSS 2.0
- Größe der HTML Seiten im Durchschnitt 9kb
- Größe der Layoutbilder 13kb
Die Umstellung verkleinert also HTML (12kb) und Bilder (18kb) um etwa 30 kb.
Bei 1000 Seitenabrufen / 100 Besuchern pro Tag im Monat ergibt dies (12kb x 1000 + 18kb x 100) x 30 = 414.000 kb, eine Ersparnis von weniger als 420 mb.
Beispiel 2
Im 2. Projekt war die Überarbeitung gleichzeitig mit der kompletten Neugestaltung verbunden. Die durchschnittliche Seitengröße beträgt nun HTML: 14kb, Layoutbilder: 21 kb.
Im April 2006 wurde eine Seite 188.000 Mal neu ausgeliefert, und dies an 26.200 verschiedene Adressen. Um einen Vergleich ziehen zu können, habe ich mit Macromedia Dreamweaver verschiedene Inhaltsseiten als Tabellenlayout mit geringen CSS Einsatz nachgebaut.
Im Durchschnitt waren die Seiten um 8kb kleiner geworden, als HTML 4.0 ohne CSS teilweise auch bis zu 30 kb. Der Umfang der verwendeten Grafiken würde in etwa gleich geblieben sein, so dass ich von einer theoretischen Ersparnis von etwa 10 kb * 188.000 = 1,8 gb ausgehe. Im Vergleich zum gesamten Datentransfer des Monats liegt eine Ersparnis von weniger als 6% vor.
Fazit
Bei den beiden Projekten ist aus Sicht der Ladezeit oder des gesamten Datentransfers kein nennenswerter Nachteil von Tabellenlayouts zu erkennen. Nachlässig komprimierte Bilder oder konzeptionelle Fehler beim Seitenaufbau stellen ein viel größeres Optimierungspotential da.
Wichtig: dieser Vergleich geht davon aus, das beide Seiten auf einen sinnvollen Einsatz von CSS zurückgreifen. Das Einsparungspotential von HTML Seiten ohne CSS gegenüber HTML Seiten mit CSS kann bedeutend höher sein!
