15 einfache Wege um die Ladezeit von Internetseiten zu verringern

Während mehr und mehr Menschen schnellere Internetverbindungen nutzen scheint es, als ob die Webentwickler immer weniger Wert darauf legen, Internetseiten zu optimieren damit sie schneller geladen werden können. Wir sehen immer mehr Widgets und Seiten, die mit Javascript überladen sind und trotz schneller Internetverbindungen eine lange Ladezeit beanspruchen. Es ist überraschend erfrischend, wenn eine Seite schnell und sauber lädt.

Webentwickler vernachlässigen zum Leidwesen der Nutzer manchmal einige einfache Regeln, wenn es darum geht, eine schnelle Webseite zu entwickeln. Schnelle Ladezeiten sind ausschlaggebend, wenn es darum geht die Nutzer zufrieden zu stellen. Dies gilt insbesondere für E-Commerce-Seiten. Nachfolgend finden Sie einige Gründe, warum schnell ladende Websites wichtig für Webentwickler sind.

— Schnellere Seiten verbessern die Nutzererfahrung. Der Nutzer nimmt die Ladezeiten verschiedener Seiten sowohl bewusst als auch unbewusst wahr. Ladezeiten ähneln Fußballspielern in einer Mannschaft: sie werden nur bemerkt, wenn sie nicht gut sind. Es fällt auf, wenn eine Seite zackig lädt.

— Es ist möglich, dass Ladezeiten in Zusammenhang mit den Suchmaschinen-Ranglisten stehen. Google hat deutlich gemacht, dass auf die Ladezeiten geachtet wird, wenn Adwords registriert werden. Es ist also anzunehmen, dass die Ladezeiten möglicherweise einen Einfluss auf die Seitenbewertung haben.

— Langsame Seiten verlieren Geld. Wenn Nutzer von einer langsam ladenden Webseite wegnavigieren, wirkt sich dies negativ auf die Einnahmen ein. Schätzungen zufolge verliert die E-Commerce-Industrie jährlich zwischen $1.1 und $1.3 Milliarden auf Grund langsamer Ladezeiten.

Langsame Ladezeiten können sogar das beste Webdesign zunichtemachen. Hier finden Sie ein paar gute Methoden und Werkzeuge, um sicherzustellen, dass Ihre Seite schnell und reibungslos läuft.

1. Ein einfacher Website-Analyzer
Es gibt viele verschiedene Programme, aber ich habe schon immer den Web Page Analyzer genutzt, um allgemeine Fehler aufzudecken und den Gesundheitszustand meiner Seite in Bezug auf die Ladezeiten zu überprüfen. Der Analyzer zeigt Ihnen jede Menge Informationen über die Menge an Scripts, die verwendet werden, das Gesamtvolumen der Dateien und viele andere Dinge, die die Ladezeit beeinflussen.

2. Pingdom
Pingdom ist eine raffinierte Seite, die es Ihnen ermöglicht fehlerhafte Bilder und Pfade ausfindig zu machen und die Ladezeit Ihrer Scripts und Bilder zu bestimmen. Fehlerhafte Pfade und Bilder können beim Laden eine Menge Zeit beanspruchen. Ich habe beispielsweise meinen Blog mit Pingdom überprüft und herausgefunden, dass ein Script und zwei Bilder nicht geladen werden konnten, weil die Pfade Fehler aufwiesen. Sobald diese Fehler behoben waren, reduzierte sich die Ladezeit auf die Hälfte.



Ein anderes raffiniertes Feature von Pingdom ist, dass man die Länge der verschiedenen Ladephasen sehen kann. Pingdom stellt jede Phase in einer anderen Farbe dar, z. B. die Erstverbindung sowie das erste und das letzte Byte, das heruntergeladen wurde, so dass Sie sehen können, wo das Bild oder Script am meisten Ladezeit beansprucht.

3. Dateien lokal hosten
Dies könnte seitens Ihrer Server etwas mehr Bandbreite beanspruchen, aber sie werden einen zeitlichen Zugewinn erzielen, da Sie nicht jedes Mal ins Web gehen müssen, um ein Bild zu finden. Anstatt Anbieter wie Flickr zu nutzen, um Ihre Bilder zu verwalten, können Sie sie auf Ihren eigenen Server legen und damit die Zeit sparen, die Sie normalerweise benötigen, um mit Ihrem Browser auf flickr.com zu navigieren und das Bild dort herunterzuladen. Lokal gespeicherte Dateien laden fast immer schneller als externe Dateien.

4. Höhen- und Breitenangaben bei Bildern nutzen
Dies ist ein Beispiel eines korrekt beschrifteten Bildes mit Höhen- und Breitenangaben:

<img src="images/mine.gif" border="0" alt="my image" width="125" height="250" />

Das Hinzufügen dieser Angaben kann einen großen Unterschied machen, wenn der Browser eine Seite lädt. Wenn der Browser die Höhe und Breite kennt, kann er gleich den nächsten Schritt einleiten und das Bild im Hintergrund laden, während er den Rest der Seite wiedergibt. Wenn ein Bild nicht über diese Angaben verfügt, muss der Browser erst warten, bis das Bild geladen ist, bevor er den Rest der Seite lädt.

5. Widgets reduzieren
Man kann leicht vergessen, dass eine Menge Widgets – auch wenn sie cool sind und eine Seite durch sie an Funktionalität gewinnt – die Ladezeit einer Seite negativ beeinflussen. Wenn die Seite, die die Widgets bedient, nicht einwandfrei funktioniert, kann dies die Ladezeit ihrer Seite ebenfalls beeinflussen.

