{die Zentrale}    
 
 
 

{zurück zur Übersicht}    







 
   

Ladezeit-Killer-Tabellen


Printversion

Infos zur AutorinInfos zur Autorin Webseiten mit 343 Tabellen Übergewicht sind im Web keine Seltenheit. Doch Übergewichtige waren noch nie sportlich, eher träge und lahm. Auch im Web sind die fetten Seiten nicht die schnellsten. Wer ein paar Pfund Tabellen abspeckt, kann sich freuen: Endlich klappt's auch mit dem User.
 


Webmonkey: Lean and Mean Tables
David Siegel Tabellen-Tutorial
Builder.com: Rowspan Made Easy

 

Tabellen, die unsichtbaren Layout-Gerüste einer Webseite, sind bei komplexen Layout-Strukturen keine flexiblen Webdesign-Hilfen. Je anspruchvoller die optische Gliederung einer Webseite, desto komplizierter das Tabellengerüst. Da Tabellen durch die unzähligen Tags den Quellcode richtig schön aufblähen, ist der unsichtbare Layout-Helfer maßgeblich an der Ladezeit der Seite beteiligt. Doch auch komplexe Seiten lassen sich für schnelle Ladezeiten optimieren. Schneller Seitenaufbau und aufwendige Seiten-Gestaltung sind kein Widerspruch, wenn man überflüssige Zellen und Tabellen vermeidet. Befolgt man einige einfache Regeln, erhält man sowohl ein stabil-präzises Tabellen-Layout als auch eine flotte Seite.
 

   

Regel 1: mehrere Tabellen einsetzen

Eine Webseite bleibt für den User solange leer, bis der Browser auch die allerletzte Zelle der Tabelle berechnet hat und baut dann schlagartig auf. Um Inhalte nach und nach anzuzeigen und dem User so Orientierung zu geben und erste Inhalte zu präsentieren, sollte man seinen Inhalt an geeigneten Stellen aufsplitten und über mehrere, getrennte Tabellen verteilen. So erscheint das Warten auf die Gesamtansicht der Seite subjektiv kürzer. Tabellen lassen sich sowohl horizontal als auch vertikal aufsplitten. Eine horizontale Aufsplittung eignet sich etwa, um das Logo oder eine Such-Option dem User bereits frühzeitig anzuzeigen. In einer vertikal aufgesplitteten Tabelle lässt sich beispielsweise die Navigation schneller anzeigen.
 


Bei Amazon sind Logo und Suchoption in einer
eigenen Tabelle untergebracht und werden
damit schneller angezeigt.
   

Regel 2: Verschachtelungen vermeiden

Tabellen verschachtelt einzusetzen, d.h. in einer Tabelle eine neue Tabelle zu definieren, sollte bis auf Ausnahmesituationen (wie etwa funktional eingesetzte Textauslagerungen) strikt vermieden werden. Ist eine neue Tabelle in eine Tabellenzelle eingebettet, verlangsamt sich die Ladezeit immens, da der Browser die Tabelle zeilenweise von oben nach unten berechnet. Stößt er auf eine Tabelle in einer Zelle wird zunächst diese verschachtelte Tabelle berechnet, enthält diese eine weitere Verschachtelung, muss auch diese berechnet werden etc. Solange der Browser die Tabellen berechnet, sieht der User nichts. Auch Bilder werden erst eingelesen und angezeigt, wenn die letzte Tabellenzelle berechnet ist. Bei fast allen komplexen Webangeboten sind Mehrfach-Verschachtelungen immer noch gängig, so dass es nicht verwundert, dass trotz schnellerer Verbindung die Mehrheit der Webseiten langsam und zäh aufbaut.
 


Unfunktional eingesetzte Vierfach-
Verschachtelung bei Chip-Online. Die
farbige Markierung (rot, blau, grün, gelb)
macht die Verschachtelung deutlich.
   

Regel 3: Zellen einsparen

Jede zusätzliche Zelle kostet Berechnungszeit. Daher sollte man bei jeder einzelnen Zelle kritisch beurteilen, ob diese tatsächlich nötig ist. Zeilenumbrüche sollten etwa mit dem <br>-Tag erzeugt werden und nicht per neuer Tabellenzeile - eine Regel die sich selbstverständlich anhört, doch von einem Großteil der Webangebote missachtet wird. Hinzu kommt, dass nicht nur die zusätzliche Zeile den Seitenaufbau verlangsamt, sondern auch (werden keine Style Sheets eingesetzt) in jeder Zelle neue Font-Angaben erforderlich sind, welche die Seite ebenfalls länger rechnen lassen. Auch das Erzeugen von Rändern mittels Tabellenspalten lässt sich durch effizientere Methoden ablösen. Text-/Bild-Randabstände können in den meisten Fällen mit den Attribute "cellspacing" und "cellpadding" oder über den Einsatz von Style Sheets reguliert werden.

 


Spiegel Online setzt hier für jede Zeile eine neue
Tabelle ein. Ein schlichtes <br> hätte es auch getan.

 
 
 
 
 
   

Regel 4: colspan und rowspan einsetzen

Nicht nur Tabellenzellen, die Inhalte enthalten, können eingespart werden. Besonders leere Zellen, die Randabstände oder Weißraum erzeugen, können auf das Minimum reduziert werden. Dies lässt sich beispielsweise erreichen, indem man die Attribute "colspan" und "rowspan" konsequent einsetzt, mit denen leere Zeilen oder Spalten zu einer einzigen großen Zelle verschmolzen werden können. Will man etwa eine Randspalte erzeugen, setzt man "rowspan" auf 99 (oder einen anderen hohen Werte, der nie erreicht wird), so müssen, falls neue Zeilen hinzukommen, die "rowspan"-Werte nicht entsprechend angepasst werden.

 


Die grüne markierten Zellen
ließen sich problemlos zu einer
einzigen Spalte verschmelzen.

 
 
 
 
 
   

Fazit

Neben zu großen Bildern sind schlecht gebaute, undurchdachte Tabellen-Strukturen die Hauptursache für lange Ladezeiten. Jede Tabelle sollte mit Blick auf die Ladezeit optimiert werden. Daher: Code einsparen, wo immer möglich.


...................................
Heike Edinger
...................................