12 einfache Tipps um die Ladezeit Ihrer Webseite zu optimieren

Die Ladezeit einer Webseite ist wichtiger als manch Webmaster denkt. Der User wartet nämlich nicht gerne. Wenn der User dann nicht gleich beim ersten Klick das findet was er sucht zieht er oft weiter ohne einen weiteren Versuch zu starten. Diesen User haben wir dann verloren und er wird auch kein Kommentar hinterlassen geschweige einen Backlink zurück setzen.

Aber wie schaffen Wir es eine Webseite ansprechend schnell zu machen. Hier 12 einfache Tipps für Ihre Webseite.

1. Minimieren der Anzahl der HTTP-Requests

Die meiste Zeit zum Anzeigen einer Webseite wird durch das herunterladen aller Komponenten verbraucht. Eine Verringerung der Anzahl der Komponenten reduziert die Anzahl der HTTP-Requests die erforderlich sind um die Seite zu laden.

2. Minimieren von DNS Lookups

Jede DNS-Abfrage (Lookup) benötigt eine nicht zu vernachlässigbare Zeit. DNS-Abfragen werden zwar für eine bessere Performance vom Browser gecached aber nur etwa 1 Minute beim Firefox und bis zu 30 Minuten beim InternetExplorer. Gerade auf einer Landingpage bzw. Startseite sollten daher möglichst keine Elemente von anderen Seiten eingebunden werden.

3. schneller Webspace bzw. Server

Hier lässt sich zwar einerseits sehr viel Ladezeit optimieren, jedoch wenn der Webspace werbefrei sein soll kostet das natürlich etwas. Werbefreien Webspache gibt es schon für etwa 1€/Monat. Achten Sie bei der Auswahl des Anbieters vor allem auf die Anbindung / Geschwindigkeit zu ihrer Zielgruppe. Es macht kein Sinn ein Server in Japan zu mieten wenn die Zielgruppe hauptsächlich aus dem deutschsprachigen Raum kommt !

4. Saubere Trennung von Struktur und Inhalt.

Die Trennung von Struktur (Layout) und Inhalt bringt viele Vorteile. Zwar ist einer der größten Vorteile bei dieser Trennung das eine Änderung des Layouts jederzeit möglich ist ohne den Conntent also Inhalt ändern zu müssen. Aber auch die Ladezeit der Webseite lässt sich damit reduzieren. Da die Formatierung mit Style-Sheets nur einmal in der entsprechenden CSS-Datei erfolgt lässt sich so eine Menge Font-Tags sparen. Damit spart man schnell einige kb pro Seite. Übrigens: CSS-Stylesheets(links) gehören an den Anfang jeder Webseite also im HEAD.

5. Sparsamer Einsatz von Grafik

Die größten Elemente einer Webseite sind oftmals Grafiken. Hier gibt es viel Optimierungspotential . Skaliere dazu die Bilder gleich auf die richtige Größe. Versuche unterschiedliche Bildformate um das beste Bildformat für das jeweilige Bild zu finden. Oftmals kann es auch sinnvoll sein sogenannte Thumbnail zu verwenden und damit auf das eigentliche Bild zu verlinken. Auch das „auslagern“ der Bilder auf einen anderen Server oder Webseite kann das Laden erheblich beschleunigen. Moderne Webbrowser laden möglichst viele Elemente zeitgleich um die Ladezeit zu verbessern. Jedoch jeweils nur 2 Elemente zeitgleich pro Hostname. Die Webseite auf mehrere Hosts zu verteilen kann also erheblich Ladezeit einsparen.

Auch bei der Navigation kann sehr gut auf Grafiken verzichtet werden. Texte werden viel schneller geladen und bei JavaScript-MouseOvers sind das jeweils zwei Bilddateien pro Element, was schnell einmal 20 kB und mehr ausmacht. Außerdem werden Texte viel besser von Suchmaschinen gefunden.

6. Sauberer und valider Code

Mit vielen HTML-Editoren wird unnötiger HTML-Code mit eingebaut. Überprüfen Sie deshalb Ihre Seiten auf „Code-Abfall“ denn „Weniger Code, gleich schnellere Ladezeit“.

Vor allem auch falscher und „schlampig“ verfasster Code erhöht die Ladezeit. Prüfen Sie daher mit dem W3C-Validator ihre Webseite.

7. komprimieren von JavaScript, CSS und HTML

Javascript CSS und HTML-Quellcode lassen sich durch das Entfernen von Leerzeichen und Kommentaren meist deutlich verkleinern. Bei dynamisch erzeugten Seiten besteht die Arbeit im wesentlichen darin die Templates der Seite zu optimieren. Um den Überblick zu behalten empfiehlt es sich Kopien der Dateien anzulegen welche den original Quellcode und alle Kommentare enthalten. Aber Vorsicht ! Gerade bei automatisch optimierten CSS sollte eine gründliche Prüfung durchgeführt werden ob noch alles so aussieht wie vorgesehen. Geeignete Tools für diese Arbeit sind z.B. der ebine-Compressor (CSS und Javascript) , CSS-Formater and Optimizer sowie Shrinksafe und Javascriptcompressor.

8. GZIP-Komprimierung aktivieren

Die meisten Webserver bieten die Möglichkeit der GZIP-Komprimierung an. Nutzen Sie diese ! Dazu mus zum Beispiel beim Apache 2 mode_deflate aktiviert werden. Bei statischen Seiten ist auch die Aktivierung von mode_cache von Nutzen.

9. Der Einsatz von Javascript

Genau wie schon bei CSS ist auch bei Javascript die Auslagerung in eine seperate Datei möglich und im Idealfall ist ebenfalls nur ein einzelner Zugriff auf diese Datei nötig. Beim Einsatz umfangreicher Javascript-Bibliotheken sollte man darauf achten, dass nur Code geladen wird den die Seite nachher auch benötigt und nur selten benutzter Code bei Bedarf nachgeladen wird. Javascript-Dateien lassen sich wie auch CSS ggf. zu einer einzelnen Datei zusammenfassen.

Wenn möglich sollte das Javascript erst am Ende einer Webseite geladen werden. So wird die Webseite schon angezeigt während das JavaScript noch geladen wird.

10. Tabellen vermeiden

Vermeiden Sie lange Tabellen. Unterteilen Sie die Tabelle in mehrere kleine Tabellen, der Seiteninhalt wird somit schneller angezeigt. Verwenden Sie keine verschachtelten Tabellen. Wenn es möglich ist sollten Sie auf Tabellen zur Seitengestaltung verzichten. CSS ist besser zur Seitengestaltung geeignet.

11. Modified Since Header verwenden

Modified Since Header geben Auskunft darüber wann die letzte Änderung einer Seite stattgefunden hat und führen bei vielen Browsern beim erneuten Aufruf der Seite zu einem “if-modified-since” Header der im Falle einer Änderung mit dem neuen Seiteninhalt und ansonsten mit einem 304 Not Modified beantwortet werden kann. Erhält der Browser einen 304 Header so wird dieser die Seite anzeigen welche im Browsercache liegt. Außer dem Header werden dann keine Daten vom Server zum Client übertragen. Enorme Trafficeinsparungen sind die Folge.

12. benutze Cookie-freie Domains für statische Elemente

Gerade für das Laden von statischen Bildern macht die Verwendung von Cookies kein Sinn und erhöht nur sinnlos den Trafic. Erstellen Sie eine Sub-Domain und laden alle Ihre statische Komponenten von dort. Ein weiterer Grund statische Komponenten von einer Cookie-freien Domain zu laden ist, dass einige Proxies keine Inhalte cachen wenn sie mit Cookies angefordert werden.