Die kurze Website-Ladezeit: Entscheidend für Ihre Besucher

04.10.2015 von Redaktionsteam TelekomCLOUD

Drei Sekunden! Dauert das Laden Ihrer Website länger, springt ein Drittel der potenziellen Kunden ab. Zu diesem Ergebnis kommt die Studie „2105 Report: Global Consumer Online Shopping Expectations“. Bei einer Ladezeit von fünf Sekunden springt demnach ein weiteres Drittel ab, länger als fünf Sekunden warten nur 32 Prozent der befragten Onlinekunden aus Deutschland. Daher ist eine schnelle Website in erster Linie für die Nutzererfahrung wichtig, aber auch Suchmaschinen wie die von Google werten die Ladegeschwindigkeit aus und berücksichtigen diese bei der Bewertung und dem Ranking.
Anfang des Jahres führte Google bereits erste Experimente durch, bei denen in mobilen Suchergebnissen Warnhinweise für langsame Websites angezeigt wurden. Besitzer schnell ladender Websites profitieren also doppelt und verschaffen sich einen Vorteil gegenüber Konkurrenten, wenn die Entwickler und Programmierer die Geschwindigkeit optimieren.
Beim Seitenaufruf durch mobile Endgeräte wie Smartphones und Tablets sind optimierte Ladezeiten besonders wichtig, häufig entspricht die maximale Datenübertragungsgeschwindigkeit noch nicht der Verbindungsqualität via DSL oder Kabel. Bis der neue Mobilfunkstandard LTE mit einer Bandbreite von bis zu 100 Mbit verbreitet ist, werden noch ein paar Jahre vergehen.

Ihre Aufgabe: Verbessern Sie die Besuchszeiten und Pageviews und minimieren Sie die Absprungraten. Halten Sie sich also immer vor Augen, dass die Website-Ladezeit zu den wichtigsten User-Experience-Faktoren zählt. Für die Optimierung gibt es zahlreiche Möglichkeiten, die einfachsten und wirksamsten technischen Schritte lernen Sie im Folgenden kennen.

Beim Seitenaufruf durch mobile Endgeräte sind optimierte Ladezeiten besonders wichtig
Beim Seitenaufruf durch mobile Endgeräte wie Smartphones und Tablets sind optimierte Ladezeiten besonders wichtig.

Kunden sind ungeduldig: Optimieren Sie die Website-Ladezeit

Die Ladezeit lässt sich unter zwei Gesichtspunkten verbessern. Interessant ist:

  • die notwendige Zeit zum Laden des sichtbaren Inhalts ohne Scrollen und
  • die notwendige Zeit zum vollständigen Laden der Website.

Natürlich hängt die tatsächliche Ladezeit von der Netzwerkverbindung ab. Aufgabe der Webmaster und Programmierer ist es, die netzwerkunabhängigen Aspekte bestmöglich zu optimieren. Dazu gehören:

  • die Serverkonfiguration,
  • die HTML-Struktur einer Seite und
  • externe Ressourcen wie JavaScript, CSS und Bilder

Die Umsetzung der folgenden Verbesserungsvorschläge steigert die relative Leistung der Website, die Leistungsverbesserung lässt sich mithilfe des Pagespeed-Tests von Google leicht nachverfolgen. Testen Sie Ihre Website jetzt, es dauert nur wenige Sekunden. 100 Punkte sind dabei nicht das Ziel, diese lassen sich bei Verwendung externer Bibliotheken etc. nicht erreichen. Ein Wert von 85 Punkten ist jedoch in vielen Fällen möglich.

PageSpeed Insights analysiert die Geschwindigkeit Ihrer Website.
PageSpeed Insights analysiert die Geschwindigkeit Ihrer Website.

Den Server richtig auswählen und konfigurieren

Ihre Website ist auf einem Server gespeichert, Billiganbieter lagern viele Webseiten auf einem einzigen Server: Eine Garantie für eine hohe Bandbreite gibt es dann nicht. Haben die anderen Webseiten hohe Besucherzahlen, verlangsamt sich automatisch Ihr Webauftritt. Auch die Server-Konfiguration bietet enormes Potenzial.

Tipp 1: Ein schneller und richtig konfigurierter Server für eine kurze Website-Ladezeit

Achten Sie daher auf einen seriösen Hosting-Anbieter. Mit ihm legen Sie die wichtige Basis für eine schnelle Website. Unter anderem garantieren Ihnen die Hosting-Angebote der Telekom eine hohe Bandbreite.

