Optimierung auf minimale Ladezeit

Die Bandbreite des Internetzugangs ist heutzutage nicht immer der wichtigste Grund warum man eine Webseite in der Ladezeit optimieren will. Die Gesamtmenge an Datentransfer pro Seitenauf macht sich bei der Ladezeit bemerkbar aber auch bei dem monatlich erzeugtem Traffic. Somit kann bei einer Optimierung eventuell ein günstigeres Webhosting-Paket gewählt werden. Auch die Benutzbarkeit der Webseite verbessert sich bei einer geringeren Ladezeit.

das beste Grafikformat

Welches das beste Grafikformat ist, hängt von der Grafik ab. Es kann gut sein, dass alle drei gängigen Grafikformate (".gif", ".jpg" und ".png") auf einer Webseite verwendet werden und erst durch die richtige Wahl für jedes einzelne Bild die kleinste Dateigröße erreicht wird.

.gif

".gif"-Dateien beschränken den Grafiker auf 256 Farben und einen 1-Bit-Alphakanal. Wobei der Alphakanal genau genommen eine der 256 Farben ist, die eben transparent statt deckend ist. Wenn ein 1-Bit-Alphakanal ausreicht und 256 Farben nicht zuwenig sind, dann kann die Verwendung von einer ".gif"-Datei gegenüber einer ".png"-Datei vorteilhaft sein.

.jpg

".jpg"-Dateien haben ihre Stärke in der Komprimierung von Fotografiken oder generell bei Bildern, die sehr viele verschiedene Einzelfarben haben und sich der Farbwert von Pixel zu Pixel ständig ändert. Sie sind allerdings verlustbehaftet, was ebenfalls im Speziellen bei Fotos nicht so gravierend ist.

.png

Die ".png" Dateien eignen sich besonderst, wenn
  • eine verlustlose Speicherung notwendig ist
  • ein richtiger Alphakanal notwendig ist (".png"-Dateien bieten einen 8-Bit-Alphakanal)
  • eine Grafik vorliegt, in der sich die Farbwerte von Pixel zu Pixel nicht ständig ändert (also zum Beispiel eine orangene Fläche von 20x20 Pixeln vorhanden ist)
Bei Fotos hingegen eignen sich ".png"-Dateien insofern nicht, da die Komprimierung der von ".jpg"-Dateien unterlegen ist, da sich die Farbwerte von Pixel zu Pixel ständig ändern (auch wenn an manchen Stellen nur geringfügig).

CSS-Dateien anstatt Styledefinitionen im <head>-Bereich

CSS-Dateien können mit 1 Zeile Code im <head>-Bereich der HTML-Datei eingebunden werden. Sie enthalten dann lediglich die Styledefinitionen. Wenn der Browser diese CSS-Datei einmal heruntergeladen hat, muss er sie nicht nocheinmal nachladen. Styledefinitionen im HTML-<head>-Bereich hingegen müssen zwangsweise jedesmal neugeladen werden.

prefetchen von Dateien

Durch das sogenannte "prefetchen" von Dateien (zu deutsch "vorzeitiges abholen") können Dateien vom Browser runtergeladen werden, noch bevor diese gebraucht werden. Diese Möglichkeit sollte allerdings wohlüberlegt eingesetzt werden. Denn wenn ein prefetch-Link erst einmal eingerichtet ist, wird die Datei vom Browser runtergeladen, egal ob sie später auch verwendet wird.

Mit dieser Methode weis der Browser, dass es sich um eine Datei handelt, die "pregefetchet" werden soll und wird daher erst geladen, wenn die momentane Webseite fertig geladen ist:

<link rel="prefetch" href="bilder/hohe_aufloesung.jpeg">

Ansonsten kann man auch einfacher diese Methode verwenden:

<img width=1 height=1 src="bilder/hohe_aufloesung.jpeg" style="visibility:hidden">

Die zweite Methode hat den Vorteil, dass sie von allen gängigen Browsern unterstützt wird.