Impressum | Kontakt | Jobs
Aufdringliche Selbstdarstellung seit 1996
Homepage
von
Alexander
Auer

LADEVORGANG ABGEBROCHEN

Viele Internetseiten werden wegen zu langer Ladezeiten gar nicht erst gesehen. Schlankere Dateien schaffen Abhilfe.

Im Durchschnitt wartet ein User nicht länger als 40 - 60 Sekunden auf den Aufbau einer Verbindung. Ist in dieser Zeit nichts auf dem Bildschirm zu sehen, so bricht er die Verbindung ab (und wechselt zur Homepage der Konkurrenz). Vor allem die Startseite muß daher so gestaltet sein, daß unnötige Wartezeiten vermieden werden.
Grundsätzlich gilt: Eine Startseite darf (inklusive Grafiken und aller HTML-Dateien) die Größe von etwa 50 kB (Kilo Byte) nicht überschreiten!
Wenn Sie eine Webseite erstellen, lassen Sie sich nicht davon täuschen, daß die Seiten an ihrem Arbeitsplatz sehr schnell am Bildschirm erscheinen. Von der Festplatte geladen, sind 50 kB bald im Speicher. Auch wenn Sie ihre Homepage aus dem Netz laden, kann die Geschwindigkeit trügen. Öfters aufgerufene Dateien werden im Cache zwischengespeichert. Löschen Sie diesen in ihrem Browser unter 'Optionen - Cache leeren' und laden Sie die Inhalte erneut mittels 'Reload' - Button (gedrückte Shift - Taste bewirkt, daß die Seite ganz neu vom Server angefordert wird). Diese Ladezeiten sind schon eher ein Vergleichsmaßstab für andere User.
Wenn Sie einigen Regeln folgen, können Sie sehr viel an Geschwindigkeit wettmachen.

Grafiken
Der größte Speicherfresser sind Grafiken. Dabei gibt es einige einfache Tricks, mit denen Sie die Größe der Bilder oft um mehr als die Hälfte reduzieren können.
Grafiken in Originalgröße darstellen
Sie können zwar mit width- und height Attribut die Anzeigegröße einer Grafik festlegen, die Datei wird vom Browser jedoch in voller Größe geladen. Verkleinern Sie daher in einem geeigneten Grafikprogramm die Bilder gleich auf Darstellungsgröße. Unter Paint Shop Pro geschieht dies unter 'image - resize".

Das richtige Speicherformat Die gebräuchlichsten Grafikformate im Internet sind .jpg und .gif. Beide komprimieren die Größe der Grafikdatei, um schnellere Übertragung zu ermöglichen. Grundsätzlich eignet sich Jpg besser für Photos und Bilder mit feinen Farbabstufungen, da es die Darstellung von 16 Millionen Farben unterstützt. Das Gif - Format unterstützt nur 256 Farben, ist also besser geeignet für Bilder, die größere, einfärbige Flächen benutzen. Im Zweifelsfall speichert man ein Bild in beiden Formaten und vergleicht Dateigröße bzw. Darstellungsqualität.

Reduktion der Farbanzahl
Bei kleineren Grafiken, wie z.B. Buttons, werden oft nur einige wenige Farben verwendet. Versuchen Sie, die Farbanzahl soweit wie möglich zu verringern, ohne daß dadurch Qualitätseinbußen entstehen. Unter Paint Shop Pro funktioniert dies, indem Sie 'Colors' und anschließend 'Decrease Color Depth' wählen. Ein Button sollte im Normalfall nicht mehr als höchstens 3 kB in Anspruch nehmen.

Thumbnails
Bei größeren Grafiken (ab etwa 30 kB) sollten Sie den Einsatz sogenannter 'Thumbnails' erwägen. Das sind Verkleinerungen der eigentlichen Grafik auf 100 bis 200 Pixel Breite bzw. Höhe, die als Link zur Originalgrafik definiert sind. Geben Sie die Größe der eigentlichen Grafik (in kB) an, der User kann selber entscheiden, ob er sie laden will oder nicht. Vor allem bei Photogalerien sollten Thumbnails Pflicht sein.

HTML - Programmierung
Auch beim Schreiben des HTML - Codes, sollten Sie unbedingt einige Punkte beachten:

Vorsicht bei Tabellen
Tabellen werden erst dann angezeigt, wenn die Inhalte komplett geladen sind. Enthält eine Tabelle mehrere Grafiken, kann es mitunter einige Sekunden oder sogar Minuten dauern, bis diese übertragen sind. Bis dahin bleibt der Bildschirm leer! Es ist daher ratsam, eine große Tabelle auf mehrere kleine aufzuteilen. Oft ist es gar nicht nötig, Tabellen zu verwenden. Man kann auch das align - Attribut zum formatieren und layouten verwenden (<img src="bild.gif" align="right"> bzw. left oder center).