Tipp 2: Die Antwortzeit des Servers reduzieren

Bei der Antwortzeit Ihres Servers handelt es sich um den Zeitraum, der verstreicht, bis der notwendige HTML-Code geladen wird. Google empfiehlt eine Reduzierung der Antwortzeit auf 200 ms. Mögliche Faktoren sind langsame Datenbankabfragen, Bibliotheken, Frameworks, Speicherplatzmangel oder CPU-Ressourcenmangel. Googles PageSpeed Insights misst die Geschwindigkeit, die Optimierungsmöglichkeiten hängen dann vom verwendeten System ab. Wenn Sie Ihre Website mit Wordpress oder Joomla betreiben, finden Sie in der jeweiligen Dokumentation Tipps zur Leistungsoptimierung.

Tipp 3: Nutzen Sie die Kompression für eine kurze Website-Ladezeit

Die Datenkomprimierung beschleunigt das Herunterladen vom Server zum Client. „GZip“ und „Deflate“ sind beliebte Module für Apache-Server, meist ermöglichen diese eine Einsparung von 50 bis 70 Prozent. Die kleineren Datenmengen sind schneller übertragen, die Website-Ladezeit reduziert sich erheblich und die Bandbreite ist besser genutzt. „GZip“ bzw. „Deflate“ lässt sich am einfachsten über den Server aktivieren, alternativ per „htacces-Datei“, PHP oder entsprechendem Plug-In für das Content-Management-System (zum Beispiel Wordpress oder Joomla).

Zum manuellen Bearbeiten der „htaccess-Datei“ ist ein FTP-Zugang erforderlich, die Verbindungsdaten mit Server-IP-Adresse, Benutzernamen und Passwort erhalten Sie von Ihrem Hosting-Anbieter. Anschließend greifen Sie mit einer FTP-Client- Software, wie dem frei erhältlichen Programm FileZilla, auf die Datei zu. Das Programm steht für die Betriebssysteme Mac OS X, Windows und Linux zur Verfügung. Die „htaccess-Datei“ befindet sich normalerweise im Root-Verzeichnis der Website.
Hinweis: Bevor Sie Änderungen vornehmen, sollten Sie die Originaldatei lokal herunterladen und separat als Backup in einem anderen Ordner verwahren. Ein Fehler kann dazu führen, dass die gesamte Website nicht mehr erreichbar ist!

Finden Sie heraus, ob Ihr Webserver das Modul „mod_deflate.c“ bzw. „mod_gzip.c“ unterstützt, andernfalls bringt der folgende Code nichts. Für das Komprimieren der Inhalte mit Deflate fügen Sie den folgenden Code unterhalb des vorhandenen Codes hinzu, anschließend speichern Sie die Datei ab und laden diese auf den Server hoch (die vorhandene Datei wird überschrieben):

# Deflate Kompression nach Dateityp
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
# Deflate Kompression MimeType
<IfModule mod_deflate.c>
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
ExpiresActive on
ExpiresDefault "access plus 28 days"
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Die gleiche Vorgehensweise gilt für das GZip-Modul:
<IfModule mod_gzip.c>
 mod_gzip_on       Yes
 mod_gzip_dechunk  Yes
 mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler   ^cgi-script$
 mod_gzip_item_include mime      ^text/.*
 mod_gzip_item_include mime      ^application/x-javascript.*
 mod_gzip_item_exclude mime      ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Tipp 4: Nutzen Sie das Browser Caching und binden Sie den Expires-Code in „.htaccess“ ein

Bei jedem Seitenaufruf werden Texte und Bilder vom Server zum Client übertragen. Ist das Browser Caching aktiviert, speichert der Browser die statischen Bilder in seinem Cache. Bei wiederholten Seitenaufrufen werden diese dann direkt von der Festplatte geladen und die Website-Ladezeit sinkt, zudem reduziert sich die Last für den Webserver. Ein kompletter HTTP-Request entfällt. Wenn sich der Inhalt einzelner Seiten nicht ständig ändert, lohnt es sich, den Ablauf des Cache auf einen Monat zu setzen. Dazu ist in der „htaccess-Datei“ folgender Eintrag erforderlich (vorausgesetzt das Modul „mod_expires.c“ steht zur Verfügung):

