Mittlerweile ist es für viele Betreiber kein Geheimnis mehr, dass die Ladezeit einer Website eine wichtige Rolle spielt. Lädt beispielsweise ein Online-Shop oder Blog zu lange, könnten Nutzer die Seite vorzeitig verlassen. Wichtige Ziele wie Conversions bleiben aus. Hinzu kommt, dass die Ladezeit einer Website beim Suchmaschinenbetreiber Google ein offizieller Rankingfaktor ist.
Doch wie steigert man eigentlich den Speed seiner Website? Hier sind verschiedene Faktoren entscheidend. Dazu gehört unter anderem die Wahl des richtigen Hosting-Paketes. Reicht ein kleiner Webspace aus, oder muss es ein großer Server sein?
Je nach Größe und Ziel des geplanten Projektes ist die entsprechende Hosting-Auswahl erforderlich. Bei kleineren Seiten reichen unter Umständen bereits sichere und kostenlose Webhosting Anbieter aus, die alle grundlegenden Anforderungen erfüllen. Bei größeren Projekten sind eher große Webspaces oder dedizierte Server zu empfehlen. Zusätzlich sind neben der Wahl des Webhosting Anbieters auch noch weitere Punkte von Bedeutung. Darauf geht der folgende Beitrag ein.
Warum ist eine schnelle Website wichtig?
Bevor es mit den eigentlichen Optimierungsmaßnahmen der Ladezeiten losgeht, kommen im Folgenden entscheidende Merkmale, warum eine schnelle Website wichtig ist:
- Dauert der Ladevorgang einer Website länger, springen Nutzer ab. Das wirkt sich negativ auf die User Experience/Nutzererfahrung aus und erhöht die Absprungraten.
- Hier kommt gleichzeitig auch das Google Ranking ins Spiel. Höhere Absprungraten können ein negatives Signal für Google bedeuten, weshalb eine Websites an Rankings verliert. Sie wird in den Ergebnissen weiter unten angezeigt.
- Aber auch das Crawling spielt in Verbindung mit der Ladezeit mittlerweile eine wichtige Rolle. Denn Suchmaschinen-Crawler verwenden ein Crawling-Budget, um eine Website auf neue oder geänderte Inhalte zu überprüfen.
- Möchten Websitebetreiber Conversions (Leads, Sales, Downloads etc.) generieren, sorgt eine schnelle Website für mehr Ereignisse. Langsame Seiten hingegen können langfristig Umsatzeinbußen bedeuten.
- Wird jetzt auch noch Traffic über Webeanzeigen/Ads eingekauft, können gleichzeitig die Werbeausgaben pro Conversion steigen. Denn auch eingekaufte Nutzer springen bei langsamen Seiten ab. Dennoch wird jeder Klick berechnet.
Ladgeschwindigkeit einer Website mit Google PageSpeed Insights überprüfen
Wie schnell lädt meine Website eigentlich? Und in welchen Bereichen gibt es Optimierungsbedarf? Alle erforderlichen Informationen und Ergebnisse liefert das Tool Google PageSpeed Insights zur Messung der Ladegeschwindigkeit einer Website.
Nach Eingabe der Website-URL erfolgt zunächst ein Scan, der einen Moment lang dauern kann. Anschließend liefert PageSpeed Insights sämtliche Diagnosedaten und Verbesserungsvorschläge. Zudem sind die Daten in die Bereiche Mobil und Computer unterteilt.
Vor allem Anfängern kann es schwerfallen, bei den verschiedenen Ergebnissen und Werten wie First Contentful Paint, Speed Index oder Speed Index durchzublicken. Das folgende Video vom YouTube-Channel nexTab.de gibt eine kleine Einführung, um PageSpeed Insights besser zu verstehen:
Hochwertigen Hoster (Server oder Webspace) mit eigener Domain verwenden
Alle umgesetzten Optimierungsmaßnahmen zur Verbesserung der Ladezeit bringen nichts, wenn der Hosting-Anbieter zu langsam ist. Deshalb ist zu empfehlen, nicht unbedingt das günstigste Angebot zu wählen und auf Premium-Anbieter zu setzen.
Sie verfügen über leistungsstarke Serverinfrastrukturen, bei denen die Zugriffszeiten und Reaktionszeiten geringer ausfallen. Bei modernen Anbietern ist es bei Bedarf möglich, eine eigene Domain mitzubringen und in wenigen Schritten zu konfigurieren. Eine eigene Domain hat dabei den Vorteil, dass sie frei übertragen werden kann und sich im vollen Besitz des Website-Betreibers befindet.
Gleiches gilt, wenn ein bestehendes Projekt zu einem anderen Hoster umgezogen werden soll. Denn in einigen Fällen stellt es sich leider erst im Nachhinein heraus, dass das frühere ausgewählte Hosting-Paket doch nicht so leistungsstark ist.
Hinzu kommen weitere Konfigurationsmöglichkeiten und Module, die beispielsweise eine Komprimierung der Daten auf dem Server ermöglichen (dazu später mehr). Hier haben Websitebetreiber weitere Stellschrauben, um die Ladezeit zusätzlich zu verbessern.
Server auf das HTTP/2-Protokoll umstellen
Ist bei einem Server noch HTTP 1.1 konfiguriert, ist ein Umstieg auf das modernere HTTP/2-Protkoll empfehlenswert. Hiermit erhalten Websitebetreiber gleich mehrere Vorteile, die für eine höhere Leistung sorgen:
- Mit der Einführung von HTTP/2 sind die HTTP-Requests (Anzahl der HTTP-Anfragen) nicht mehr begrenzt. Denn hier kommt das Multiplexing zum Einsatz. Früher waren maximal 10 Übertragungen gleichzeitig möglich. Mit HTTP/2 kommuniziert ein Internetbrowser über deutlich mehr Verbindungen, wobei es kein Limit gibt.
- Das erspart gleichzeitig den Aufwand, da bestimmte Dateien nicht mehr kombiniert werden müssen. So beispielsweise JavaScript-Dateien und Stylesheets (CSS).
- Zudem lassen sich Daten zur Websitedarstellung im Voraus laden, was für eine schnellere Ladezeit sorgt. Denn HTTP/2 ist dazu in der Lage, pro Anfrage mehrere Antworten zu senden. Hier ist auch vom sogenannten Server-Push-Verfahren die Rede.
Cache aktivieren und Ressourcen/Elemente zwischenspeichern
In vielen Fällen bewirkt die Aktivierung des Caches Wunder und sorgt bei der Ladezeit für deutliche Sprünge. Wird der Cache aktiviert, werden ab sofort bestimmte Ressourcen/Elemente zwischengespeichert.
Es gibt verschiedene Cache-Arten wie beispielsweise serverseitiges Caching, Objekt-Caching oder Browser-Caching. Wird beispielsweise die letzte Methode aktiviert, werden alle grundlegenden Elemente einer Website im Internetbrowser des Nutzers zwischengespeichert.
Besucht er die Website später erneut, wird direkt auf die Daten im Browser zugegriffen. Ein erneutes Laden vom Server ist nicht mehr erforderlich. Lediglich neue Inhalte/Elemente wie beispielsweise Text-Container sind herunterzuladen. Vor allem bei CMS (Content-Management-Systemen) wie WordPress stehen zahlreiche Plug Ins zur Verfügung, die eine schnelle und einfache Einrichtung des Caches ermöglichen.
CDN (Content Delivery Network) verwenden
Auch bei einem CDN (Content Delivery Network) handelt es sich um eine Art Cache. Allerdings mit dem Unterschied, dass die zu speichernden Daten geografisch auf Servern verteilt sind.
Alle grundlegenden Request-Elemente/Daten einer Website werden vom jeweiligen CDN-Server abgerufen. Dazu zählen beispielsweise Bilder oder CSS-Sheets. Das entlastet den eigenen Server vor allem bei großen Websites, die große Datenmengen laden.
Hinzu kommt, dass CDN-Netzwerke regional agieren. CDN-Anbieter verfügen über große Netzwerke und Rechenzentren, die weltweit verteilt sind. Besucht beispielsweise ein Nutzer aus Deutschland eine Website, erfolgt das Laden der Elemente vom deutschen CDN-Netzwerk. Besucher aus Amerika erhalten die Daten von einem CDN-Netzwerk in den USA.
Dadurch sind die Übertragungswege zwischen Server und Nutzer kürzer, was wiederum schnellere Ladezeiten bedeutet. Diverse Anbieter wie beispielsweise Amazon CloudFront oder Cloudflare bieten verschiedene Lösungen und eine schnelle Einbindung.
Größe der zu übertragenden Website-Daten reduzieren
Um große Website-Daten auf einen Internetbrowser zu übertragen, ist eine längere Ladezeit erforderlich. Deshalb sollte es das Ziel sein, die zu übertragenden Daten möglichst zu reduzieren. Hierfür stehen verschiedene Möglichkeiten zur Auswahl:
Bilder mit Tools wie TinyPNG komprimieren
Bilder gehören mit zu den größten zu übertragenden Dateien einer Website. Dazu zählen unter anderem Logos, Bilder und Grafiken. Mit einer gezielten Komprimierungen sind die Dateigrößen deutlich reduzierbar, was einiges an Ladezeit einspart.
Hierfür stehen Bildkomprimierungs-Tools wie TinyPNG zur Auswahl, die eine einfache Komprimierung mittels Drag & Drop ermöglichen. Websitebetreiber von CMS wie WordPress erhalten gleichzeitig Plug Ins, die direkt nach dem Upload neuer Bilder und Grafiken automatisch mit deren Komprimierung beginnen. Hier sind auch nachträgliche Optimierungen in der Mediathek möglich.
Tipp: Bei der Verwendung von Grafiken fallen PNG-Dateien am kleinsten aus. Sind Bilder/Fotos hochzuladen, hierfür am besten JPEG-Dateien verwenden.
Komprimierung auf dem Server aktivieren
Dank einer serverseitigen Komprimierung sind Dateitypen wie CSS, HTML oder JavaScript komprimierbar. Dabei sind Einsparungen von bis zu 80 % möglich. Dank GNU Zip (auch als GZIP bekannt) erfolgt eine schnelle und einfache Reduzierung der Dateigröße.
Arbeiten Webserver mit der Software Apache oder NGINX, ist GZIP einfach aktivierbar. Auch seitens gängiger Internetbrowser wie Google Chrome oder Mozilla Firefox ist das Verfahren problemlos möglich, indem sie komprimierte Dateien interpretieren und entpacken.
Zusätzlich zu GZIP gibt es noch Brotli. Hiermit ist es im Vergleich möglich, Dateien nochmals besser zu komprimieren. Die Geschwindigkeit der zu verarbeitenden Dateien hingegen bleibt fast gleich.
Alle erforderlichen Website-Daten im Voraus laden
Vorhin sind wir bereits auf das moderne HTTP/2-Protokoll eingegangen. Hiermit ist ein Server dazu in der Lage, wichtige Website-Daten mittels Push bereits im Voraus zu laden.
Zusätzlich zum HTTP/2 besteht die Möglichkeit, alle erforderlichen Elemente über eine alternative Code-Einbindung vorzuladen. Hierfür sind im Header-Bereich des HTML-Codes die entsprechenden Zeilen hinzuzufügen. Dazu zählen je nach Bedarf beispielsweise:
- <link rel=“preload“ href=“logo.svg“ as=“image“>
- <link rel=“preload“ href=“style.css“ as=“style“>
- <link rel=“preload“ href=“main.js“ as=“script“>
Mithilfe dieser Methode sind Elemente wie JavaScript, Schriften, Style-Sheets etc. bereits vorher abrufbar. Dadurch wird die Ladezeit verbessert und kann sich spürbar bemerkbar machen.
Keine überflüssigen bzw. unnötigen Daten laden
Oftmals ist es auch der Fall, dass zusätzlich zu den grundlegenden Elementen einer Website Dateien geladen werden, die hierfür eigentlich gar nicht erforderlich sind. Derartige überflüssige bzw. unnötige Daten gilt es zu vermeiden, da sie den Ladevorgang ausbremsen.
Anstatt sämtliche Elemente mit einem Mal zu laden, sollte viel lieber logisch vorgegangen werden: Es werden nur die Daten und Elemente geladen, die tatsächlich gerade erforderlich sind.
Das funktioniert beispielsweise mithilfe von Lazy-Loading. Dieses Verfahren findet bei Bildern Verwendung und stellt sicher, dass nur Bilder im Sichtbereich geladen werden. Alle anderen außerhalb des Sichtbereiches bleiben außen vor. Scrollt der Nutzer jetzt nach unten, werden erst jetzt die entsprechenden Bilder in diesem Bereich geladen.
Bei Bibliotheken, die CSS oder JavaScript enthalten, läuft es ähnlich. Auch hier werden nicht immer alle enthaltenen Elemente benötigt. Einige Webanwendungen beherrschen hierfür das sogenannte Code-Splitting. Es stellt sicher, dass die jeweiligen Daten in Pakete aufgeteilt werden. Anschließend werden nur die Pakete geladen, die wirklich erforderlich sind.
Umleitungen (Redirects) reduzieren bzw. minimieren
Vor allem bei großen Projekten kommt es häufig vor, dass mit der Zeit zahlreiche Umleitungen (Redirects) eingerichtet werden. Redirects (301-Weiterleitungen) sind beispielsweise sinnvoll und erforderlich, um Duplicate Content zu vermeiden, oder um auf neue Inhalte zu verweisen und dauerhaft darauf umzuleiten.
Allerdings können immer mehr Umleitungen dafür sorgen, dass die Ladezeit darunter leidet. Sind wirklich alle eingerichteten Redirects erforderlich? Können einige alte Weiterleitungen herausgenommen werden? Eine Überprüfung ist unter Umständen sinnvoll.
Besonders kritisch sieht es aus, wenn mehrere Redirects hintereinander eingerichtet sind. Folgt nach einem 301 ein weiteres, muss ein Browser erneut eine Anfrage an den Server stellen. Das kostet unnötige Ladezeit.
Tipp: Website-Betreiber sollten während der Einrichtung und Pflege ihres Projektes die Einrichtung von Redirects stets dokumentieren. So ist im späteren Verlauf einfach nachvollziehbar, wo sich welche Weiterleitungen befinden.