6. Static Caching nutzen
Für Caching gibt es verschiedene Lösungen. Im Wesentlichen geht es beim Caching um folgendes: Seiten, die mittels dynamischer Sprachen wie PHP erstellt wurden, werden in statische Websites umgewandelt. Webserver können statische Dateien problemlos bedienen. Indem Sie Ihre dynamischen Seiten in statische Seiten verwandeln, können Sie die Auslastung Ihres Servers reduzieren und die Ladezeit Ihrer Seiten enorm verkürzen.

7. Beschleuniger
Dynamische Sprachen arbeiten typischerweise mit Scripts, die dabei helfen die Geschwindigkeit mit der eine Sprache läuft zu verbessern. Wenn Sie PHP nutzen, könnten diese Scripts hilfreich sein: APC, Zend cache, Xcache.

8. Firebug



Firebug ist eine Firefox-Erweiterung, die direkt im Browser jede Menge Reporting-Tools für Websites zur Verfügung stellt. Eine der Hauptfunktionen von Firebug ist die Fähigkeit, alle Aspekte einer Seite zu analysieren. Sie ist besonders hilfreich, um langsame Ladezeiten aufzudecken.

9. CSS-Shrinker



Kleinere externe Scripts wie Javascript und CSS können einen großen Unterschied in der Ladezeit ausmachen. Versuchen Sie Online-Services wie CSS Clean zu nutzen und eliminieren Sie Makel wie:

* White Spaces
* Zeilenumbrüche
* unnötige Zeichen
* und viele andere Dinge, abhängig vom gewünschten Komprimierungs-Level

10. Verschiedene Domains nutzen
Wenn Sie viele Web-Objekte auf einer Seite bedienen, ist es möglicherweise eine gute Idee mehrere Domains zu nutzen, um den Inhalt zur Verfügung zu stellen, z. B. server.example.com, server2.example.com, etc. Sie können nur eine begrenzte Zahl an Verbindungen gleichzeitig an den Webbrowser senden. Wenn Sie mehrere Domains nutzen (auch wenn diese auf die gleiche IP-Adresse zurückgreifen), können Sie mehrere Objekte gleichzeitig herunterladen, während Sie bei einem einzigen Server nur ein Objekt nach dem anderen runterladen können.

11. Cookies einschränken
Genau wie bei einer Diät sollte man darauf achten Cookies einzuschränken, um die Ladezeiten zu verringern. Extra Cookies, die dem Browser des Nutzers hinzugefügt werden, erhöhen die Ladezeiten. Vergewissern Sie sich, dass Sie nur so viele Cookies wie nötig verwenden und versuchen Sie die Verwendung von Cookies zu optimieren.

12. Verwendung einer anderen Domain für cookiefreie Ressourcen
Nutzen Sie eine andere Domain für Ressourcen, die keine Cookies benötigen, um die Verwendung von Cookies zu optimieren. Dies kann helfen, wenn Sie Top-Level-Cookies verwenden (deinewebseite.de). Alle Downloads von deinewebseite.de haben einen Cookie im Anhang. Dies kann umgangen werden, indem man eine komplett andere Domain verwendet, um die Ressourcen zu speichern, die ohne Cookies auskommen. Yahoo! nutzt beispielsweise die Domain ymig.com, um Ressourcen zu speichern, die keine Cookies benötigen.

13. Javascript bereinigen



Es ist nicht nur eine gute Idee die CSS-Größen (#9) zu verringern, sondern auch Ihre Javascript-Dateien zu komprimieren. Mit Services wie dem Dean Edward’s Packer können Sie ungewollte Zeilenumbrüche, Zeichen und anderen, sich wiederholenden Code in Ihren Javascript-Dateien bereinigen.

14. Javascript-Dateien zusammenfassen
Allgemein gilt, dass der Download vieler kleiner Scripts länger dauert als der Download eines großen Scripts. Wenn Sie Ihre Javascripts zu einem großen Skript zusammenfassen, erreichen Sie eine schnellere Downloadzeit. Am einfachsten geht dies (ohne umfassende Programmiererfahrung), wenn Sie Ihre Javascript-Dateien physisch öffnen und all diese Dateien in eine Datei kopieren. Allerdings ist dies nicht immer der leichteste Weg.

15. Nutzung eines Content Delivery Network
Wenn Ihre Seite immer mehr internationale Zugriffe verbuchen kann, ist es ratsam zu überlegen, ob ein Content Delivery Network (CDN) sinnvoll ist. CDNs ermöglichen den Zugriff auf Server in der ganzen Welt, je nachdem wo sich der Nutzer befindet. Es dauert beispielsweise länger, wenn ein Nutzer aus Australien den Inhalt einer Seite auf einem Server in den USA herunterladen will, als wenn ein Besucher innerhalb der Staaten die gleiche Seite aufrufen will. Content Delivery Networks erkennen, wo sich der Nutzer befindet und würden die Seite in diesem Fall von einem Server in Australien bedienen, was wiederum in einem schnelleren Seitenaufbau resultieren würde.

Fazit
Manchmal lässt man sich von zusätzlicher Funktionalität ablenken, wenn man eine Website gestaltet. Als generelle Faustregel sollten wir jedoch festhalten, dass weniger mehr ist. Weniger Bilder, externe Scripts und Widgets sorgen dafür, dass die Seite schneller lädt. Ein paar kleine Änderungen können einen großen Unterschied in der Ladezeit ausmachen. Denken Sie daran: Kurze Ladezeiten machen die Nutzer glücklich.