PageSpeed Optimierung: Wie kann ich meine Website Ladezeit verbessern?

In unserem 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.

Inhalt:

• Warum ist die Ladezeit meiner Website wichtig?
• Wie wird PageSpeed gemessen? 
• PageSpeed optimieren – so geht’s
• Schnelle Verbindungszeiten schaffen
• Den Webserver für PageSpeed optimieren
• Gzip Komprimierung
• Bilder komprimieren
• OnPage-Maßnahmen für eine schnelle Webseite
• Automatisierte PageSpeed Optimierung

Warum ist die Ladezeit meiner Website wichtig?

Je schneller die Ladezeit Deiner Website, desto positiver erleben Nutzer Deine Seiten, was sich wiederum positiv auf Deine Conversion-Rate und auf Deine SEO-Rankings auswirkt. Es gibt also mehrere gute Gründe, Dich um die Ladegeschwindigkeit Deiner Website zu kümmern:

1. Positive User Experience: Laut einer Studie von kissmetrics erwarten knapp die Hälfte aller Internetnutzer, dass eine Webseite innerhalb von zwei Sekunden lädt. 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: Verzögert sich das Laden einer URL um eine Sekunde, können die Conversions laut einer Studie um bis zu sieben Prozent sinken. 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.

Wie wird PageSpeed gemessen?

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. Wie lang eine Website für den Seitenaufbau braucht, lässt sich zudem in verschiedene Mess-Stationen unterteilen:

• Time to First Byte (TTFB): Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte.
• First Contentful Paint (FCP): Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird.
• First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer das Gefühl hat, dass die Website geladen ist.
• Time to Interactive (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Nutzereingabe ist.

Um die Ladeperformance von Websites noch besser messen zu können, hat Google im Sommer 2021 außerdem die Core Web Vitals eingeführt. Die drei neuen Kennzahlen Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shifts (CLS) sind Teil des Page Experience Ranking-Signals und messen die Ladegeschwindigkeit, Interaktivität und visuelle Stabilität beim Aufrufen einer Seite:

• Largest Contentful Paint (LCP): Misst die Zeit vom Aufrufen der URL durch den Nutzer bis zum vollständigen Rendern des größten sichtbaren Inhaltselements im Darstellungsbereich.
• First Input Delay (FID): Misst die Zeit von der ersten Interaktion des Nutzers mit Ihrer Seite bis zum Reagieren des Browsers auf diese Interaktion.
• Cumulative Layout Shifts (CLS): Gibt die Gesamtsumme der einzelnen Werte für alle unerwarteten Layoutverschiebungen an, die während der Lebensdauer einer Seite auftreten. Diese Metrik misst also nicht direkt die Geschwindigkeit, ist aber ebenfalls ein wichtiger Faktor bei der Optimierung deiner Web Performance.

Wie man Page Speed am besten messen kann, habe ich ausführlich in einem separaten Artikel im Ryte Magazine beschrieben. Schau vorbei, wenn Du mehr Infos dazu brauchst.

Wie schnell muss meine Webseite sein?

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 Website Performance Faktoren hast Du keinen direkten Einfluss:

• Bandbreite: Die Ladezeit Deiner Webseite wird durch die vorhandene Internet-Bandbreite beeinflusst. Mit einer 3G-Verbindung und einem Smartphone wird sich die Webseite langsamer aufbauen als mit einem schnellen DSL-Anschluss.
• Browsercache: Wenn ein Nutzer einen Browser verwendet, dessen Cache schon lange nicht mehr geleert wurde, kann sich der Seitenaufbau stark verzögern, weil der Arbeitsspeicher des Rechners nicht mehr ausreicht, um die Datenmenge zu verarbeiten.
• Rechenleistung des Clients: Auf älteren Desktop-Computern und Smartphones kann es zu Verzögerungen beim Seitenaufbau kommen, da der Aufbau des DOM und die Ausführung von Skripten durch zu wenig Arbeitsspeicher und Prozessorleistung verlangsamt werden.

Diese Website Performance Faktoren kannst Du direkt beeinflussen:

• Dateigrößen: Die Größe Deiner Webseite bestimmt, wie schnell sie geladen werden kann. Darunter fällt nicht nur der HTML-Code an sich, sondern auch Stylesheet- und Skript-Dateien sowie Bilder. Je geringer die Größe dieser Dateien ist, desto schneller kann die Seite laden.

Rechenleistung des Servers: Wird eine Webseite aufgerufen, bearbeitet der Webserver die Anfrage. Auch hier gilt: Müssen weniger Daten angefordert werden, erfolgt die Bearbeitung auch schneller. Erfolgen bei hohem Traffic der Webseite viele Anfragen gleichzeitig, können Arbeitsspeicher und Prozessorleistung zu stark ausgelastet werden und somit zum Flaschenhals für die Ladezeit werden. In diesem Fall sollten die Kapazitäten nach oben angepasst werden.

Page Speed optimieren – so gehts

Die Page Speed kann durch verschiedene Maßnahmen verbessert werden, darunter das Schaffen schnellerer Verbindungszeiten, die Optimierung des Webservers, Code- und Bildkomprimierung und andere Onpage-Optimierungen. Schauen wir uns diese Punkte genauer an:

Schnelle Verbindungszeiten durch CDN

Noch bevor der Aufruf der Webseite vom Webserver bearbeitet werden kann, muss die Verbindung zwischen diesem und dem Nutzer hergestellt werden. Falls Deine Website global vertreten ist, hast Du sicher schon festgestellt, dass sich 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.

Eine Möglichkeit, für schnellere Verbindungszeiten zu sorgen bietet ein Content Delivery Network, kurz CDN. 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.

Bekannte CDN-Anbieter sind: 

• Amazon Cloudfront
• Cloudflare
• Stackpath
• wao.io

Den Webserver für PageSpeed optimieren

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.

1. 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 ebenfalls mit dem Ryte „Load Times“-Report unter Performance gemessen werden kann, hilfreich sein. Steigt er deutlich an, kann es gut sein, dass ein Problem mit dem Webserver vorliegt.

2. 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.).

