Erfolgreiche Websites laden schnell! Mit unseren 22 Profi-Tipps zur PageSpeed Optimierung erhöhen Sie die Conversion Rate und das Ranking Ihrer Website.
Darum ist PageSpeed Optimierung so wichtig
Mit PageSpeed wird die Geschwindigkeit gemessen, mit der eine Website beim Aufruf lädt. Der Name leitet sich von Google PageSpeed Insights ab, einem Mess-Tool für Seitenladezeiten. PageSpeed hat einen enormen Einfluss auf den Erfolg von Websites.
5 Erfolgsfaktoren schneller Websites
- Langsame Shops haben eine höhere Absprungrate! Lädt ein Shop länger als 1 Sekunde, steigt die Wahrscheinlichkeit, dass Nutzer abspringen. Das hat Google in einer Studie herausgefunden: Bei 3 Sekunden Ladezeit steigt die Bounce Rate etwa um ein Drittel. Bei 6 Sekunden steigt sie schon um das Doppelte!
- Schnelle Shops gewinnen mehr Kunden und machen mehr Gewinn! Je schneller ein Shop lädt, desto eher werden Nutzer zu zahlenden Kunden. Amazon senkte seine Ladezeit um nur 0,1 Sekunden und steigerte seine Conversion Rate um 1 Prozent. Das Gleiche tat Zalando und machte dadurch 0,7 Prozent mehr Gewinn!
- Google bevorzugt schnell ladende Webseiten! Seit 2010 ist die Ladegeschwindigkeit Teil des Google-Algorithmus zur Festlegung des Rankings. Mit PageSpeed Insights stellt der Suchmaschinenriese ein Werkzeug zur Messung der Ladezeit bereit. Seit 2018 zählt die mobile Ladezeit für das Ranking.
- Viele Nutzer sind mittlerweile mobil! 2017 nutzten erstmals mehr Menschen das Internet über mobile Endgeräte als über stationäre. Mobile Bandbreiten bleiben in Deutschland noch hinter den Geschwindigkeiten von Hausanschlüssen zurück. Für Website-Betreiber bedeutet dies, dass sie ihr Angebot auch mobil optimieren müssen.
- Der Konkurrenz einen entscheidenden Schritt voraus! Viele Website-Betreiber haben die Seitenladezeit noch nicht als wichtige Stellschraube erkannt. Nur 5 Prozent der meistbesuchten Webseiten aus Deutschland laden unter 1 Sekunde. Durch Fokus auf schnelle Ladezeiten kann man der Konkurrenz so einen Schritt voraus sein.
Erfahren Sie mehr über den SEO-Rankingfaktor Page Speed
Wie wird PageSpeed gemessen?
Um den Vorher-Nachher-Effekt zu messen und den Vergleich zur Konkurrenz zu suchen, eignen sich mehrere Tools zur PageSpeed-Messung. Diese haben wir ausführlich in einem Ratgeber zu Website Speed Tests für Sie gesammelt und erläutert.
Die 4 wichtigsten Tipps für mehr Ladegeschwindigkeit
Es gibt viele Stellschrauben, an denen Sie drehen können, um mehr Ladegeschwindigkeit für Ihre Website zu erzielen. Wir zeigen Ihnen zunächst unsere Top-Tipps mit der höchsten Auswirkung auf die Website-Geschwindigkeit.
Tipp 1: Bilder und Fotos komprimieren
Auf vielen Websites und besonders in Shops sind Bilder und Fotos die größten Ladezeit-Fresser. Großflächige Hero-Images, detaillierte Produktbilder mit Zoom-Funktion – Nutzer erwarten ein ansprechendes grafisches Angebot und Website-Betreiber können somit nicht darauf verzichten.
Um Ladezeiten durch die Übertragung von Bildern zu verringern, müssen diese in ihrer Dateigröße verkleinert werden. Dies lässt sich durch Komprimierung erzielen. Der Vorteil dabei ist, dass Bildgröße und Auflösung erhalten bleiben. Allerdings darf das Bild durch Komprimierung nicht in seiner optischen Qualität gemindert werden.
Die meisten Bilder werden im JPEG-Format abgespeichert. Dieses Format verfügt über eine Qualitätsstufe von 0 bis 100, über die die Komprimierung vorgenommen werden kann. Wichtig ist, dass es keinen Pauschalwert gibt, zu dem ein Bild “richtig” optimiert ist. Dies muss individuell betrachtet werden.
Möglichkeiten die Qualitätsstufe von JPEGs zu komprimieren:
- Manuell einzelne Bilder komprimieren mit Software oder Web-Tools
- Mit Stapelverarbeitung gleich mehrere Bilder komprimieren
- Plugins zur einheitlichen Komprimierung auf eine feste Qualitätsstufe einsetzen
- Services wie wao.io zur automatisierten individuellen Komprimierung einsetzen
Sollte Ihre Website nur über sehr wenige Bilder verfügen, ist eine manuelle Bildoptimierung sinnvoll. Bei Onlineshops mit vielen Produkten rechnet sich jedoch der Aufwand nicht, der in die individuelle Optimierung gesteckt werden muss. Hier ist der Einsatz einer professionellen Lösung ratsam.
Erfahren Sie mehr darüber, wie Sie Bilder komprimieren können
Tipp 2: Lazy Loading verwenden
Shopbetreiber und Fotografen werden das Problem kennen: In Produktübersichten und Fotogalerien werden viele Bilder auf einmal dargestellt, was die Ladezeit der Website in die Knie zwingt. Für Onlineshops ist dies besonders ärgerlich, weil es sich dabei oft um die Startseite oder die Kategorieübersichten 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 Load” oder “Lazy Loading” genannt wird, kann man dafür sorgen, dass die Bilder unterhalb des Folds erst dann geladen werden, wenn sie tatsächlich in das Blickfeld des Betrachters geraten. Bis dahin werden Platzhalter im gleichen Format eingesetzt, um die Design-Struktur nicht zu verändern.
Möglichkeiten, Lazy Loading einzurichten:
- Durch eigene Entwicklung
- Durch Plugins für Shopsysteme oder CMS
- Durch Tools zur automatisierten PageSpeed Optimierung
Erfahren Sie mehr über Lazy Loading
Tipp 3: HTTP/2 aktivieren
Als die Technik des Internets konzipiert wurde, ging man nicht davon aus, dass bei einem Seitenaufruf noch viele weitere Ressourcen übertragen werden müssen. Websites bestanden damals zumeist aus reinem HTML-Code.
Das Protokoll HTTP/1.1, das standardmäßig die Datenübertragung zwischen Webserver und Website regelt, muss daher für jede herunterzuladende Datei eine neue Verbindung aufbauen.
Heutzutage benötigen Websites jedoch viele weitere Ressourcen wie Bilder und Skript-Dateien. Die Latenz des Webservers wird durch HTTP/1.1 zum Flaschenhals, weil alle Dateien einzeln übertragen werden müssen.
Abhilfe schafft das moderne Protokoll HTTP/2. Durch HTTP/2 werden alle Ressourcen über eine einzige persistente Verbindung übertragen. Das kann die Website-Ladezeit extrem verringern und sollten Sie es nicht schon nutzen ist ein Umstieg empfehlenswert. Checken Sie daher, ob Ihre Website schon HTTP/2 verwendet.
Voraussetzungen für die Aktivierung von HTTP/2:
- Gültiges SSL-Zertifikat (HTTP/2 verwendet TLS)
- Kompatible Webserver-Software (z.B. Apache und Nginx)
- Evtl. Möglichkeit, weitere Bibliotheken zu installieren (OpenSSL)
Für die Aktivierung von HTTP/2 benötigen Sie Zugriff auf Ihren Webserver. Sollte dies nicht möglich sein, wenden Sie sich an Ihren Hoster. Wenn Sie mit der Konsole vertraut sind, können Sie HTTP/2 auch selbst einrichten.
Erfahren Sie mehr über die Vorteile von HTTP/2
Tipp 4: Caches serverseitig und im Browser einsetzen
Die einfachste Antwort auf die Frage, wie Ladezeiten verringert werden können, ist natürlich: Wenn nichts geladen werden muss! Durch Caches können Daten schneller bereitgestellt werden und gezielt im Browser zwischengespeichert werden.
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 und Nginx verwendet – lassen sich serverseitiges Caching aktivieren und einrichten. Sollten Sie dazu nicht die nötigen Kenntnisse besitzen, können Sie Ihren Hosting-Anbieter danach fragen oder Caching und andere Maßnahmen zur PageSpeed Optimierung durch einen automatisierten Service vornehmen lassen.
Verwende Browser-Caching
Mit Hilfe von Browser-Caching werden Ressourcen Ihrer Website im Browser zwischengespeichert. Somit müssen beim Abruf einer neuen URL Ihrer Website nicht erneut alle Ressourcen 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 Website bei den Nutzern weiterlaufen.
Die manuelle Aktivierung von Browser-Caching erfolgt über eine Anpassung der Webserver-Konfiguration. Nutzen Sie die Webserver-Software Apache haben Sie hier die Wahl zwischen den Modulen “mod_headers” und “mod_expires”.
Nutzen Sie “mod_headers”, dann ergänzen Sie in der Datei “.htaccess” im Root-Verzeichnis Ihrer Website:
<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.
Nutzen Sie “mod_expires”, dann ergänzen Sie die Konfigurationsdatei “httpd.conf” um folgende Zeilen:
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.
Lesen Sie mehr darüber, wie ein Website Cache Ihre Website beschleunigen kann
Die 4 wichtigsten Maßnahmen auf Knopfdruck
Sie möchten Bild-Optimierung, Lazy Loading, HTTP/2 und einen Website Cache auf Knopfdruck aktivieren? Mit wao.io beschleunigen Sie die Page Speed Ihrer Website ohne lästige Programmierung.
Informieren Sie sich jetzt über PageSpeed Optimierung auf Knopfdruck
OnPage-Maßnahmen für schnelle Website-Ladezeit
Die folgenden Tipps für schnellere Website-Ladezeit konzentrieren sich auf die Darstellung der Website im Browser. In der Regel reicht hier ein Zugang zum Theme Ihrer Website. Bitte denken Sie daran, in jedem Fall mit Sicherheitskopien zu arbeiten!
Tipp 5: Kritischen Rendering-Pfad optimieren
Der kritische Rendering-Pfad (“Critical Rendering Path”) beschreibt die Abfolge aller Ressourcen, die geladen und ausgeführt werden müssen, um die Seite zu rendern, also im Browser darzustellen.
Wenn die Seite visuell ausgegeben wird, erkennt der Nutzer sie als geladen an. Der “First Meaningful Paint” ist daher eine der wichtigsten Mess-Stationen. Während der Nutzer beginnt, die Informationen der Website aufzunehmen, kann sie dann im Hintergrund weiter laden. Schließlich ist sie beim “Time To Interactive” auch funktional verfügbar.
Wenn also die Darstellung erst einmal wichtiger als die Funktionalität ist, sollte CSS schnell geladen werden und JavaScript sollte das Rendern nicht ausbremsen. Sie erreichen dies am einfachsten, indem Sie CSS generell im Head-Bereich der HTML-Datei laden und JavaScript unten vor dem schließenden Body-Tag.
<head>
[...]
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
[...]
<script type="text/javascript" src="scripts.js"></script>
</body>
Sie können zusätzlich angeben, eine JavaScript-Datei asynchron zu laden. Ähnlich wie beim “Media Query” für CSS-Dateien (s.u.) wird die Datei damit nicht mehr als “renderblockierend” betrachtet und erst nach dem Rendern ausgeführt.
<script async type="text/javascript" src="scripts.js"></script>
Vergewissern Sie sich, dass die so geladenen Funktionen korrekt ausgeführt werden. Asynchron geladenes JavaScript sollte beispielsweise kein “document.write” verwenden. Auch die folgenden Tipps zur Verkleinerung und Optimierung von CSS und JavaScript helfen, den kritischen Rendering-Pfad schneller ablaufen zu lassen.
Tipp 6: CSS durch “Media Query” gezielt laden
Responsive Websites sind mittlerweile eine Selbstverständlichkeit. Doch damit die Ausgabe je nach Endgerät flexibel erzeugt werden kann, müssen alle Möglichkeiten durch CSS abgedeckt und mitgeladen werden.
CSS ist aber eine “renderblockierende” Ressource. Der Browser wartet also, bis alle CSS-Dateien geladen und ausgeführt sind, bevor er mit dem Rendern der Seite beginnt. Das verzögert den kritischen Rendering-Pfad und damit den First Meaningful Paint (s.o.).
Durch das Hinzufügen eines “Media Query” ist es jedoch möglich, eine CSS-Datei nur in einem bestimmten Anwendungsfall auszuführen. Diese Fälle sind entweder an die Ausgabeform (z.B. “screen”, “print”) oder eine bestimmte Kondition (z.B. “(min-width:1024px)” für eine Mindestbreite von 1024 Pixeln) gebunden.
Sie können den “Media Query” mit dem Aufruf der CSS-Datei im Head-Bereich der HTML-Datei verknüpfen. Arrangieren Sie ihr CSS dann so, dass die grundsätzlich benötigten Formatierungen in einer Extra-Datei angegeben sind, die für alle Medientypen ausgeführt wird.
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" type="text/css" href="screen-style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print-style.css" media="print">
<link rel="stylesheet" type="text/css" href="widescreen-style.css" media="(min-width:1024px)">
Die Datei “screen-style.css” wird hier nur dann ausgeführt, wenn die Ausgabe auf einem Bildschirm erfolgt. Wird die Website dagegen zum Drucken aufgerufen, wird die “print-style.css” ausgeführt. Schließlich wird die Datei “widescreen-style.css” nur dann ausgeführt, wenn die Mindestbreite auf dem Bildschirm 1024 Pixel beträgt.
Tipp 7: JavaScript und CSS auslagern
Verwenden mehr als eine Seite die gleichen Funktionen oder Formatierungen, ist es sinnvoll, diese in separate Dateien auszulagern. Beziehen beispielsweise mehrere Seiten ihre Formatierungen über die gleiche CSS-Datei, muss diese nur einmal geladen werden und wird danach in der Regel aus dem Browser-Cache bereitgestellt.
In der Vergangenheit wurde oft abgeraten, zu viele einzelne Ressourcen für eine Website zur Verfügung zu stellen. Doch mit dem Umstieg auf HTTP/2 können diese über eine einzige Verbindung geladen werden, wodurch kein zeitlicher Mehraufwand mehr entsteht.
Sie können also JavaScript-Code, der im HTML-Code verankert ist, ausschneiden und in eine eigene Datei einfügen. Schneiden Sie dazu alles aus, was sich zwischen diesen Zeilen befindet:
<script language="javascript">
[...]
</script>
Verlinken Sie schließlich auf die neue JavaScript-Datei am Ende des Dokuments.
<script type="text/javascript" src="scripts.js"></script>
HTML von nutzlosem Ballast befreien
Auch der HTML-Code macht einen Teil des Download-Volumens einer Website aus. Je komplexer der Aufbau der Seite ist, desto mehr verschachtelte HTML-Strukturen müssen erstellt werden. Hier sparsam und effizient vorzugehen, kommt bei der Entwicklung von Themes aber oftmals zu kurz.
Schauen Sie sich daher den Quellcode Ihres Themes an:
- Lassen sich verschachtelte Strukturen einfacher lösen? Beispiel: viele “<div>”-Container ineinander.
- Gibt es HTML-Elemente ohne Inhalt? Beispiel: “<strong></strong>”.
- Gibt es Kommentare, die nicht benötigt werden? Beispiel: “<!-- Unnötiger Kommentar -->“.
- Testen Sie ausgiebig die Darstellung und Funktionalität der Website, wenn Sie Änderungen vornehmen.
Hin und wieder kommt es zudem vor, dass Sie Texte aus Word oder Google-Docs in einen Editor, wie den von Wordpress, einfügen müssen. Achten Sie in diesen Fällen darauf, dass der Text unformatiert eingefügt wird. Ansonsten werden viele nutzlose Formatierungen hinzugefügt, die den Quellcode unnötig aufblähen.
Tipp 9: CSS-Formatierungen effizient optimieren
Beim Gestaltungsprozess eines Themes werden CSS-Formatierungen häufig geändert und angepasst. Entwickler achten also darauf, einzelne Formatierungen möglichst flexibel zu halten. Das sorgt jedoch dafür, dass sich Redundanzen bilden.
Diese Redundanzen werden am Ende oftmals nicht entfernt. Gehen Sie daher die CSS-Dateien Ihres Themes durch. Achten Sie dabei auf häufige Wiederholungen und minimale Änderungen in ähnlichen Formatierungen.
Dieses Code-Beispiel hat viele sich wiederholende Formatierungen:
.text.kursiv { font-family: Arial; font-size: 10pt; font-style: italic; }
.text.fett { font-family: Arial; font-size: 10pt; font-weight: bold; }
.text.unterstrichen { font-family: Arial; font-size: 10pt; text-decoration: underline; }
Es lässt sich vereinfachen zu:
.text { font-family: Arial; font-size: 10pt; }
.text.kursiv { font-style: italic; }
.text.fett { font-weight: bold; }
.text.unterstrichen { text-decoration: underline; }
Diese Lösung ist nicht nur übersichtlicher und leichter anzupassen, sondern verbraucht auch weniger Platz und lädt damit schneller.
Tipp 10: HTML, CSS und JavaScript minifizieren
Ein gutes Theme erkennen Sie daran, dass der Code übersichtlich getrennt und eingerückt ist. Ebenfalls sollte es über Kommentare und aussagekräftige Variablen-Namen verfügen. So fallen nachträgliche Änderungen und Ergänzungen für die Entwickler leichter.
Für den Browser sind diese Orientierungshilfen jedoch überflüssig und werden zwar mitgeladen, aber nicht interpretiert. Da sogar Leerzeichen zur Dateigröße beitragen, gibt es also auch hier Optimierungspotenzial. Die Anwendung davon nennt man Minifizierung.
Sie können nun herangehen und händisch minifizieren, indem Sie selbst Leerzeichen und Tabulatoren löschen. Dieser Aufwand wird dem Ergebnis jedoch nicht gerecht. Zumal es sehr effiziente Skripte und Plugins gibt, die diese Aufgabe erledigen.
Das können Skripte zur Minifizierung leisten:
- Löschen aller sogenannter “Whitespaces”: Leerzeichen, Tabulatoren, Zeilenumbrüche usw.
- Verkürzung von Variablen-Namen: Aus “var angebot” wird “var a”.
- Entfernung aller Kommentare: In HTML, CSS und JavaScript.
Beispiele für Skripte zur Minifizierung:
Beachten Sie, dass die entstehenden Dateien für das menschliche Auge kaum noch lesbar sind. Die Minifizierung sollte also im letzten Arbeitsschritt vor dem Upload auf das Live-System erfolgen. Behalten Sie die “nicht-minifizierten” Ausgangsdateien, um sie als Grundlage zur weiteren Arbeit zu verwenden. Wiederholen Sie die Minifizierung dann nach jeder Änderung.
Tipp 11: “Third Party”-Skripte und externe Dateien verringern
Nicht alle Ressourcen einer Website müssen vom gleichen Webserver geladen werden. Skripte von “Third Party”-Anbietern, z.B. Google Analytics werden über andere Quellen bezogen. Auch alle anderen Ressourcen wie Bilder lassen sich prinzipiell von anderen Quellen einbinden.
Bedenken Sie, dass dazu immer eine neue Verbindung aufgebaut werden muss und deren Latenz und Datenübertragung wiederum auf die Seitenladezeit angerechnet wird. Ist der Webserver der “Third Party” überlastet, kann diese Ressource sogar zum Flaschenhals für den gesamten Ladevorgang und den kritischen Rendering-Pfad werden.
Laden Sie daher “Third Party”-Skripte grundsätzlich zuletzt, vor dem geschlossenen Body-Tag. Vermeiden Sie unbedingt Skripte, die nicht über HTTPS aufgerufen werden können, da Ihre Website ansonsten als “Mixed Content” deklariert und damit als unsicher angezeigt wird.
Weitere Tipps zum Umgang mit “Third Party”-Skripten:
- Nutzen Sie ausschließlich asynchrone Trackingcodes. Sie laden erst, nachdem die Seite gerendert wurde und behindern den Seitenaufbau nicht.
- Verwenden Sie Tools wie den Google Tag Manager. Dieser ermöglicht die Einbindung mehrerer “Third Party”-Skripte mittels eines einzigen zu integrierenden Code-Schnipsels.
- Sofern es möglich ist, sollten Sie die Skripte auf Ihrem Webserver hinterlegen und sie nicht von außen einbinden.
Vermeiden Sie zudem das Laden anderer Ressourcen externen Quellen. Setzen Sie nur darauf, wenn es aus wichtigen Gründen (z.B. Copyright) nicht anders gelöst werden kann. Prüfen Sie in diesen Fällen aber, ob eine Verlinkung nicht sinnvoller ist.
Tipp 12: DNS-Prefetch, Preconnect und Prerendering einsetzen
Nicht immer ist eindeutig, wohin die Reise eines Nutzers auf einer Website führt. Doch manchmal lässt es sich vorhersehen, beispielsweise bei einem Blog-Artikel, der mit einem Call-to-Action auf eine Produktseite verlinkt.
In diesem Fall könnte die Produktseite bereits ganz oder zu Teilen im Browsercache vorgeladen werden, während der Nutzer den Blog-Artikel liest. Die Technik dahinter wird noch nicht vollumfänglich von allen Browsern unterstützt, lässt sich aber bereits hinterlegen.
Es gibt verschiedene Methoden, um dieses Vorladen einzusetzen:
- DNS-Prefetch: Löst die IP-Adresse über die DNS-Server auf
- Preconnect: Führt SSL-Handshake für eine gesicherte Verbindung aus
- Prefetch: Legt eine Ressource (Bild, CSS, JavaScript) mit niedriger Priorität im Browser-Cache ab
- Subresource: Legt eine Ressource (Bild, CSS, JavaScript) mit hoher Priorität im Browser-Cache ab
- Preload: Legt eine Ressource (Website, Bild, CSS, JavaScript) mit hoher Priorität im Browser-Cache ab
- Prerender: Lädt eine komplette Seite einer Website im Browser fertig zur Darstellung vor
Sie können diese Methoden einsetzen, indem Sie dem Head-Bereich Ihrer HTML-Datei die folgende Zeile hinzufügen (ändern Sie “www.example.com" zur URL der Website oder Ressource, die vorgeladen werden soll):
<link rel="dns-prefetch" href="//www.example.com">
Statt “dns-prefetch” können Sie auch eine andere der genannten Methoden anwenden. Achten Sie dabei darauf, nicht zu viele mögliche Seiten komplett vorzuladen, weil dadurch natürlich auch wieder der Webserver ausgelastet wird.
Ladezeiten einer Webseite durch Bild-Optimierung senken
Im ersten Tipp haben wir schon dazu geraten, Bilder zu komprimieren. Hier haben wir ein paar weitere Tipps gesammelt, mit denen die Ladezeiten einer Webseite gesenkt werden können.
Tipp 13: WebP nutzen
Generell gilt: Fotos und hochwertige Grafiken sollten als JPEG-Dateien abgespeichert werden. Grafiken mit wenigen Farben oder Transparenzen sollten dagegen als PNG-Datei abgespeichert werden.
Eine Alternative zu beiden bietet Google mit dem WebP-Format. WebP kann Bilder sowohl verlustfrei (wie PNG) als auch verlustbehaftet (wie JPEG) komprimieren. Google gibt an, dass bei Tests Bilder im WebP-Format 26% kleiner im Vergleich zu PNGs und 25-34% kleiner als JPEGs waren.
Leider unterstützen noch nicht alle Browser WebP. Zum Zeitpunkt dieser Ratgeber-Veröffentlichung betraf dies vor allem den Safari. Um trotzdem nicht auf schnellere Ladezeiten durch WebP-Bilder in anderen Browsern zu verzichten, können Sie eine Weiche im Quellcode einrichten, der den Fallback auf ein JPEG- oder PNG-Bild zulässt.
<picture>
<source srcset="img/testbild-neu.webp" type="image/webp">
<source srcset="img/testbild-alt.jpg" type="image/jpeg">
<img src="img/testbild-alt.jpg" alt="Fallback">
</picture>
Tipp 14: CSS3 für Hintergrundgrafiken und Animationen
Wie beschrieben gehören Bilder zu den größten Blockern der Ladegeschwindigkeit. Daher ist es am besten, sie durch Alternativen zu ersetzen, wenn es möglich ist.
CSS bietet mittlerweile die Möglichkeit, komplexe Darstellungen im Browser zu rendern. Dazu gehören Farbverläufe und sogar Animationen. Statt also auf Grafiken und Videos zu setzen, können diese mit CSS umgesetzt werden und somit die Ladezeit gesenkt werden.
CSS3-Tools, um Bilder zu ersetzen
Tipp 15: SVG für Logos und Illustrationen
Eine weitere Alternative, besonders für PNG-Bilder, ist das SVG-Format. Diese “Sizable Vector Graphics” sind in lesbarem Code geschrieben und werden vom Browser interpretiert. Dadurch können Sie minifiziert und komprimiert werden wie anderer Code.
Zudem lassen sich SVGs beliebig skalieren und sind daher für alle Endgeräte einsetzbar, ohne das alternative Bildgrößen nötig wären. Entwickler können besser mit dem SVG-Format arbeiten, da es auch inline, also im HTML-Code, eingesetzt werden kann und Änderungen im Texteditor vorgenommen werden können.
Die meisten Bildprogramme erlauben, PNG-Dateien in SVG umzuwandeln. Vergleichen Sie zur Sicherheit die Dateigrößen und wägen sie dann ab, ob Ihnen eine SVG-Datei größeren Nutzen bringt. Auch SVG lässt im Übrigen animieren!
Webserver für mehr Ladegeschwindigkeit optimieren
Neben den OnPage-Maßnahmen lässt sich auch der Webserver für mehr Ladegeschwindigkeit optimieren. Wir haben hier einige Tipps zusammengefasst für Prozesse, die nicht im Browser stattfinden.
Da es hier um die Infrastruktur Ihrer Website geht, ist selbstverständlich Vorsicht geboten. Kontaktieren Sie Ihren Hoster oder Domain-Provider, um die Änderungen sicher vorzunehmen.
Tipp 16: Schnellere DNS-Server verwenden
Beim Aufruf einer Website muss zunächst deren Domain in die IP-Adresse des Webservers aufgelöst werden. Aus “example.com” werden so vier durch Punkte getrennte Zahlen zwischen 0 und 255.
Für diese Auflösung sind sogenannte DNS-Server zuständig. In der Regel werden mehrere DNS-Server hintereinander aufgerufen, bis die IP-Adresse herausgefunden wird. Dies ist abhängig vom Standort und den Einstellungen Ihres Domain-Providers.
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.
Tipp 17: CDN (Content Delivery Network) einsetzen
Ist es für Ihr Online-Geschäft wichtig, global vertreten zu sein, dann werden Sie feststellen, dass sich die Verbindungszeiten extrem voneinander unterscheiden können, je nachdem, von wo aus die Website aufgerufen wird. Das liegt daran, dass die Knotenpunkte bis zu dem Rechenzentrum, in dem Ihr Webserver liegt, geographisch zunehmen.
Ein Content Delivery Network, kurz CDN, kann hier Abhilfe schaffen. Das CDN sorgt dafür, dass Ihre 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 häufig mit hohen Kosten verbunden, die sich für Betreiber einer Website, die hauptsächlich Zielgruppen deutschsprachigen Raum anspricht, nicht unbedingt rechnen. Analysieren Sie daher mit Tools wie Google Analytics, ob ein CDN für Sie richtig ist.
Um ein CDN nutzen zu können, müssen Sie sich bei einem Anbieter registrieren. Es gibt zwar kostenlose CDN, doch sollten Sie 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.
wao.io ist hier deutlich kostengünstiger als andere Anbieter und als CDN für den deutschsprachigen Raum optimal einsetzbar.
Tipp 18: Webserver-Software für PageSpeed optimieren
Wenn die Verbindung zum Webserver hergestellt ist, verarbeitet dieser die 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.
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. Hierzu sollten Sie besonders die “Time to First Byte”. Steigt sie deutlich an, kann es gut sein, dass ein Problem mit dem Webserver vorliegt.
Verwenden Sie Wordpress oder ein Shopsystem, das auf PHP basiert, wie beispielsweise Magento, lohnt zudem vielleicht ein Wechsel der Webserver-Software. Das meistgenutzte System hier ist immer noch Apache.
Die Alternative Nginx hat sich in einem Test mit bis zu 1.000 gleichzeitigen Verbindungen als mehr als doppelt so schnell erwiesen. Erkundigen Sie sich bei Ihrem Hoster, ob ein Wechsel möglich ist.
Tipp 19: Daten mit GZip komprimieren
Dateien können dann am schnellsten versendet werden, wenn sie so klein wie möglich sind. Das gilt auch für Dateien mit HTML-, CSS- und JavaScript-Code. Wie eine Zip-Datei lässt sich dieser Code komprimieren und damit verkleinern. Im Browser werden die komprimierten Daten dann entpackt und ausgeführt.
Das Komprimieren auf dem Webserver und Entpacken im Browser benötigt natürlich auch Ladezeit. Der Nutzen durch die schnellere Übertragung überwiegt hier aber den Aufwand. Dies gilt gerade für mobile Verbindungen, die über eine geringere Bandbreite verfügen. Sie sollten es daher nutzen.
Um die Komprimierung durch GZip zu ermöglichen, ist eine Einstellung im Webserver nötig. Dazu brauchen Sie einen entsprechenden Zugang, den Sie von Ihrem Hoster erhalten können. Wir zeigen Ihnen, wie Sie GZip-Komprimierung mit der gängigen Webserver-Software Apache einrichten können.
Daten in Apache mit GZip komprimieren
Das Modul “mod_deflate” ist meist vorinstalliert. Mit folgendem Konsolen-Kommando können Sie checken, ob es bereits vorhanden ist:
sudo apachectl -t -D DUMP_MODULES | grep deflate
Bekommen Sie die Ausgabe “deflate_module (shared)”, dann ist mod_deflate bereits installiert. Wenden Sie sich ansonsten an Ihren Hoster.
Öffnen Sie nun “httpd.conf”, die Konfigurationsdatei von Apache. Diese finden Sie in der Regel im Ordner “/etc/httpd/conf/”. Dort fügen Sie folgende Zeile hinzu:
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
Damit bestimmen Sie, dass der Text sowie der HTML-, CSS- und JavaScript-Code mit GZip komprimiert wird. Speichern Sie die Datei ab und starten Sie den Apache-Webserver neu. Von nun an werden die Daten mit GZip komprimiert.
Tipp 20: 301-Weiterleitungen optimieren und reduzieren
Durch 301-Weiterleitungen (301-Redirects) werden Nutzer von einer URL zu einer anderen weitergeleitet. Der Status-Code 301 gibt dabei an, dass der Inhalt permanent verschoben ist. Das nimmt auch der Googlebot zur Kenntnis und streicht die alte URL aus dem Index.
Weiterleitungen werden also dann benötigt, wenn Inhalte auf einer Website umgezogen werden oder ganze Websites von einer Domain auf eine andere migriert werden. Sie können jedoch die Ladegeschwindigkeit beeinträchtigen. Deshalb sollten Sie Weiterleitungen möglichst effizient und sparsam einsetzen.
Am effizientesten richten Sie 301-Weiterleitungen über den Webserver ein. Es gibt auch die Möglichkeit, Weiterleitungen über Meta-Tags oder JavaScript einzurichten. Das verlängert jedoch die Ladezeit, da der Browser hierzu erst das DOM erstellen muss, anstatt die Angaben gleich aus dem HTTP-Header zu beziehen.
Weiterleitungen sollten jedoch immer sparsam eingesetzt werden. Werden die Weiterleitungen in einer Datei auf dem Webserver angelegt, so muss diese jedes Mal geladen und interpretiert werden. Das kann die Ladezeit jeder Seite verzögern, da dies bei jedem Seitenaufruf geschieht.
Prüfen Sie, ob eine Weiterleitung nach wie vor notwendig ist:
- Mit dem URL-Prüftool der Google Search Console können Sie checken, ob die neue URL schon im Index ist und die alte entfernt wurde.
- Mit einem Backlink-Checker finden Sie heraus, ob die alte URL noch über Backlinks verfügt.
- Nicht für SEO, aber für Nutzer wichtig: Gibt es eventuell noch andere Ressourcen wie PDFs oder Apps, in denen die alte URL verlinkt wird?
- Sollte die alte URL nicht mehr im Index von Google sein und über keine Backlinks verfügen, können Sie die Weiterleitung entfernen!
Bei mehreren Umzügen können über die Zeit hinweg auch Staffeln von Weiterleitungen entstehen, wenn beispielsweise Seite “A” auf Seite “B” und dann auf Seite “C” weitergeleitet wird. Dies können Sie verkürzen, indem Sie Seite “A” direkt auf Seite “C” weiterleiten.
Generell gilt: Schalten Sie nur maximal drei Redirects hintereinander, denn nach dem dritten Redirect steigt der Googlebot aus!
Tipp 21: Bad Request (HTTP Status-Code 400) vermeiden
Ein Bad Request entsteht dann, wenn eine vom Browser angeforderte Ressource beim HTTP-Aufruf nicht geladen werden kann. Das kann eine Website sein oder auch einzelne Dateien, die zu einer Website gehören, wie Bilder oder JavaScript-Code.
Der Webserver wird versuchen, diese Ressourcen trotzdem bereitzustellen und der Browser muss entsprechend darauf warten. Bad Requests sorgen also nicht nur für ein schlechteres Nutzererlebnis, sondern auch für längere Ladezeiten.
In den meisten Fällen sind diese Ressourcen zwar vorhanden, aber falsch angegeben. Es kann jedoch viele Gründe haben, warum ein Bad Request entsteht. Checken Sie ihre Seite entsprechend nach Fehlern und lösen Sie den Bad Request auf. Dazu können Sie ein Tool wie den “Screaming Frog” oder den “Broken Link Checker” verwenden.
Automatisierte PageSpeed Optimierung
Tipp 22: PageSpeed Optimierung mit wao.io automatisieren
Schneller PageSpeed ist für eine erfolgreiche Website unerlässlich. Sie können die vorgestellten Tipps zur Verbesserung der Ladezeit selbst umsetzen. Dafür benötigen Sie jedoch Zeit, müssen sich einarbeiten und am Ball bleiben.
Wir haben deshalb einen Service entwickelt, mit dem die PageSpeed Ihrer Website automatisiert und kontinuierlich optimiert wird. Wenige Minuten Einrichtungszeit reichen dabei aus, um langfristig von einer schnellen Website zu profitieren. Dadurch werden die wichtigsten Tipps aus dieser Liste auf Knopfdruck umgesetzt.
Sehen Sie jetzt alle Vorteile von wao.io auf einen Blick!
