Immer mehr Marketing-Entscheidern wird bewusst, wie wichtig die Website-Ladezeit ist. Bislang herrschte primär bei umsatzstarken Shop-Betreibern eine hohe Sensibilität, denn hier schlägt sich ein lahmer Warenkorb oder Bezahlprozess radikal auf die Abbruchquote (“Bounce Rate”) nieder.
In diesem Artikel soll es nicht darum gehen, eine bestehende Website bzw. einen Shop zu beschleunigen. (Diesbezüglich finden Sie hier ein paar Tipps.) Vielmehr geht es darum, eine schnelle Website auf der “Grünen Wiese” neu aufzusetzen. Auch wenn so ein “Speed-first-Ansatz” in der Praxis noch eher selten zum Einsatz kommt.
Darum sind langsame Websites ein Problem.
Langsame Websites haben primär drei negative Konsequenzen zur Folge.
- Geringere Konversionsraten
Nicht nur im E-Commerce führen langsame Lade- und Reaktionszeiten zu verärgerten Usern. Das beginnt mit dem initialen Aufruf der Website. Zum Beispiel aus dem Ergebnis einer Suchmaschine (SERP) heraus. Dauert es zu lange, brechen die User den Vorgang ab. - Negative Reputation
Eine schlechte User Exerience führt dazu, dass User eine Website oder eine Marke zukünftig meiden. Vor allem, wenn Probleme wiederholt auftreten. Es ist dann sehr schwierig, diese wieder für sich zu begeistern. - Schlechtes Ranking
Speziell Google achtet auf eine optimale User Experince. Deshalb ist die Website-Geschwindigkeit ein wichtiger Faktor für das Ranking. Entsprechende Daten generiert Google mithilfe seines verbreiteten Chrome-Browsers.
Wie bemisst sich Website-Geschwindigkeit?
Wann ist eine Website “schnell”? Es gibt hier eine ganze Reihe an Metriken, welche die Performance einer Website beschreiben.
Full-page load time
Die Seiten-Ladezeit (Page load time) drückt aus, innerhalb welcher Zeit eine Seite komplett geladen ist. Also die Dauer, bis man mit ihr umfänglich interagieren kann. Faustregel: Die Full-page load time sollte nie 3 Sekunden überschreiten.
Time To First Byte (TTFB)
Eine weitere Metrik ist die Zeit bis zum ersten Byte. TTFB misst die Dauer von der HTTP-Anforderung des Benutzers oder Clients bis zum ersten Datenpaket der Seite, die vom Browser empfangen wird.
Die Zeit bis zum ersten Byte umfasst drei Teile:
- Die Zeit zum Senden des Requests an den Server.
- Zeit für die Bearbeitung des Requests.
- Zeit zum Senden des ersten Bytes als Antwort auf den Request
DNS Lookup Time
Die DNS Lookup Time spielt eine Rolle, wenn eine Website Ressourcen (z. B. Bilder oder Fonts) von verschiedenen Hosts (mit jeweils eigener Domain bzw. Subdomain) abruft. Denn für jede muss zunächst mal die IP-Adresse ermittelt werden. Dazu dient der DNS des Internet Service Providers, welchen der User nutzt. Als Website-Betreiber kann man hier also wenig optimieren. Außer natürlich die Anzahl verwendeter Domains auf ein Minimum zu reduzieren.
Time to start render
“Time to start render” ist jene Zeitspanne, ab der im Browser etwas sichtbar wird. Zum Beispiel ein Hintergrund erscheint. Rein psychologisch hat dieser Moment eine große Bedeutung. Denn der User spürt, dass etwas passiert.
Time to interaction
Auch wenn eine Website noch nicht komplett geladen ist (siehe Seiten-Ladezeit), kann man mit ihr manchmal schon interagieren. Also scrollen, navigieren oder ein Formular ausfüllen. Die Spanne bis zu diesem Zeitpunkt wird “Time to interaction” genannt.
Wie lässt sich eine schnelle Website aufsetzen?
Nachfolgend erfahren Sie, wie ein “Speed-first-Ansatz” beim Aufbau einer Website umgesetzt werden kann.
Schritt 1: Ein potenziell schnelle Website konzipieren
Einen großen Einfluss auf die Website-Geschwindigkeit hat die Website selbst. Also der Content und das UX-Design. Allgemein lässt sich sagen: Je mehr Spielereien und Animationen sie umfasst, desto umfassender ist der Code.
Schnelle Ladezeiten lassen sich am besten erreichen, wenn auf folgende Elemente weitgehend verzichtet wird:
- Animationen
- Slider
- Bannerwerbung
- Social Share Buttons
- Großflächige Grafiken
- Eingebettete Videos
Das Problem: Je nach CMS wird der JavaScript-Code für alle irgendwo verwendeten Features mitgeschickt. Und zwar zu Beginn jedes Seitenaufrufs. Selbst dann, wenn diese auf der Seite gar nicht zum Einsatz kommen.
Wenn Sie aufwendigere Elemente nutzen wollen, sollte der entsprechende Code nur dort geladen werden, wo dieser auch benötigt wird. Und zwar zum entsprechenden Zeitpunkt (z. B. erst nach dem Herunterscrollen). Entsprechende Freiheiten (Code per Push nachliefern) ermöglicht übrigens HTTP/2.
Schritt 2: Ein potenziell schnelles CMS aufsetzen
Ok, natürlich speieln bei der Auswahl eines CMS viele Kriterien eine große Rolle. Und tatsächlich ist der Einfluss des CMS auf die Website-Geschwindigkeit eher gering. Dennoch gibt es ein paar Punkte, die bei der Auswahl beachtet werden sollten.
- Es ist ratsam, CMS und Hosting separat zu betrachten. Zwar sind auf dem Blatt Papier auch Dienste wie Jimdo schnell. Aber die Möglichkeiten der Konfiguration im Hinblick auf Geschwindigkeit sind hier häufig sehr eingeschränkt.
- Dasselbe gilt für Marketing Clouds wie HubSpot oder Adobe sowie Headless CMS aus der Cloud.
- Vorteilhaft ist hingegen der Einsatz von Best-of-Breed-Lösungen, die permanent weiterentwickelt werden und sich umfassend “customizen” lassen. Zum Beispiel Typo3, Drupa, Concrete5 oder Joomla.
- Ein Muss sind im CMS integrierte Performance Features wie automatische Grafikoptimierung bzw. Unterstützung von WebP als Bildformat sowie Lazy Load. Darüber hinaus sind ein ausgeklügeltes Caching sowie die automatische Kompression von Dateien sinnvolle Funktionalitäten.
- Auch mit WordPress lassen sich prinzipiell sehr schnelle Websites betreiben (so wie diese). Hier hängt aber alles vom eingesetzten Theme und den verwendeten Plugins ab. Beides kann eine Website sowohl beschleunigen als auch ausbremsen.
- Entscheidend ist am Ende immer die Qualität des generierten Quellcodes.
Schritt 3: Ein geeignetes Hosting wählen
Die meisten Websites werden auf virtuellen Servern betrieben. Sie teilen sich also Bandbreite, Speicher und CPU-Leistung mit vielen anderen. Dabei sind viele Hoster relativ geizig mit ihren Ressourcen.
Mehr Kontrolle über die Ressourcen bringt naturgemäß ein dedizierter Server mit sich. Günstiger ist ein Cloud-Server. Das Hinzubuchen von Arbeitsspeicher und CPU-Power ist hier binnen weniger Minuten möglich.
Die große Frage ist: Selbst die Maschine administrieren oder einen Full-Service in Anspruch nehmen? Das muss jeder für sich beantworten. Hauptsache, der Server wird fortlaufend aktualisiert und unterstützt zeitgemäße Technologien (z. B. PHP 8.x und HTTP/2). Auch Kompressionsverfahren wie gzip oder Brotli sollte der Host bewerkstelligen.
Schritt 4: Ein CDN einrichten
Zusätzlich Speed bringt der Einsatz eines Content Delivery Networks. Das ist eine Gruppe von Servern, die auf der ganzen Welt verteilt sind. Einmal angebunden, werden Website-Ressourcen über diese Server ausgespielt und sorgen für schnellere Ladezeiten. Ganz gleich, wo der User auf die Website zugreifen will.
Ein CDN ist nicht nur für international agierende Organisationen sinnvoll. Denn viele Betreiber bieten weitere interessante Features an. Zum Beispiel WebP, automatische Bildkompression sowie ein zusätzliches Caching. CDNs umfassen aber auch Bot-Schutz sowie eine Firewall. Doch Vorsicht: Sicherheits-Funktionalitäten können eine Website wieder ausbremsen.
Sowohl im Hinblick auf Hosting als auch auf den CDN gilt: Datenschutzbestimmungen beachten. Viele Anbieter haben ihren Hauptsitz außerhalb der EU; häufig in den USA.