HTML Performance

[Kilian]

Hallo

Wie kann ich die Performance von HTML Seiten verbessern?
Gibt es dazu Regeln ?
Soll man dabei mit CSS arbeiten ?
Ich wäre dankbar für einige generelle Tips zur Performanceverbesserung meiner Anwendung durch HTML
Optimierung

Kilian

[Simon]

Hi,
einen Tipp kann ich dir schon mal für Tabellen geben:
ineinander verschachtelte Tabellen brauchen länger zum Laden, da sie von innen nach außen geladen werden und die äußere erst dargestellt werden kann, wenn die innere fertig ist. Schneller geht's, wenn Du mehrere Tabellen untereinander hängst. Dann sieht der Surfer schon was, während der Rest noch geladen wird.
Ansonsten immer fehlerfreien Quelltext schreiben :-)

MfG Simon

[Kai Lahmann]

Hallo

Wie kann ich die Performance von HTML Seiten verbessern?
Gibt es dazu Regeln ?
Soll man dabei mit CSS arbeiten ?
Ich wäre dankbar für einige generelle Tips zur Performanceverbesserung meiner Anwendung durch HTML
Optimierung

Kilian

wenn man es ganz hard will würd' ich das so machen:

• alle Formatierungen in eine Zentrale css-Datei
• Dateinamen kurz halten (Links kürzer)
• auf mehrere Ordner verzichten (Links kürzer)
• keine Zeilenumbrüche in Quelltext (Achtung: wird unübersichtlich)
• alle Tags und Attribute kleich schreiben (leichter Komprimierbar)
  für schnellere Darstellung zusätzlich:
• alle schließenden Tags setzen
• wenig Bilder u.ä.

[Martin Busley]

Hallo Kilian

Wie kann ich die Performance von HTML Seiten verbessern?

Hier mal meine eigenen Tipps, an die ich mich halte:

• Keine Wysiwyg-Editoren verwenden
• CSS verwenden, in seperaten Dateien definieren
• Alle Tags klein schreiben
• HTML Code komprimieren, d. h. zusammenfassen
• Grafiken so klein wie möglich halten
• Überhaupt wenig mit Grafiken arbeiten, besser mit Farben
• Immer an den HTML-Standard halten
• Immer nur das nötigste an Multimedia einbauen, Sounds sind völlig tabu
• Tags nicht zweckentfremden

Viele Grüße,

Martin Busley

[Götz]

Hallo Martin

• Keine Wysiwyg-Editoren verwenden

Warum nicht? Es gibt auch WYSIWYG-Editoren, die vernünftigen Code liefern (Macromedia Dreamweaver zum Beispiel).
Gut es stimmt, daß man sich den Code mal anschauen sollte, weil in der Tat viele WYSIWYG-Editoren nur Müll liefern, doch wie schon erwähnt gibt es hier auch Ausnahmen!

MfG
Götz

[Martin Busley]

Hallo Götz,

• Keine Wysiwyg-Editoren verwenden
  Warum nicht? Es gibt auch WYSIWYG-Editoren, die vernünftigen Code liefern (Macromedia Dreamweaver zum Beispiel).

An dieser Stelle habe ich mich ein wenig undeutlich ausgedrückt. Mit den Editoren meine ich die kostenlosen Editoren, wie Frontpage Express oder den Composer. Die sind zwar einfach zu bedienen, aber blähen die Dateien nur unnötig auf. Aber ansonsten hast du Recht. Vor allem die professionellen Editoren sind in der Datengrößenhinsicht besser.

Viele Grüße,

Martin Busley

[Götz]

Hi Kilian!

Wie kann ich die Performance von HTML Seiten verbessern?
Gibt es dazu Regeln ?
Soll man dabei mit CSS arbeiten ?
Ich wäre dankbar für einige generelle Tips zur Performanceverbesserung meiner Anwendung durch HTML
Optimierung

Also, ich mach das so:

• eine zentrale CSS-Datei definieren, auf die alle Dokumente einer site zugreifen, und in der alle Formatierungsoptionen, die benötigt werden enthalten sind.
• Grafiken sollten immer ein "alt" und "width" bzw. "height" Attribute haben!
• "Sowenig Grafik wie möglich, aber so viel wie nötig" (--> http://www.wbmb.de)
• auch wenn HTML-Dateien durch vernünftige Strukturierung (Einrückungen usw.) etwas größer werden nicht darauf verzichten. Wenn man mal irgendwas ändern will/muß ist man aufgeschmissen, wenn der Quellcode unstrukturiert  ist!
• WYSIWYG-Editoren sind nicht grundsätzlich schlecht, doch den produzierten Code sollte man sich mal ansehen!
• Frames können Ladezeit sparen, müssen aber nicht. D.h.: Wenn es sich für ein Projekt anbietet mit Frames zu arbeiten, kann man das ruhig machen, da so nicht immer alle Elemente geladen werden müssen!
• Sites immer mal wieder mit einem Validator testen! (bspw. mit dem W3C Validator oder dem CSE Validator, oder so)

MfG
Götz

[Michael Schröpl]

Wie kann ich die Performance von HTML Seiten verbessern?

Ich denke, es gibt mehrere unterschiedliche Aspekte des Problems:

a) Übertragungszeit
Von allen in diesem Thread genannten Tips in dieser Hinsicht lasse ich nur einen gelten: Bilddateien klein gestalten. Richtlinie: Zeichnungen als GIF, Fotos als JPG, aber trotzdem beides ausprobieren (in Ausnahmefällen gibt es überraschungen). Hintergrundbilder wirken auch mit bewußt schlechter Darstellung noch, also JPG mit hohem "Komprimierungs"-Faktor (50-70), d. h. höchstens 1 KB.
Ich würde auf keinen Fall Dateinamen oder Verzeichnisnamen kürzen und damit für einen minimalen Effekt die Struktur und Wartbarkeit meiner gesamten Site opfern.
Auch das Eliminieren von Leerzeichen ist m. E. den Preis kaum wert. (Wenn man so ein Tool schon mal hat und die endgültigen Seiten damit generieren will, kann man es natürlich auch nutzen.)
Dann schon eher eine umfangreiche Seite in mehrere kleine Seiten mit entsprechendem Navigationskonzept zerlegen - aber das ist halt viel Arbeit.

b) Inkrementelle Darstellung
Wenn man dem Besucher so früh wir möglich schon Teile der Information anbieten will, dann sind die wichtigsten Aspekte dabei: Größenangaben für Bilder (HEIGHT und WIDTH), damit eine umgebende Text- oder Tabellenstruktur sofort korrekt layoutet werden kann, und GIFs im interlaced-Modus, so daß der Besucher schon nach ca. 25% der Übertragungsdauer sehen kann, welche Funktion die Graphik hat.

c) Darstellungszeit insgesamt
Es hilft, wenn man es dem Browser so einfach wie möglich macht. Was explizit angegeben ist, muß dieser nicht durch ein aufwendiges Optimierungsverfahren berechnen - das betrifft vor allem Tabellen. Geschachtelte Tabellen ohne Größenangaben sind so ziemlich das Schlimmste, was man einem Browser antun kann.