Benutzung von Editoren
Bei der Verwendung von HTML - Editoren sollten Sie unbedingt den Quellcode erstellter Dateien überprüfen. Vor allem Drag & Drop Editoren setzen oft eine Menge sinnloser Befehle, wodurch die Dateigröße unnötig aufbläht wird.
Besondere Vorsicht ist geboten bei der Verwendung der Funktion 'HTML - Konvertierung' in Microsoft Word. Die derart erstellten Dateien haben oft astronomische Größen (Microsoft ist ja bekannt für seinen lockeren Umgang mit Speicherplatz). Eine dreiseitige Tabelle kommt bei Umwandlung in HTML durch Word auf sage und schreibe 130 kB(!). Zum Vergleich: Löscht man alle Befehle, die doppelt vorkommen oder schlicht sinnlos sind (weil ohne Effekt), bleibt eine Datei mit schlanken 12 kB. Und das, ohne das sich die Darstellung im Browser verändert hätte!

Die 'Lowsource' - Funktion
HTML bietet ihnen die Möglichkeit, eine Voransicht einer großen, qualitativ besseren Grafik zu laden. Der Befehl sieht folgendermaßen aus: <img lowsrc="klein.gif" src="gross.gif">. Es wird zuerst die Datei 'klein.gif' geladen und anschließend von der Datei 'gross.gif' überlagert. Die kleinere kann z.B. Schwarz-Weiß sein und geringere Auflösung haben. Sie dient nur dazu, die Wartezeit zu überbrücken.

Grafikgröße angeben
Wenn Sie eine Grafik in ihre Internetseite integrieren, vergessen Sie nicht, die Höhe und Breite anzugeben. Durch die Angabe der Bildgröße reserviert der Browser den entsprechenden Bereich auf dem Bildschirm, auch wenn die Grafik noch nicht im Speicher ist. Der Seitenaufbau wird dadurch beschleunigt. In der Praxis sieht der Befehl folgendermaßen aus: <img src="bild.gif" width="200" height="200">. Die Werte für ihre Grafik können Sie ihrem jeweiligen Grafikprogramm entnehmen. Bei Paint Shop Pro finden Sie diese unter 'Ansicht - Bildinformation'.

Dynamisches HTML
DHTML bietet die Möglichkeit, mittels Layertechnik (Überlagerung verschiedener Schichten) Texte oder Grafiken einzublenden (ähnlich der 'Lowsource' - Funktion), bis die eigentliche Grafik fertig geladen ist. Der Besucher bekommt also relativ schnell Inhalte zu sehen, während das eigentliche Layout noch geladen wird. Die Beschäftigung mit DHTML würde allerdings den Rahmen dieses Artikels sprengen. Nähere Informationen entnehmen Sie bitte der entsprechenden Fachliteratur.

Java, Shockwave & Co.
In letzter Zeit fühlen sich viele Webdesigner bemüßigt, Java Applets in ihren Auftritt einzubauen. Das mag in manchen Fällen sinnvoll sein, auf einer Startseite haben Java Applikationen allerdings nichts verloren. Und zwar aus folgenden Gründen:


Verzichten Sie auf der Startseite lieber auf Java, bieten Sie dem interessierten User lieber eine Version mit und eine Version ohne Java zur Auswahl an.
Ähnliches gilt auch für diverse Anwendungen wie Hintergrundmusik, Shockwave, VRML oder ähnliche Plug - Ins. Die meisten Anwender benutzen das Internet vom Arbeitsplatz aus. Aus Kostengründen wird in den meisten Unternehmen auf Soundkarten verzichtet. Musik kann also nur von einem kleinen Teil der Internetgemeinde abgespielt werden. So wie Java benötigen auch die meisten anderen Anwendungen Zusatzprogramme. Obwohl diese teilweise schon im Browser integriert sind, so müssen sie doch erst ausgeführt werden. Und wie überall gilt auch im Internet: Zeit ist Geld bzw. Ladezeiten sind Telefongebühren!

Beschränken Sie sich daher auf das Nötigste. Viele User besitzen ein Modem mit Übertragungsraten von 33,3 k oder weniger. Je weniger Sie die Geldtasche und Geduld ihrer Besucher strapazieren, desto lieber wird man wieder auf ihre Seite zurückkommen.

GLOSSAR
CACHE: wörtlich: 'Versteck, Lager'. Ein Zwischenspeicher auf der Festplatte, in dem häufig verwendete Dateien gelagert werden, um sie bei erneutem Aufruf nicht vom Netz laden zu müssen.
FIREWALL: Computer, der als Sicherheitssystem (Schutzwall) gegen Angriffe von Hackern dient.
LAYER: dt. 'Schicht'. Funktion von Dynamic HTML mit dem verschiedene Inhalte überlagert werden können. Verwendbar ab Netscape 4 bzw. Internet Explorer 4.
PLUG IN: Zusatzprogramme, die den Browser um einige Funktionen erweitern. Bekannte Plug Ins sind Shockwave, Real Audio, Real Video und Quicktime.
THUMBNAIL: Verkleinerte Voransicht einer Grafik. Zumeist nur wenige Pixel und kB groß.


Zurück zur Übersicht