3. 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.

Plugins für das Browser-Caching mit WordPress:

• WP Rocket
• W3 Total Cache
• WP Fastest Cache

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.

GZip-Komprimierung verwenden

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 Zeit. 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.

Bilder komprimieren für schnellere Ladezeiten

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. Im Ryte Magazine haben wir bereits einen umfangreichen Artikel zur Bildkompression geschrieben. Hier folgt daher Zusammenfassung.

Alle Bilder optimieren

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:

• Komprimiere Deine Bilder vor der Verwendung auf der Webseite mit einem Bildbearbeitungsprogramm wie Gimp oder Adobe Photoshop. Beide Programme bieten für Anfänger eine Funktion “fürs Web speichern”. Damit wir die Dateigröße automatisch optimiert. Mit Tools wie PNGGauntlet lassen sich die Dateigrößen durch Entfernen von Zusatzinformationen nochmals reduzieren.
• Gib im Quellcode die entsprechende Bildgröße an: Wenn ein Browser die Maße von Grafiken selbst berechnen muss, kann das Ladezeit kosten. Die angegebene Größe sollte der Originalgröße des auf dem Server hinterlegten Bildes entsprechen. Die Ausgabe der Bildgröße kannst Du auch über CSS definieren.
• Meta-Tags und EXIF-Daten entfernen: Wenn Du zum Beispiel Bilder von der eigenen Kamera oder dem Smartphone verwendest, verfügen diese über zahlreiche Zusatzinfos wie Aufnahmeort, verwendete Kamera und andere Daten. Mit einem Tool wie tinypng kannst Du diese entfernen und Speicherplatz sparen.

WebP nutzen

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>

Zwischen Desktop und mobil unterscheiden

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.

Lazy Loading einrichten

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.

OnPage-Maßnahmen für eine schnelle Webseite

Quellcode “aufräumen”

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:

• • Beseitige alle unnötigen Kommentare im Quellcode
  • Entferne alle überflüssigen Leerzeichen
  • Lösche nicht benötigte Formatierungen, wenn zum Beispiel eine Formatierung ohne Inhalt im Quellcode steht wie “<strong></strong>”

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.

Externe Skripte verringern

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:

• • Nutze ausschließlich asynchrone Trackingcodes. Sie laden erst, nachdem die Seite gerendert wurde und behindern den Seitenaufbau nicht.
  • Verwende zum Beispiel Tools wie den Google Tag Manager. In diesem Fall muss nur ein Code-Schnipsel für viele verschiedene Trackingvarianten in den Quellcode der Seite eingebunden werden. Dadurch wird die Ladezeit noch weniger beeinträchtigt.
  • Sofern es möglich ist, solltest Du die Skripte auf Deinem Webserver hinterlegen und sie nicht von außen einbinden.
  • Verringere die Zahl von iframes.

JavaScript und CSS auslagern

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:

CSS und JavaScript-Dateien minimieren

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:

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.:

• • • YUI Compressor oder cssmin.js für CSS-Dateien
    • Closure Compiler für JavaScript.

JavaScript und CSS am Ende laden

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:

CSS3 für Hintergründe verwenden

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.

Prefetching und Prerendering nutzen

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 reduzieren

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.

Bad Requests vermeiden

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.

AMP verwenden

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.

Weitere Hinweise:

• Homepage des AMP-Projekts
• WordPress-AMP-Plugins

Automatisierte PageSpeed Optimierung

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.

Wir arbeiten viel an waos Security-Features, mit denen wir wao-Kunden vor unerwünschten/bösen Angreifern schützen wollen, in dem wir diese frühzeitig erkennen und weitere Anfragen von ihnen blockieren. Eine Herausforderung dabei ist es, unerwünschte/böse Angreifer von erwünschten/guten Nutzern zu unterscheiden. Um uns bei dieser Klassifikation zu helfen, haben wir einige KI-Modelle trainiert. Grundüberlegung ist die, dass Angreifer ein anderes Anfrage-Profil haben als legitime Nutzer, und dass eine KI das viel besser unterscheiden kann als wir Menschen.Hintergrund dazu kannst Du hier lesen.

Anbieter-Übersicht:

• wao.io
• Akamai
• kraken.io

Fazit: Pagespeed optimieren ist gar nicht so schwer

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!