# Einstellung der Cache-Laufzeit auf einen Monat
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>

Das Browser-Caching vermeidet also unnötige HTTP-Requests, was die Website-Leistung steigert. Für statische Ressourcen empfiehlt Google eine Haltbarkeitsdauer von mindestens einer Woche.

Tipp 5: Content Delivery Network – weltweit schneller erreichbar

Besonders für international agierende Firmen bietet der Einsatz eines „Content Delivery Networks“ (CDN) entscheidende Vorteile: Daten sind auf hochperformante Server ausgelagert und laden dadurch schneller, zudem verringert sich die Last des eigenen Webservers. Die Verwendung eignet sich beispielsweise für den Versand von Newslettern an einen großen Kundenstamm, praktisch ist solch ein Dienst auch für Anbieter von Inhalten im Video- und Audiobereich. Weitere Informationen finden Sie unter anderem bei der CDN-Lösung der „Deutschen Telekom International Carrier Sales & Solutions (ICSS)“.

Regelmäßig aufräumen und die Datenmenge reduzieren – die fehlerfreie Website
Besonders bei Websites mit viel Content sammeln sich mit der Zeit große Datenmengen. Beim Aktualisieren der Inhalte räumen Webmaster häufig nicht auf und „tote Daten“ erhöhen die Website-Ladezeit. Solche Bad Requests können Bilder oder Scripte sein. Werden diese nicht gefunden, verlängert sich die Ladezeit erheblich, im schlimmsten Fall ist ein Timeout möglich. Browser wie Microsoft Edge, Mozilla Firefox und Google Chrome integrieren die praktischen Entwicklertools, die derartige Fehler und die Ladezeiten der einzelnen Komponenten anzeigen.

  • Beim neuen Windows-10-Browser Microsoft Edge drücken Sie die Taste F12 und dann auf „Netzwerk“
  • Bei Google Chrome drücken Sie die Tastenkombination „Strg+Umschalt+I“ und klicken auf den Reiter „Network“.
  • Bei Firefox wählen Sie über das Menü die „Entwicklerwerkzeuge“ aus und analysieren die Ladezeit einzelner Elemente über den Reiter „Netzwerkanalyse“

Tipp 6: Sauberes HTML zusammenführen und reduzieren

In der Entwicklungsumgebung sollte der HTML-Code selbstverständlich ordentlich eingerückt, sauber formatiert und umfangreich kommentiert sein. Im produktiven Einsatz sind Leerzeichen, Kommentare und Tabulator-Einzüge jedoch überflüssig. Die Beseitigung dieser Zeichen im Quellcode der CSS-, Javascript- und HTML-Dateien führt zu einer Dateigrößenersparnis von 15 bis 30 Prozent. Für die Minimierung stehen verschiedene Werkzeuge bereit, neben der manuellen Vorgehensweise mithilfe von Online-Tools eignen sich Tools wie YUI-Compress.

Tipp 7: Javascript-Dateien am Ende laden

Neben Bildern sind häufig Javascript-Dateien oder -Bibliotheken wahre Schwergewichte, wenn möglich lädt der Browser diese erst zum Schluss. Zumindest sollten Sie dafür sorgen, dass diese parallel oder asynchron (per defer oder async) geladen werden, damit Besucher die anderen Inhalte bereits sehen, während die Javascript-Informationen noch nicht zur Verfügung stehen.

Tipp 8: CSS-Dateien aktuell halten

Vermeiden Sie möglichst sämtliche Formatierungen im HTML-Code, was als Inline CSS bezeichnet wird. Nutzen Sie stattdessen eine CSS-Datei.

Tipp 9: Eingebundene Script-Dateien vereinen für weniger HTTP-Anfragen

