Warum die Ladezeit so wichtig ist - Webdesign und Digitalisierung

Menschen sind bekannterweise ungeduldig. Gerade in einem Medium, wie dem Internet wollen wir die Information sofort. Eine Studie von kissmetrics untermauert diese Aussage zur Ladezeit:

Knapp die Hälfte aller Internetnutzer erwarten eine Ladezeit von weniger als zwei Sekunden. Dauert das Laden mehr als drei Sekunden, springen 40 Prozent der Besucher ab.

Ihre Website sollte folglich in weniger als zwei Sekunden geladen sein. Kürzere Ladezeit sind natürlich noch besser. Denn nichts ist beim Surfen im Internet störender als eine langsame Website! Wenn zudem nur eine 3G Internetverbindung zur Verfügung steht, weil wir unterwegs sind und mit dem Handy surfen zählt jede Milli-Sekunde die Ihre Website zum laden braucht.

Aber nicht nur ihre Benutzer sind von einer langsamen Website genervt. Auch der Google-Bot wartet nicht lange und bewertet eine langsame Website mit ungenügend (seit 2010 ist die Ladezeit für Google offiziell ein Rankingfaktor). Zwar ist die Ladezeit nur ein Rankingfaktor von vielen, er kann aber dennoch dazu beitragen, dass Ihre Website in den Google Suchergebnisse besser gelistet wird. Finden Sie also zunächst heraus ob Ihre Website zu langsam lädt. Ist dies der Fall, optimieren Sie die Ladezeit – den so genannten Page Speed. Nachfolgend erfahren Sie wie Sie dabei vorgehen.

01 Messen Sie die Ladezeit Ihrer Website

Mit dem kostenlosen Google-Tool PageSpeed Insights können auch Laien den Page Speed Ihrer Website schnell ausmessen. Das Tool ist sehr einfach zu verstehen und liefert ein aussagekräftiges Ergebnis. Wie bei einer Verkehrsampel werden die Ergebnisse in die Farben rot, gelb und grün eingeteilt. Ist ihr Ergebnis grün eingefärbt müssen Sie nichts weiter tun. Bei gelb sollten Sie sich das Ergebnis genauer betrachten. Denn das Tool zeigt neben dem Gesamtergebnis Schwachstellen auf. Zudem erfahren Sie, wie die Schwachstellen aufgelöst werden können. Ist ihr Testergebnis rot eingefärbt besteht dringender Handlungsbedarf. In diesem Fall sollten Sie Ihre Website genauer unter die Lupe nehmen. Analyse-Tools, die ich dafür gerne verwende:

Google Search Console: Daten zur Ladezeit finden Sie unter dem Menüpunkt „Crawling“. Sehen Sie sich insbesondere den Verlauf an um Ladeprobleme zu erkennen.
Firebug: Dies ist eine Erweiterung für den Webbrowser Mozilla Firefox. Im Modul Netzwerk sehen Sie die Elemente Ihre Wbsite und die jeweils benötigte Ladezeit. So finden Sie schnell heraus, welche Elemente für lange Ladezeiten verantwortlich sind.
Google Analytics: Daten zur Ladezeit finden Sie unter dem Menüpunkt „Verhalten /Websitegeschwindigkeit“. Wenn sie Conversion-Ziele angelegt haben, können Sie die Ladezeit in Bezug auf Ihr Conversion-Ziel betrachten. Eine Aussage wie: „Das Ziel wurde aufgrund der schlechten Ladezeit nicht erreicht“ kann auf diesen Daten basieren.

02 Verringern Sie die Dateigröße

