Nichts kann beim Surfen im Web mehr stören als eine Webseite, die nur sehr langsam lädt. Für Google ist das ebenfalls kein gutes Zeichen und für Shopbetreiber bedeutet jede Millisekunde mehr Ladezeit Einbußen beim Umsatz.
In unserem vollständigen Guide erfährst Du, was PageSpeed bedeutet, wie man ihn misst und warum die Ladegeschwindigkeit so wichtig für Deine Webseite ist. Im Anschluss erklären wir, was den Page Speed ausbremsen kann und wie Du durch gezielte Maßnahmen Ladezeiten optimieren kannst.
Es gibt viele verschiedene Gründe, die für eine schnelle Ladezeit sprechen:
1. Positive User Experience: Laut einer Studie von kissmetrics erwarten knapp die Hälfte aller Internetnutzer eine Ladezeit von weniger als zwei Sekunden. Dauert das Laden mehr als drei Sekunden, springen 40 Prozent der Besucher ab. Je kürzer also Deine Ladezeit desto höher die Verweildauer der Nutzer und desto kleiner die Absprungrate. Eine schlechte Performance der Webseite kann Besucher sogar ganz abschrecken. Laut einer weiteren Umfrage gaben fast 80 Prozent an, dass sie langsame Webseiten kein zweites Mal besuchen würden.
2. SEO-Rankingfaktor:Für Google und andere Suchmaschinen ist eine positive User Experience ein wichtiger Faktor, um die Qualität einer Webseite zu bestimmen. Deshalb wurde der Pagespeed auch von Google zum Rankingfaktor erhoben. Je schneller Deine Webseite lädt, desto höher sind die Chancen auf gute Rankings.
3. Conversion-Rate-Optimierung: Eine Verzögerung der Ladezeit um eine Sekunde kann die Conversions laut einer Studie um bis zu sieben Prozent senken. Was sich im ersten Moment nicht so viel anhört, lässt sich aber anhand einer einfachen Rechnung veranschaulichen. Macht Dein Online-Shop einen Tagesumsatz von 1.000 Euro, kann die Verzögerung der Ladezeit um eine Sekunde Einbußen von 70 Euro pro Tag bringen. Auf den Monat gerechnet, entgehen Dir dadurch 2.100 Euro an Umsatz. Auf das Jahr gerechnet ist eine langsame Webseite somit ein echter Umsatzkiller.
4. Crawling: Langsam ladende Webseiten werden vom Googlebot langsamer und nicht so intensiv gecrawlt, da er nur ein begrenztes Budget für das Crawling zur Verfügung hat. Mit der Ladegeschwindigkeit bestimmst Du somit auch, wie gut Deine Webseite gecrawlt wird und wie aktuell Deine Inhalte im Google-Index sind.
Im Allgemeinen bezeichnet man mit der Ladezeit einer Webseite den in Sekunden gemessene Zeitraum zwischen dem Aufruf und der kompletten Darstellung der Webseite im Browser. Neben der Bezeichnung „Ladezeit“ wird auch der Begriff „Ladegeschwindigkeit“ oder „PageSpeed“ verwendet. Wenn Du im Web nach dem Thema suchst, wirst Du deshalb verschiedene Bezeichnungen für das gleiche Phänomen finden. Die Ladezeit einer Webseite lässt sich zudem in verschiedene Mess-Stationen unterteilen:
Es gibt zahlreiche Methoden, um die Ladezeit einer Webseite zu bestimmen. Du könntest zum Beispiel Deine Server-Logdateien auslesen oder manuell stoppen. Tatsächlich ist ein langsamer Seitenaufbau oftmals relativ, da jeder Nutzer Zeit anders empfindet. Wenn Du jedoch valide Daten verwendest, kannst Du langfristig besser an der Optimierung der Ladegeschwindigkeit arbeiten.
Das Google-Tool zur Messung von Ladezeiten wird stetig aktualisiert und weiterentwickelt. Die fünfte Version von Pagespeed Insights basiert auf Lighthouse, ein Tool zur Website-Optimierung, das auch als Erweiterung im Browser Chrome vorhanden ist. Zudem greift es auf Daten aus CrUX, dem Chrome User Experience Report, zurück.
Nach der Eingabe der Domain wird ein Speed-Score zwischen 0 und 100 berechnet. PageSpeed Insights unterscheidet dabei zwischen einem Score für mobile Endgeräte und Desktop-Computer. Als Standard wird der mobile Score verwendet und der fällt oftmals sehr niedrig aus. Google möchte mit dieser Maßnahme Webseitenbetreiber dazu bewegen, gezielt für die mobile Ausgaben ihrer Webseiten zu optimieren.
Unterhalb des Speed-Cores werden einzelne Mess-Stationen angezeigt. Anhand deren farblicher Codierung lässt sich ausmachen, wo eventuelle Flaschenhälse versteckt sein können.
Abbildung 1: Messwerte von PageSpeed Insights
Wenn Du Deine Webseite mit Google Analytics analysierst, findest Du Zahlen zur Ladezeit im Bereich „Verhalten“. Klicke dann auf „Websitegeschwindigkeit“. Ein Vorteil: Hast Du auch E-Commerce-Tracking installiert, kannst Du direkt auswerten, wie sich die Ladegeschwindigkeit auf die Conversions auswirkt.
Im Tool Website Success von Ryte werden der Time to First Byte und die Gesamtladezeit im Performance Report angezeigt. Besonders gut ist, dass Ryte einen zusätzlichen Messwert separat darstellt, der als Teil des TTFB angesehen wird: Die Verbindungszeit zwischen dem Rechner des Nutzers und dem Webserver. Im Report wird außerdem eingestuft, wie gut die jeweilige Ladezeit ist.
Hierbei handelt es sich um ein Tool, das von Yahoo! entwickelt wurde. Du kannst es als Bookmarklet, Werkzeug für die Kommandozeile oder als Browsererweiterung nutzen. Die Regeln für die Geschwindigkeit basieren auf den Vorgaben von Yahoo!. Durch die Kommandozeilenfunktion ist das Tool auch für fortgeschrittene User interessant.
Dieses Tool erfordert eine Registrierung, damit Du es nutzen kannst. Es zeigt Dir die Ladezeiten Deiner Webseiten in Form von Diagrammen und Statistiken an, was die Auswertung erleichtert. So siehst Du zum Beispiel sehr schnell, welche Elemente das Laden einer Seite behindern.
Abbildung 2: Startseite von Pingdom.com
Das webbasierte Programm verfolgt einen eher kompetitiven Ansatz, denn es vergleicht die Ladezeit von zwei Seiten miteinander. Ähnlich funktioniert auch der Website Speed Ranker, mit dem Du bis zu vier Seiten auf einmal vergleichen kannst.
Prinzipiell gilt, dass eine Webseite weniger als zwei Sekunden laden sollte, um eine zufriedenstellende User Experience zu erzielen. Je kürzer die Ladezeit desto besser. Liegt sie unter einer Sekunde, ist das sehr gut. Wie schnell Deine Webseite lädt, hängt von vielen verschiedenen Faktoren ab. Manche kannst Du durch OnPage-Optimierung verbessern, auf andere hast Du keinen Einfluss.
Auf diese Faktoren hast Du keinen direkten Einfluss:
Diese Faktoren kannst Du beeinflussen:
Noch bevor der Aufruf der Webseite vom Webserver bearbeitet werden kann, muss die Verbindung zwischen diesem und dem Nutzer hergestellt werden. Die hierfür aufgewandte Zeit wird als Verbindungszeit, Latenz oder auch Ping bezeichnet. Mit dem Tool Website Success von Ryte kann diese gemessen werden. Idealerweise beträgt die Latenz unter 100 Millisekunden. Benötigt der Verbindungsaufbau deutlich mehr Zeit, können Maßnahmen zur Optimierung ergriffen werden.
Schnelle DNS-Verbindungen einrichten
Damit der Webserver mit der Webseite gefunden wird, muss die im Browser eingegebene Domain in eine IP-Adresse aufgelöst werden. Aus example.com werden so vier durch Punkte getrennte Zahlen zwischen 0 und 255. Für die Auflösung der Domain sind sogenannte DNS-Server zuständig. In der Regel wird eine Kette von DNS-Servern benötigt, bis die IP-Adresse herausgefunden wird.
Dieser Prozess kann optimiert werden, indem schnellere DNS-Server verwendet werden. Frei nutzbar sind hier beispielsweise die Server mit den IP-Adressen “1.1.1.1” von Cloudflare und “8.8.8.8” von Google. Die Umstellung der DNS-Einträge kann von dem Domain-Provider oder Hoster übernommen werden.
CDN für globale Reichweite
Ist es für Dein Online-Geschäft wichtig, global vertreten zu sein, dann wirst Du schnell feststellen, dass sich die Verbindungszeiten extrem voneinander unterscheiden können, je nachdem, von wo aus die Webseite aufgerufen wird. Das liegt daran, dass die Knotenpunkte bis zu dem Rechenzentrum, in dem Dein Webserver liegt, geographisch zunehmen.
Ein Content Delivery Network, kurz CDN, kann hier Abhilfe schaffen. Das CDN sorgt dafür, dass Deine Webseite in einem globalen Server-Netzwerk zwischengespeichert wird und somit immer eine geringe Anzahl von Knotenpunkten zwischen dem Rechner des Nutzers und dem nächsten Server im CDN liegen. Dieser Service ist mit hohen Kosten verbunden, die sich für Betreiber einer Webseite, die hauptsächlich den deutschsprachigen Raum anspricht, nicht unbedingt rechnen.
Um ein CDN nutzen zu können, musst Du Dich bei einem Anbieter registrieren. Es gibt zwar kostenlose CDN im Web, doch solltest Du genau prüfen, zu welchen Konditionen das Angebot gratis ist. Die kostenpflichtigen Anbieter rechnen in der Regel pro Datenvolumen ab, das über das Netzwerk monatlich genutzt wird.
HTTPS verwenden
Lange Zeit galt, dass ein SSL-Zertifikat die Ladegeschwindigkeit der Webseite verlangsamen würde. Das erklärt sich dadurch, dass mit dem SSL-Handshake eine weitere Hürde beim Verbindungsaufbau mit dem Webserver entsteht. Dabei wird das SSL-Zertifikat verifiziert und die verschlüsselte Verbindung hergestellt.
Mittlerweile hat sich die Situation jedoch geändert. Viele PageSpeed- und Sicherheitsmaßnahmen für die Webseite (z.B. HTTP/2, s.u.) sind überhaupt erst durch ein SSL-Zertifikat möglich. Zudem haben sich SSL-Zertifikate für die Sicherheit, die User Experience und den SEO-Rankingfaktor als Standard durchgesetzt. Falls Du also noch kein SSL-Zertifikat verwendest, solltest Du es unbedingt nachholen. Der Zertifikat-Aussteller Let’s Encrypt bietet diese sogar kostenlos an.
Wenn die Verbindung zum Webserver hergestellt ist, verarbeitet dieser Anfrage und stellt die angeforderten Dateien bereit. Dabei werden auch serverseitige Skripte aufgerufen, die beispielsweise Inhalte aus Datenbanken auslesen und für die Ausgabe bereitstellen.
Flaschenhälse in der Infrastruktur erkennen
Wenn eine Webseite langsam lädt, kann es daran liegen, dass der Webserver und seine zugrundeliegende Infrastruktur überlastet ist. Das kann mehrere Ursachen haben, zum Beispiel weil ein Fehler beim Hoster vorliegt oder weil der Webserver zu viele Anfragen auf einmal beantworten muss.
Wichtig ist, diese Flaschenhälse zu erkennen, um schnell reagieren zu können. Viele Hosting-Lösungen bieten Metriken an, mit denen die Server-Auslastung überwacht werden kann. Von den oben vorgestellten Messwerten kann zudem der “Time to First Byte”, der mit dem Tool Website Success von Ryte gemessen werden kann, hilfreich sein. Steigt er deutlich an, kann es gut sein, dass ein Problem mit dem Webserver vorliegt.
Serverseitiges Caching nutzen
Damit häufig angefragte Inhalte, zum Beispiel Datenbank-Anfragen, nicht immer wieder von Neuem ausgeführt werden müssen, können diese auf dem Server zwischengespeichert werden. Das ist besonders wichtig für Nutzer, die mehrere Artikel lesen oder Produkte anschauen möchten – also in ihrer Session mehrere Seiten aufrufen. Die Ladezeiten nach dem ersten Seitenaufruf können so vermindert werden.
In den Einstellungen der Webserver-Software – am häufigsten werden Apache HTTP Server und Nginx verwendet – lassen sich serverseitiges Caching aktivieren und einrichten. Solltest Du dazu nicht die nötigen Kenntnisse besitzen, kannst Du Deinen Hosting-Anbieter danach fragen oder Caching und andere PageSpeed-Maßnahmen durch einen automatisierten Cloud-Service vornehmen lassen (s.u.).
Verwende Browser-Caching
Mit Hilfe von Browser-Caching werden Elemente Deiner Webseite nicht wie beim Server-Caching vom Webserver zwischengespeichert, sondern vom einem Webbrowser. Somit müssen beim Abruf einer neuen URL Deiner Webseite nicht erneut alle Elemente geladen werden. Dadurch wird die Ladegeschwindigkeit erhöht.
Browser-Caching lässt sich bei vielen CMS über Plugins oder Erweiterungen aktivieren. Durch sogenannte Cache-Buster kann vermieden werden, dass bei Aktualisierungen des Contents die alten Versionen der Webseite bei den Nutzern weiterlaufen.
Die manuelle Aktivierung von Browser-Caching erfolgt über eine Anpassung der Webserver-Konfiguration (s.o.). Dafür kannst Du eines von zwei Modulen des Apache-Servers einschalten: mod_headers und mod_expires.
Verwendest Du mod_headers, muss die .htaccess um folgenden Code ergänzt werden (Quelle GitHub):
<FilesMatch “\.(css|js|gif|pdf|jpg|jpeg|png)$“>
Header set Cache-Control “max-age=2592000, public“
</FilesMatch>
Die runden Klammern beziehen sich auf die Dateiformate, welche in den Cache gelegt werden sollen. Zugleich wird die Dauer des Caches mit „age“ angegeben. Die Einheit sind Sekunden. Bei diesem Beispiel sind das umgerechnet 30 Tage, die der Cache vom Browser gespeichert bleiben soll.
Möchtest Du mod_expires zum Browser-Caching nutzen, wird die Konfiguration um folgende Zeilen erweitert (Quelle GitHub):
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year“
ExpiresByType image/jpeg “access plus 1 year“
ExpiresByType image/gif “access plus 1 year“
ExpiresByType image/png “access plus 1 year“
ExpiresByType text/css “access plus 1 month“
ExpiresByType text/html “access plus 1 month“
ExpiresByType application/pdf “access plus 1 month“
ExpiresByType text/x-javascript “access plus 1 month“
ExpiresByType application/x-shockwave-flash “access plus 1 month“
ExpiresByType image/x-icon “access plus 1 year“
ExpiresDefault “access plus 1 month“
Mit dieser Methode lässt sich für jeden Dateityp separat eine Ablaufzeit bestimmen.
Wie schon beschrieben können Dateien dann am schnellsten verarbeitet und gesendet werden, wenn sie so klein wie möglich sind. Das gilt auch für den Code, der die Webseite im Browser des Nutzers darstellen soll. Wie eine Zip-Datei lässt sich dieser Code komprimieren und damit verkleinern. Im Browser werden die komprimierten Daten dann entpackt.
Unter Ladezeit-Optimieren wurde diese Methode lange Zeit skeptisch beäugt, denn um Dateien zu komprimieren, ist Rechenleistung des Webservers notwendig. Jede Rechenleistung des Webservers kostet wiederum Ladezeit. Der Nutzen überwiegt hier aber bei weitem den Aufwand, daher solltest Du darauf zurückgreifen.
Wie kann ich Dateien mit GZip komprimieren?
Am Beispiel der meistgenutzten Webserver-Software Apache zeigen wir Dir, wie Du die GZip-Komprimierung aktivieren kannst. Dabei kommen die Module mod_deflate und mod_gzip zum Einsatz.
1. Das Modul mod_deflate ist meist vorinstalliert. Mit folgendem Konsolen-Kommando kannst Du checken, ob es bereits vorhanden ist:
sudo apachectl -t -D DUMP_MODULES | grep deflate
Bekommst Du die Ausgabe “deflate_module (shared)”, dann ist mod_deflate bereits installiert. Kontaktiere ansonsten Deinen Hoster.
2. Öffne nun “httpd.conf”, die Konfigurationsdatei von Apache. Diese findest Du in der Regel im Ordner “/etc/httpd/conf/”. Dort fügst Du folgende Zeile hinzu:
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
application/javascript
Damit gibst Du an, dass der Text sowie der HTML-, CSS- und JavaScript-Code mit GZip komprimiert wird. Speichere die Datei und starte den Apache-Webserver neu. Von nun an werden die Daten durch Apache komprimiert.
Standardmäßig werden alle Dateien der Webseite (z.B. Bilder und Skripte) über das Protokoll HTTP/1.1 geladen. Dabei werden diese nacheinander über eine jeweils eigene Verbindung heruntergeladen. Das kannst Du Dir so vorstellen, als wolltest Du mehrere Pizzen bestellen und der Lieferbote würde jede Pizza einzeln liefern.
Das ist natürlich unpraktisch und verlangsamt den Ladeprozess. Mit einem SSL-Zertifikat lässt sich der Webserver auf das Protokoll HTTP/2 umstellen. Über HTTP/2 werden alle Dateien über eine einzige Verbindung heruntergeladen. Zudem werden sie dabei priorisiert. Mittlerweile unterstützen alle gängigen Browser das Protokoll, sodass Du bedenkenlos damit arbeiten kannst.
Den proportional größten Teil des Downloadvolumens einer Webseite machen Bilder aus. Das gilt umsomehr für Onlineshops mit vielen Produkten und Portfolio-Webseiten, besonders von Fotografen. Wer es also schafft, die Dateigrößen seiner Bilder deutlich zu verringern, der kann deutlich an Page Speed zulegen. Auf Ryte haben wir bereits einen umfangreichen Artikel zur Bildkompression geschrieben. Hier folgt daher Zusammenfassung.
Bilder sind wichtig, damit eine Webseite anschaulich und attraktiv für Deine Nutzer wird. Doch gerade Bilder bergen die Gefahr, dass sich die Dateigröße Deiner Webseite enorm erhöht und dadurch die Ladezeit verzögert wird. Deshalb solltest Du grundsätzlich nur Bilder verwenden, die für die Webnutzung optimiert sind. Generell gilt: Fotos und hochwertige Grafiken sollten als JPEG-Dateien und kleinere Grafiken und Grafiken mit wenigen Farben oder Transparenzen als PNG-Datei.
Weitere Schritte:
Google hat mit WebP ein neues Bildformat erstellt, das Bilder sowohl verlustfrei (ähnlich wie PNG) oder verlustbehaftet (ähnlich wie JPEG) komprimieren kann. Dabei ist es noch effizienter als die altgedienten Formate und könnte sich somit in Zukunft durchsetzen. Noch unterstützen nicht alle Browser WebP. Daher ist es sinnvoll, im Quellcode Alternativen für WebP-Dateien zu hinterlegen und eine Weiche einzubauen. Dies funktioniert wie im folgenden Beispiel:
<picture>
<source srcset=“img/testbild.webp“ type=“image/webp“>
<source srcset=“img/testbild2.jpg“ type=“image/jpeg“>
<img src=“img/testbild2.jpg“ alt=“Fallback-Bild“>
</picture>
In Zukunft werden mehr als die Hälfte aller Nutzer Webseiten über ein mobiles Endgerät aufrufen statt über einen Desktop-Computer. Die Ansprüche an Bilder sind dabei auf beiden Ausgabemedien sehr verschieden. Auf dem Desktop liegt meist eine gute Internetverbindung vor und auf großen HD-Monitoren wünscht sich der Nutzer entsprechend hochaufgelöste Bilder in bester Qualität.
Auf mobilen Endgeräten werden Webseiten dagegen oft unterwegs und damit nicht bei höchster Bandbreite aufgerufen. Durch das kleine Display sind die Ansprüche an die Qualität zudem geringer. Außerdem werden Bilder aufgrund des Bildschirmformates in einer anderen Auflösung als auf dem Desktop dargestellt. Es ergibt also Sinn, zwischen den Ausgabemedien zu unterscheiden und zwei Varianten eines Bildes anzulegen.
Ähnlich wie im vorangegangen Beispiel zu WebP lassen sich auch hierfür Weichen im Code der Webseite hinterlegen. Mit CSS lässt sich beispielsweise die Bildschirmauflösung abfragen und damit die Darstellung an das Ausgabemedium anpassen.
Gerade Shopbetreiber und Fotografen werden das Problem kennen: In Produktübersichten und Fotogalerien werden viele Bilder auf einmal dargestellt, was die Ladezeit der Webseite in die Knie zwingt. Für Onlineshops ist dies besonders ärgerlich, weil es sich dabei oft um die Hauptstartseite oder die Startseiten der Produktkategorien handelt.
Viele der Bilder, die so geladen werden, sind aber für den Nutzer erst sichtbar, wenn er auf der Seite herunterscrollt. Es ist also gar nicht notwendig, dass diese bereits geladen sind, wenn der Nutzer den Teil “above the fold” betrachtet. Mit einer Methode, die “Lazy Loading” genannt wird, kann man dafür sorgen, dass die Bilder unterhalb des Folds erst dann geladen werden, wenn sie tatsächlich auf dem Viewport erscheinen.
Beim Abruf einer Webseite folgt ein Client oder ein Browser dem Quellcode des HTML-Dokuments Zeile für Zeile. Alle Leerzeichen oder Zeilenumbrüche werden dabei mit ausgelesen. Ein überflüssiges Leerzeichen wird die Performance Deiner Webseite sicherlich nicht negativ beeinflussen. Da eine Webseite je nach Umfang aus mehreren hundert Zeilen Quellcode bestehen kann, wirken sich überflüssige Leerzeichen oder Kommentare schon deutlicher auf die Ladezeit aus.
So startest Du die “Minification” des Quellcodes:
Um überflüssigen Quellcode zu vermeiden, solltest Du Texte immer entweder schon als HTML formatiert in die Webseite einfügen, den Editor des CMS verwenden oder die Texte als Plain Text einfügen und dann formatieren. Wenn Du Texte direkt aus Word oder anderen Officeprogrammen direkt ins CMS einbindest, strotzen diese vor überflüssigem Quellcode.
Darüber hinaus gibt es Programme, die über die Kommandozeile aufgerufen werden, um alle Leerzeichen und Kommentare aus dem Quellcode zu entfernen. Möchtest Du diese Programme nutzen, solltest Du auf jeden Fall eine Kopie zur Bearbeitung zurückhalten, da die so minifizierte Datei kaum noch lesbar ist.
Ob Sharebuttons oder Trackingcodes, externe Skripte können in ganz unterschiedlicher Ausführung und zu unterschiedlichen Zwecken auf Deiner Webseite eingebunden sein. Dadurch machst Du Dich allerdings von der Verfügbarkeit dieser Skripte von einer anderen Quelle abhängig. Ist der Webserver, von dem das Skript abgerufen wird, besonders langsam, bremst dies auch die Ladezeit Deiner Webseite aus. Prüfe daher, ob Du diese Skripte wirklich benötigst.
Weitere Tipps:
JavaScript ist eine Skriptsprache, mit der Funktionen im Browser und damit auf dem Client-Rechner ausgeführt werden können. Mit CSS (Cascading Style Sheets) lassen sich Formate und Darstellungen für die Webseite definieren. Für diese Elemente wird viel Quellcode benötigt, der mit jedem Seitenaufruf erneut ausgelesen werden muss. Das kostet Zeit.
Um den Quellcode zu reduzieren, kannst Du CSS- und JavaScript-Dateien auslagern. Sie werden dann in einem Dokument zusammengeführt. Dafür ist dann nur noch ein Abruf nötig. Wenn der Browser die Datei in den Zwischenspeicher (Cache) lädt, kann die Ladezeit nochmals reduziert werden.
So kannst Du JavaScript auslagern:
Lass Dir den Quellcode Deiner Website mit einem Editor anzeigen. Schneide dann alle JS-Dateien aus und erstelle eine neue Textdatei, in welche Du alle Code-Schnipsel einfügst. Speichere die Datei als main.js ab und hinterlege sie auf Deinem Server in dem Ordner, wo alle anderen HTML-Dateien zu finden sind.Im HTML-Code der Webseite entfernst Du folgende Befehle:
und
Die gelöschten Befehle ersetzt Du durch diesen Befehl:
Wie beim HTML-Code Du kannst die Größe von CSS und JavaScript verringern, indem Du zum Beispiel unnötige Leerzeichen entfernst. Diese werden auch “Whitespaces” genannt. Auf diese Weise lässt sich der Quellcode zum Beispiel auf nur eine Zeile reduzieren.
Code-Snippet mit vorhandenen Leerzeichen und Zeilenumbrüchen:
CSS Code ohne Zeilenumbrüche:
CSS Code ohne Zeilenumbrüche:
Auch hierbei ist zu beachten, dass die Lesbarkeit durch das Entfernen von Leerzeichen und Kommentaren stark abnimmt. Idealerweise solltest Du also mit zwei Versionen arbeiten: Einer Version mit allen Leerzeichen und Kommentaren, die Du bearbeiten kannst und eine Version für die Darstellung auf der Webseite. Damit Du nicht bei jeder Änderung doppelte Arbeit machen musst, kannst Du zur “Minifizierung” auch Programme verwenden, z.B.:
Deine Webseite wird erst dann vollständig angezeigt, wenn alle JavaScript- und CSS-Dateien geladen wurden. Um den Ladevorgang zu beschleunigen, kannst Du JavaScript und CSS erst am Ende des HTML-Codes einfügen. Selbst wenn der Server langsam ist, wird der Seitenaufbau erst einmal nicht beeinträchtigt. Die ideale Position für CSS-Dateien ist deshalb im <head>-Bereich der Webseite. JavaScript solltest Du hingegen im Footer der Webseite einbauen.
Eine mögliche Einbindung der Dateien kann so aussehen:
Jedes Bild, das auf Deiner Webseite verwendet wird, benötige mehrere Zeilen Code. Dieser Code wird beim Seitenabruf Zeile für Zeile ausgelesen. Wenn Du nun Buttons, Icons oder Hintergründe als Grafiken hinterlegst, benötigt ein Browser viel Zeit, um Deine Webseite zu laden. Die Lösung besteht darin, alle grafischen Elemente außer Fotos per CSS3 zu erzeugen. Auf diese Weise reduzierst Du den Quellcode. Zugleich können die Dateien auf allen Endgeräten in gleich hoher Qualität angezeigt werden.
Wenn Du die Prefetching-Technik einsetzt, speichert Dein Browser bestimmte Elemente der Webseite in den Cache, schon bevor die Seite komplett geladen wurde. Somit können Bilder, Grafiken oder JavaScript und CSS geladen werden, ohne das Rendering der Webseite zu behindern. Um eine Datei zu prefetchen, musst Du den Quellcode anpassen. In diesem Fall wird vor das gewünschte Element das Attribut rel=”prefetch” gesetzt.
Ein Beispiel:
<link rel=“prefetch“ href=“//meineseite.de/beispielbild.jpg“>
Hier wird das Beispiel schon vor dem Aufruf einer weiteren Seite mitgeladen. Die Ladezeit beim neuen Seitenaufruf wird dadurch verkürzt. Nutzt Du die Prerendering-Methode, wird eine komplette Webseite im Voraus vom Browser heruntergeladen und im Cache zwischengespeichert. Darin eingeschlossen sind alle Dateien, die für das komplette Rendering benötigt werden.
Die im Voraus gerenderte Webseite kann bei einem Aufruf fast ohne Verzögerung geladen werden. Die Ladezeit wird dabei auf weniger als 50 Millisekunden gekürzt. Um das Prerendering zu implementieren, musst Du folgenden Zeile im Quellcode der betreffenden Webseite einfügen:
<link rel=“prerender“ href=“//prerendering-seite.de/verzeichnis“>
Noch mehr Details und Insights zum Thema Prerendering und Prefetching findest Du in diesem Beitrag.
301-Weiterleitungen sind zwar sinnvoll, um Duplicate Content zu vermeiden oder nicht mehr benötigte URLs auf neue URLs nach einem Relaunch umzuleiten, doch erhöht jede Weiterleitung die Ladegeschwindigkeit. Zwar ist die Verzögerung pro Weiterleitung nicht sehr lang, doch spürbar. Denn jedes Mal, wenn ein Browser auf eine Weiterleitung trifft, muss er eine neue URL aufrufen. Danach muss er zunächst warten, bis ein http-request zurückgegeben wurde.
Wenn dann noch mehrere 301-Redirects hintereinander erfolgen, kann sich die Ladezeit deutlich erhöhen. Darüber hinaus folgt der Googlebot nur maximal drei Weiterleitungen, sodass eine Verkettung von Redirects auch für das Crawling von Nachteil ist.
Um viele Weiterleitungen zu vermeiden, solltest Du die URL-Struktur oder den Aufbau von neuen URLs dokumentieren. Gleiches gilt für eingerichtete 301-Redirects. Findest Du bei der Analyse Deiner Webseite mehrere Weiterleitungen hintereinander, solltest Du die erste Weiterleitung direkt auf das eigentliche Linkziel führen, ohne den Umweg über eine oder mehrere Redirects.
Greift ein Client wie ein Webbrowser auf Deine Seite zu, werden für jede Ressource Requests gestellt, um die Datei anzeigen zu können. Wenn diese Ressourcen in Form von Bildern oder JavaScript-Dateien jedoch nicht gefunden werden, führt das zu einer Reaktionskette, die Ladezeit verschwendet. Bad Requests kannst Du einfach vermeiden, indem Du fehlerhafte Dateien korrigierst und den korrekten Pfad angibst oder Du auf eine neue Datei weiterleitest.
Google bietet Webmastern mit Accelerated Mobile Pages die Möglichkeit, mobile Webseiten nahezu ohne Verzögerung zu laden. Zu diesem Zweck müssen die Seiten bestimmte Voraussetzungen erfüllen, damit sie auf Mobilgeräten angezeigt werden können.
Viele CMS wie WordPress ermögliche die Nutzung von AMP mit Hilfe von Plugins. Eine ausführliche Beschreibung zur Technik und zur Umsetzung findest Du hier im Ryte Magazin. Bis dato können AMP noch nicht für Online-Shops genutzt werden. Es ist von den Entwicklern jedoch angedacht.
In diesem Guide hast Du viele Maßnahmen zur Verbesserung des Page Speeds kennengelernt. Die meisten dieser Maßnahmen setzen jedoch voraus, dass Du die technischen Kenntnisse und die Zeit für die Umsetzung hast. Sollte eine dieser beiden Dinge eine Hürde für Dich darstellen, kannst Du die PageSpeed Optimierung auch einem automatisierten Service überlassen.
Der Cloud-Service zur automatisierten PageSpeed Optimierung wao.io funktioniert dabei beispielsweise so: Wie ein Content Delivery Network speichert wao.io die Webseite zwischen und führt dabei die Maßnahmen durch, die Du über ein Menü festlegen kannst. Neben einer intelligenten Bildkompression und Code-Minifizierung gehören dazu auch fortgeschrittene Maßnahmen wie Lazy Loading.
Abbildung 3: Lazy Loading und andere Optimierungen in wao.io
Dazu schützt wao.io auch vor Sicherheitsattacken und bietet Metriken zur Webseitenüberwachung sowie Nutzerzahlen.
Eine Webseite verfügt über viele mögliche Stellschrauben, an welchen Du drehen kannst, um die Ladezeit der Seite zu verbessern. In diesem Artikel hast Du ein paar Möglichkeiten näher kennen gelernt. Einige Methoden sind auch von Einsteigern und SEO-Neulingen sehr einfach umzusetzen. Somit kann jeder seine Webseite schneller machen und für glücklichere Nutzer und Suchmaschinen sorgen.
In diesem Sinne: Happy Optimizing!
Theorie ist gut – Praxis ist besser! Jetzt Page Speed analysieren und optimieren mit Ryte FREE!
Los geht’s!Veröffentlicht am 14.04.2019 von Roland Guelle.
Roland Guelle ist als CTO der 1999 gegründeten Sevenval Technologies GmbH verantwortlich für Forschung und Entwicklung. Mit rund 170 Mitarbeitern in Köln und Berlin hat sich Sevenval auf Frontend Lösungen spezialisiert, die eine moderne, schnelle und vor allem sichere User Experience auch auf Basis historisch gewachsener IT-Systemlandschaften ermöglichen. Roland entwickelt auch heute noch selbst und spricht gerne auf Entwickler-Konferenzen.
Jetzt Gastautor werden »
Entdecke Ryte und optimiere Deine Website nachhaltig!
Jetzt loslegen
Pingback: Suchmaschinenoptimierung: KMU scheitern schon an SEO-Grundlagen()
Pingback: ᐅ Lokale Suchmaschinenoptimierung: SEO-Grundlagen & Checkliste zum Download!()
Pingback: Problem mit der Ladezeit deiner Webseite? - Planet of Users()
Pingback: In vier Schritten zur optimalen Kampagnen-Landingpage()
Pingback: Pagespeed | Marco Heinen()
Pingback: Die 7 wichtigsten SEO-Aufgaben - Logdigital()