Viele HTTP-Anfragen (HTTP-Requests) verlängern die Website-Ladezeit. Bei einem HTTP-Request handelt es sich um die Anforderung und Lieferung einer einzigen Datei vom Server an den Client. Das HTTP-Protokoll funktioniert folgendermaßen: Für das Herunterladen einer Datei muss der Browser jedes Mal eine neue Verbindung zum Server herstellen. Wenn Ihre Website beispielsweise fünf CSS-Dateien und fünf Javascript-Dateien enthält, ist es nicht möglich, diese in einem Rutsch herunterzuladen. Stattdessen erfordert der Vorgang zehn Einzelverbindungen und bei jedem Einzelnen müssen Zusatzinformationen (Anfrage-Informationen und Antwort-Informationen) heruntergeladen werden. Der Fachmann bezeichnet diese Informationen als „Protocol overhead“, der im sicheren HTTP-Protokoll übrigens noch größer ausfällt. Selbst moderne Browser können derzeit nur sechs parallele Verbindungen öffnen, was eine zu hohe Belastung der Server verhindern soll. Eine Reduzierung der HTTP-Requests ist daher eine wichtige Methode zur Verbesserung der Website-Ladezeit. Nicht jede Javascript-Funktion benötigt eine eigene Datei, die separat geladen werden muss. Auch sind zahlreiche CSS-Dateien nachteilig.
Weniger Anfragen an den Server beschleunigen die Website-Ladezeit. Besser ist es daher, alle Scripts inklusive der CSS-Dateien in eine Datei zusammenzufassen. Im Netz finden Sie entsprechende Minimierungs-Tools.

Tipp 10: Vermeiden Sie Redirects

Wenn Ihre Leser Websites über Redirects erreichen, führt dies immer zu einer gewissen Latenzzeit. Vermeiden Sie daher Hürden wie die 301 Redirects.

Tipp 11: Die Ladezeit der Bilder verzögern

„Lazy Load“ sorgt dafür, dass Bilder erst dann laden, wenn Sie im sichtbaren Bereich erscheinen. Die unteren Bilder auf der Seite lädt der Browser also erst dann nachträglich, wenn die Besucher herunterscrollen.

Komprimieren und skalieren: Bilder ohne Verluste optimieren
Bilder gehören zu den wesentlichen Bestandteilen einer informativen Website. Die Bild-Komprimierung unterscheidet sich nach verlustfreien (lossless) und verlustbehafteten (lossy) Methoden. Mehr Einsparpotenzial birgt die verlustbehaftete Kompression, die zum Beispiel minimal unterschiedliche Farbwerte zusammenführt. Sie können die Dateigröße auch verringern, ohne dass die optische Qualität darunter leidet – schnellere Ladezeiten sind in beiden Fällen die Folge. Ändern Sie das Dateiformat und verwenden Sie keine TIFF- oder BMP-Dateien. Für Bilder in Fotoqualität ist das JPG-Format am besten geeignet, alternativ können Sie das PNG-Format nutzen. Die tatsächliche Bildgröße sollte der angezeigten Bildgröße entsprechen. Wenn Sie von Ihrer hochwertigen Digitalkamera Bilder in Originalgröße einbinden, verschwenden Sie viel Zeit und Ressourcen. Geben Sie für jedes Bild die korrekte Dimension an, dann muss der Browser die Höhe und Breite nicht selbst berechnen. Erstellen Sie mithilfe von Photoshop oder dem kostenlosen Tool Gimp eine kleine Webversion.

Tipp 12: Hintergrundbilder in ein CSS-Sprite zusammenführen

Die verschiedenen Bilder und vor allem Symbole auf der Website lassen sich in ein großes Bild zusammenführen, das der Browser mit einem HTTP-Request lädt. Für die Anzeige des jeweiligen Bildausschnitts nutzt der Programmierer entsprechenden CSS-Code mit den Eigenschaften „background-image“ und „background-position“.

Die Optimierung der Website-Ladezeit verbessert die Nutzererfahrung enorm.
Die Optimierung der Website-Ladezeit verbessert die Nutzererfahrung enorm.

Fazit: Weniger als drei Sekunden ist das Ziel

Die Optimierung der Website-Ladezeit verbessert die Nutzererfahrung enorm. Gleichzeitig ist dies nur einer der vielen Faktoren für einen erfolgreichen Webauftritt. Multimediale Inhalte benötigen eine längere Ladezeit, bieten jedoch häufig einen gewünschten Mehrwert für die Besucher. Um potenzielle Leser oder Kunden aufgrund zu langer Ladezeiten nicht zu verlieren, sollte die Website-Ladezeit möglichst gering ausfallen.

Kategorien

  • Mehr Erfolg im Internet
Redaktionsteam TelekomCLOUD

Das Redaktionsteam gibt Praxistipps zu den Anwendungen aus der TelekomCLOUD, schreibt Ratgeber und Checklisten und spricht mit Experten oder Kunden zu allen Themen rund um SaaS, IaaS und PaaS. Sie erreichen uns unter cloud-blog(at)telekom.de