Komprimieren Sie Ihre Dateien. Script Dateien wie CSS und JS lassen sich komprimieren. Dabei werden Leerzeichen und Leerzeilen entfernt und die Dateigröße verringert. Im Internet finden Sie für diese Aufgabe diverse Komprimierungs-Tools, wie: YUI Compressor für CSS-Dateien oder Closure Compiler für JavaScript.
Binden Sie Scriptdateien am Ende der Website ein. Scripte die nicht sofort nach Seitenaufruf geladen werden müssen, sollten am Ende des HTML Doms eingebunden werden. Dadurch werden diese später geladen und Ihre Website kann sich trotzdem aufbauen.
Optimieren Sie alle Bilder der Website. Bilder werden oft viel zu groß in eine Website eingebunden. Achten Sie auf eine geringe Auflösung von 72dpi und eine genau passenden Abmessung. Sind Metadaten im Bild hinterlegt, können Sie diese löschen. Nutzen Sie bewährte Kompressionsverfahren wie PNG und JPEG.
Wandeln Sie Grafiken in Schrift um. Oft werden viele kleien Grafiken in einer Website verwendet, die zusammengenommen die Geschwindigkeit verringern. Wandeln Sie Grafiken daher wenn möglich in einen Schriftsatz um mit einer deutlich bessern Performance im Vergleich zu Bildern.
Eine CSS Anweisung wird deutlich schneller geladen als jede noch so kleine Bildgrafik. Erstellen Sie Grafiken daher mit CSS und ersetzen Sie insbesondere Hintergründe mit CSS.

03 Verringern Sie die Serveranfragen (HTTP Request)

Verringern Sie die Anzahl der HTTP Requests. Denn jede Serveranfrage kostet Zeit und sollte daher so gering wie möglich gehalten werden. Eine Serveranfrage wird immer dann ausgeführt, wenn eine Datei geladen werden soll. Dies kann ein Bild, eine Script oder eine externe Datenquelle sein.
Falls möglich fassen Sie unterschiedliche Dateien zu einer einzigen Datei zusammen. Dadurch verringern Sie die Anzahl der Serveranfragen.
Vermeiden Sie Inline Scrypte, das direkt in das HTML geschrieben werden. Diese blähen den Quellcode unnötig auf und haben negative Auswirkungen auf die Ladezeit. Denn für jedes Element erfolgt eine neue Abfrage. Lagern Sie Scrypte stattdessen in externe Dateien aus.
Arbeiten Sie mit CSS-Sprites um Serveranfragen zu reduzieren. Anstatt jedes Bild einzeln abzurufen, können Bilder zu einem einzigen Bild zusammengefasst werden, welches dann in Ausschnitten angezeigt wird.
Reduzieren Weiterleitungen. 301-Weiterleitungen sind sinnvoll um Duplicate Content zu vermeiden oder auf eine neue URL umzuleiten. Allerdings bremst jede Weiterleitung die Ladegeschwindigkeit.

03 Was Sie sonst noch tun können

Nutzen Sie Zwischenspeicher. Oft verwendete Elemente Ihrer Website können zwischengespeichert werden. Ein erneuter Aufruf erlogt dann schneller, da Inhalte im Zwischenspeicher verfügbar sind. Auch das zwischenspeichern auf mehreren Servern auf ein so genanntes CDM Neztwerk kann die Ladezeit erheblich verbessern. Die manuelle Aktivierung von Browser-Caching erfolgt überdie .htaccess-Datei. Dafür werden in Abhängigkeit zum Hosting-Anbieter Module aktiviert wie: mod_headers oder mod_expires.
Ihr Hosting-Anbieter kann stark zur Geschwindigkeit Ihrer Website beitragen. Meist sind es hier die kleineren Anbieter, wie All-Inkl oder Webgo, die mehr Performance und Service als große Anbieter wie 1&1 oder Strato bieten.
Erstellen Sie eine mobile Version Ihrer Website. Insbesondere im mobile Bereich sind lange Ladezeiten kritisch. Daher ist darüber nachzudenken, welche Bilder und andere Resourcen einer Website in der mobilen Ansicht zu laden sind. Oder Bilder erst laden wenn diese im sichtbaren Bereich sind. Wir nennen dies „above the fold“ und realisieren dies mit jQuery ( Lazy Load).

Übrigends:

Suchmaschinenoptimierung und Ladezeitverbesserung kann teil eines Outsourcing-Pakets sein. Dieses kalkuliere ich auf Wunsch für Ihre speziellen Bedürfnisse. Und bereits ab 2 Stunden im Monat erhalten Sie 20% Rabatt. Weitere Informationen dazu gibt es auf meiner Outsourcing Seite. Sie können mich aber auch direkt anrufen und wir besprechen Ihren Bedarf.