Pagespeed-Optimierung: So verbessern Sie Ihre Ladezeiten

Die Ladezeiten von Websites sind aus einem einfachen Grund wichtig: Sie haben einen großen Einfluss auf das Gesamterlebnis der Benutzer. Daher ist eine der wichtigsten Überlegungen zur Verbesserung der Leistung Ihrer Website die Optimierung der Seitengeschwindigkeit.

In diesem umfassenden Leitfaden erfahren Sie, wie Sie die Seitengeschwindigkeit messen (mit kostenlosen und kostenpflichtigen Tools), was zu langsamen Geschwindigkeiten für Benutzer führen kann und 26 Möglichkeiten zur Optimierung Ihrer Ladezeiten entdecken. Lass uns anfangen.

Inhalt

1. Alles, was Sie über die Seitengeschwindigkeit wissen müssen
2. Welche Tools sollten Sie verwenden, um die Seitengeschwindigkeit zu messen?
3. Wie lange sollte es dauern, bis eine Website geladen ist?
4. Methoden zur Optimierung der Seitengeschwindigkeit
5. OnPage-Maßnahmen für eine schnelle Website
6. Automatisierte Seitengeschwindigkeitsoptimierung

Alles, was Sie über die Seitengeschwindigkeit wissen müssen

Warum ist die Ladezeit einer Website wichtig?

Es gibt mehrere Gründe, warum eine schnelle Ladezeit sehr wichtig ist:

1. Positive Nutzererfahrung: Google glaubt, dass längere Ladezeiten einen starken Einfluss auf die Absprungraten haben. Tatsächlich kann eine Erhöhung der Ladezeit von 1 auf 6 Sekunden die Absprungrate um 106 % erhöhen, weshalb es jetzt einer der wichtigsten Web Vitals für die Leistung ist (siehe unten).

2. SEO-Ranking-Faktor: Für Google und andere Suchmaschinen ist eine positive User Experience ein wichtiger Faktor, um die Qualität einer Website zu bestimmen. Aus diesem Grund verwendet Google jetzt die Seitengeschwindigkeit als eines der wichtigsten Web Vitals. Je schneller Ihre Website lädt, desto besser sind Ihre Chancen auf ein hohes Ranking.

3. Conversion-Rate-Optimierung: Laut dieser Studie kann eine Verzögerung der Ladezeit von einer Sekunde die Conversions um bis zu sieben Prozent reduzieren. Das klingt zunächst vielleicht nicht so bedeutsam, aber wenn Ihr Online-Shop einen Tagesumsatz von 1.000 Euro generiert, kann eine Verzögerung der Ladezeit von einer Sekunde zu einem Verlust von 70 Euro pro Tag führen, rund 2.100 pro Monat. Rechnet man das aufs Jahr hoch, ist eine langsame Seitengeschwindigkeit ein echter Umsatzkiller.

4. Crawling: Langsam ladende Websites werden langsamer gecrawlt und nicht so intensiv gecrawlt, da der Googlebot nur ein begrenztes Budget zum Crawlen hat. Eine schnellere Ladezeit kann daher dazu führen, dass Ihre Website häufiger gecrawlt wird, was bedeutet, dass Ihre Inhalte im Index von Google auch relevanter sind.

Wie wird die Seitengeschwindigkeit gemessen?

Allgemein ist die Ladezeit einer Website die Zeit in Sekunden vom Aufruf der Website bis zur vollständigen Darstellung im Browser. Die Begriffe „Ladezeit“ und „Seitengeschwindigkeit“ werden synonym verwendet. Sucht man im Netz nach dem Thema, findet man beide Varianten. Die Ladezeit einer Website kann auch in 4 verschiedene Messungen unterteilt werden:

• Time to First Byte (TTFB) : Die Zeit zwischen dem Aufruf der Website und dem ersten geladenen Byte durch den Webserver.
• First Contentful Paint (FCP) : Der Zeitpunkt, zu dem ein Anzeigeelement zum ersten Mal im Browser angezeigt wird.
• First Meaningful Paint (FMP) : Der Zeitpunkt, zu dem der Benutzer den Eindruck hat, dass die Website geladen wird.
• Time to Interactive (TTI) : Der Zeitpunkt, zu dem die Website gerendert wurde und für Benutzereingaben bereit ist.

In diesem Artikel erfährst du genau, wie die Seitengeschwindigkeit gemessen wird.

Welche Tools sollten Sie verwenden, um die Seitengeschwindigkeit zu messen?

Zur Analyse und Optimierung der Ladezeiten stehen viele Tools zur Verfügung. Es gibt auch andere Möglichkeiten, die Ladezeit Ihrer Website zu ermitteln, beispielsweise mit einer Logfile-Analyse.

PageSpeed-Einblicke

Dieses Google-Tool zur Ladezeitmessung wird ständig aktualisiert und verbessert. Die neueste Version von Pagespeed Insights basiert auf Lighthouse, einem Website-Optimierungstool, das auch als Erweiterung im Chrome-Browser verfügbar ist. Es verwendet Daten von CrUX, dem Chrome User Experience Report.

Nach Eingabe Ihrer Domain errechnet das Tool einen Speed-Score zwischen 0 und 100. PageSpeed ​​Insights unterscheidet zwischen einem Score für Mobilgeräte und einem Score für Desktop. Der Mobile Score wird standardmäßig verwendet und ist oft sehr niedrig, da Google Website-Betreiber motivieren möchte, ihre Websites speziell für mobile Versionen zu optimieren. Unterhalb des Geschwindigkeitswerts werden einzelne Messwerte angezeigt. Anhand ihrer Farbcodierung kann die Schwere von Problemen bestimmt werden.

Abbildung 1: Startseite von Google PageSpeed ​​Insights

Google Analytics

Wenn Sie Ihre Website mit Google Analytics analysieren, finden Sie im Bereich „Performance“ Statistiken zur Ladezeit. Klicken Sie auf „Website-Geschwindigkeit“. Wenn Sie E-Commerce-Tracking installiert haben, können Sie direkt auswerten, wie sich die Ladegeschwindigkeit auf Conversions auswirkt.

Google Search Console

In der Google Search Console finden Sie Ladezeiten unter dem Menüpunkt „Crawling“. Dort wird Ihnen angezeigt, wie viele Kilobyte pro Tag heruntergeladen werden und wie lange der Googlebot für den Download einer Ihrer Seiten in Millisekunden benötigt. Dies hilft Ihnen, Probleme mit den Ladezeiten Ihrer Website leicht zu entdecken.

Ryte

Auf der Ryte-Plattform unter Web Performance sehen Sie im Bericht „Ladezeiten“ eine Übersicht, wie Ihre Seiten abschneiden. Unterhalb dieser Übersicht erhalten Sie auch detaillierte Informationen darüber, wie einzelne Seiten bei „Verbindungszeit“, „Zeit bis zum ersten Byte“ und „Ladezeit“ bewertet werden.

Es gibt auch einen separaten „Core Web Vitals“-Bericht, der zeigt, wie Ihre Website bei den wichtigsten Erfahrungsindikatoren von Google abschneidet, zu denen die Ladegeschwindigkeit (gemessen anhand von „Largest Contentful Paint“) sowie die Interaktivität („First Input Delay“) und visuelle Stabilität ('Cumulative Layout Shift').

Ylangsam

Yslow wurde von Yahoo! entwickelt. Sie können es als Bookmarklet, als Tool für die Kommandozentrale oder als Browsererweiterung verwenden. Die Geschwindigkeitsregeln orientieren sich an den Vorgaben von Yahoo!. Auch für Fortgeschrittene ist das Tool wegen der Kommandozeilenfunktionen interessant. Beachten Sie, dass das Plugin Firebug ebenfalls installiert sein muss, um das Plugin über Firefox zu verwenden.

Abbildung 2: Ylangsam

Pingdom

Sie müssen sich registrieren, um Pingdom.com nutzen zu können. Es zeigt dir deine Ladezeiten mit Diagrammen und Statistiken an, was die Auswertung vereinfacht. Sie können leicht erkennen, welche Elemente.

Abbildung 3: Pingdom

WebPageTest.org

Mit WebPageTest.org können Sie die Ladezeit mit verschiedenen Browsern simulieren. Sie können auch von verschiedenen Standorten aus testen, wie schnell eine Website für Besucher aus anderen Ländern geladen wird.

Was schneller lädt

What Loads Faster vergleicht die Ladezeit zweier Seiten miteinander. Ähnlich funktioniert der Website Speed ​​Ranker, mit dem Sie bis zu vier Seiten gleichzeitig vergleichen können.

Wie lange sollte es dauern, bis eine Website geladen ist?

Im Allgemeinen sollte eine Website für ein zufriedenstellendes Benutzererlebnis in weniger als zwei Sekunden geladen werden. Je kürzer die Ladezeit, desto besser. Idealerweise sollte das Laden weniger als eine Sekunde dauern. Wie schnell Ihre Website lädt, hängt von verschiedenen Faktoren ab. Einige können Sie mit On-Page-Optimierung verbessern; andere können Sie nicht beeinflussen.

Auf diese Faktoren haben Sie keinen Einfluss:

• Bandbreite: Die Ladezeit Ihrer Website wird von der verfügbaren Internetbandbreite beeinflusst. Mit einer 3G-Verbindung und einem Smartphone lädt die Website langsamer als mit einer schnellen DSL-Verbindung.
• Browser-Cache: Wenn ein Nutzer einen Browser verwendet, dessen Cache längere Zeit nicht geleert wurde, kann das Laden der Seite deutlich langsamer werden, da der Arbeitsspeicher des Computers die Datenmenge nicht verarbeiten kann.
• Client-Rechenleistung: Bei älteren Desktop-Computern und Smartphones kann es zu Verzögerungen beim Laden von Seiten kommen, da die DOM-Struktur und die Ausführung von Skripten durch unzureichenden Arbeitsspeicher und Rechenleistung verlangsamt werden.

Diese Faktoren können Sie beeinflussen:

• Dateigrößen: Die Größe Ihrer Dateien bestimmt, wie schnell Ihre Website geladen werden kann. Dazu gehört nicht nur der HTML-Code selbst, sondern auch Stylesheets, Skriptdateien und Bilder. Je kleiner die Dateien sind, desto schneller kann die Seite geladen werden.
• Serververbindungen : Beim Aufruf einer Webseite verarbeitet der Webserver die Anfrage. Es kann schneller verarbeitet werden, wenn es weniger Daten zu verarbeiten hat. Wenn bei hohem Website-Traffic viele Anfragen gleichzeitig gestellt werden, können Arbeitsspeicher und Prozessorkapazität zu stark beansprucht werden und so zum Flaschenhals für die Ladezeit werden. In diesem Fall sollten die Kapazitäten erhöht werden.

24 Möglichkeiten zur Optimierung der Seitengeschwindigkeit

OK, jetzt, da Sie wissen, warum Ladezeiten wichtig sind und wie Sie sie für Ihre Website messen können, schauen wir uns verschiedene Methoden an, mit denen Sie versuchen können, die Seitengeschwindigkeit zu optimieren:

1. Schaffen Sie schnelle Verbindungszeiten

Die Verbindung zwischen dem Webserver und dem Benutzer muss hergestellt werden, bevor die Webseitenanfrage vom Webserver verarbeitet werden kann. Die dafür aufgewendete Zeit nennt man Verbindungszeit, Latenz oder Ping. Sie können dies auf der Ryte-Plattform unter Web Performance messen. Idealerweise beträgt die Latenz weniger als 100 Millisekunden. Benötigt der Verbindungsaufbau deutlich mehr Zeit, können Optimierungsmaßnahmen ergriffen werden.

2. Verwenden Sie ein CDN für globale Reichweite

Wenn es für Ihr Online-Business wichtig ist, weltweit präsent zu sein, werden Sie schnell feststellen, dass die Verbindungszeiten je nach Zugriffspunkt stark variieren können. Dies liegt daran, dass die Knoten geografisch bis zum Rechenzentrum zunehmen, in dem sich Ihr Webserver befindet.

Hier kann ein Content Delivery Network, kurz CDN, Abhilfe schaffen. Das CDN sorgt dafür, dass Ihre Website in einem globalen Servernetzwerk zwischengespeichert wird, sodass zwischen dem Computer des Benutzers und dem nächsten Server im CDN immer eine kleine Anzahl von Knoten liegt. Dieser Service ist mit hohen Kosten verbunden, die sich für Betreiber einer Website, die sich hauptsächlich an den deutschsprachigen Raum richtet, nicht unbedingt rechnen.

Um ein CDN nutzen zu können, müssen Sie sich bei einem Anbieter registrieren. Cloudflare hat einige kostenlose Pläne, aber Sie sollten genau prüfen, zu welchen Konditionen das Angebot kostenlos ist. Die kostenpflichtigen Anbieter berechnen in der Regel pro monatlich genutztem Datenvolumen über das Netz.

Bekannte Anbieter sind:

• Amazon Cloudfront
• Wolkenflare
• Stapelpfad
• wao.io

3. Optimieren Sie Ihren Webserver für die Seitengeschwindigkeit

Beim Verbindungsaufbau zum Webserver wird diese Anfrage verarbeitet und die angeforderten Dateien bereitgestellt. Es werden auch serverseitige Skripte genannt, die beispielsweise Inhalte aus Datenbanken auslesen und für die Ausgabe bereitstellen.

4. Erkennen Sie Engpässe in der Infrastruktur

Wenn eine Webseite langsam geladen wird, kann dies daran liegen, dass der Webserver und die zugrunde liegende Infrastruktur überlastet sind. Das kann mehrere Ursachen haben, zum Beispiel wenn der Hoster einen Fehler hat oder weil der Webserver zu viele Anfragen auf einmal beantworten muss.

Es ist wichtig, diese Engpässe zu erkennen, um schnell reagieren zu können. Viele Hosting-Lösungen bieten Metriken zur Überwachung der Serverauslastung. Von den oben vorgestellten Messungen kann auch die „Time to First Byte“ hilfreich sein, die mit der Ryte-Plattform unter Web Performance gemessen werden kann. Steigt sie stark an, liegt möglicherweise ein Problem mit dem Webserver vor.

5. Verwenden Sie serverseitiges Caching

Häufig angeforderte Inhalte, beispielsweise Datenbankabfragen, können auf dem Server zwischengespeichert werden, damit die Anfragen nicht immer wieder ausgeführt werden müssen. Dies ist besonders wichtig für Nutzer, die mehrere Artikel lesen oder Produkte ansehen – also mehrere Seiten in ihrer Sitzung aufrufen möchten. Die Ladezeiten nach Aufruf der ersten Seite können somit verkürzt werden.

In den Einstellungen der Webserver-Software – am häufigsten kommen Apache HTTP Server und Nginx zum Einsatz – lässt sich serverseitiges Caching aktivieren und einrichten. Wenn Sie nicht über die erforderlichen Kenntnisse verfügen, können Sie Ihren Hosting-Provider fragen oder Caching und andere PageSpeed-Maßnahmen von einem automatisierten Cloud-Dienst durchführen lassen (siehe unten).

6. Verwenden Sie Browser-Caching

Beim Browser-Caching werden Elemente Ihrer Website von einem Webbrowser zwischengespeichert und nicht vom Server-Caching des Webservers. Daher müssen beim Aufruf einer neuen URL auf Ihrer Website nicht alle Elemente neu geladen werden. Dadurch erhöht sich die Ladegeschwindigkeit.
Browser-Caching kann von vielen CMS über Plugins oder Erweiterungen aktiviert werden.

Mögliche Plugins für das Browser-Caching bei WordPress sind zum Beispiel:

• WP-Rakete
• W3 Gesamtcache
• WP Schnellster Cache

Die manuelle Aktivierung des Browser-Cachings erfolgt über eine Anpassung der .htaccess-Datei. Somit können Sie zwei Module des Apache-Servers aktivieren: mod_headers und mod_expires.

Wenn Sie mod_headers verwenden, muss die .htaccess mit folgendem Code vervollständigt werden (Quelle – GitHub):

<Dateiübereinstimmung ".(css|js|gif|pdf|jpg|jpeg|png)$">
Header-Set Cache-Control "max-age=2592000, public"
</FilesMatch>

Die runden Klammern beziehen sich auf das Dateiformat, das in den Cache gestellt werden soll. Gleichzeitig ist die Dauer des Caches mit „Alter“ anzugeben. Die Einheit ist in Sekunden. In diesem Beispiel wird der Cache vom Browser für 30 Tage gespeichert.

Wenn Sie mod_expires für das Browser-Caching verwenden möchten, wird die .htaccess-Datei um folgende Zeilen erweitert:

## Cacheablauf ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "Zugriff plus 1 Jahr"
ExpiresByType image/jpeg "Zugriff plus 1 Jahr"
ExpiresByType image/gif "Zugriff plus 1 Jahr"
ExpiresByType image/png "Zugriff plus 1 Jahr"
ExpiresByType text/css "Zugriff plus 1 Monat"
ExpiresByType text/html "Zugriff plus 1 Monat"
ExpiresByType application/pdf "Zugriff plus 1 Monat"
ExpiresByType text/x-javascript "Zugriff plus 1 Monat"
ExpiresByType application/x-shockwave-flash „Zugriff plus 1 Monat“
ExpiresByType Bild/x-Symbol „Zugriff plus 1 Jahr“
ExpiresDefault "Zugriff plus 1 Monat"
</WennModul>
## Cacheablauf

Mit dieser Methode kann für jeden Dateityp ein eindeutiger Zeitrahmen separat bestimmt werden.

7. Verwenden Sie die GZip-Komprimierung

Dateien können am schnellsten verarbeitet und versendet werden, wenn sie so klein wie möglich sind. Dies gilt auch für den Code, der die Website im Browser des Nutzers anzeigen soll. Dieser Code kann wie eine ZIP-Datei komprimiert und somit verkleinert werden. Die komprimierten Daten werden dann im Browser entpackt.

Diese Methode wurde lange Zeit mit Skepsis betrachtet, da Rechenleistung des Webservers notwendig ist und dies auch Zeit in Anspruch nimmt. Allerdings überwiegt der Nutzen die Nachteile, sodass du es unbedingt nutzen solltest. Lesen Sie unsere vollständige Anleitung zum Komprimieren von Website-Code.

Wie kann ich Dateien mit gzip komprimieren?

Der Apache-Server wird am häufigsten für Websites verwendet, daher gilt das folgende Beispiel für Apache.

Es werden zwei verschiedene Module verwendet: mod_deflate und mod_gzip.

1. Das Modul mod_deflate ist normalerweise vorinstalliert. Mit dem folgenden Konsolenbefehl können Sie überprüfen, ob es bereits vorhanden ist:

sudo apachectl -t -D DUMP_MODULES | grep entleeren

Wenn Sie die Ausgabe „deflate_module (shared)“ erhalten, dann ist mod_deflate bereits installiert. Wenden Sie sich andernfalls an Ihren Gastgeber.

2. Öffnen Sie nun „httpd.conf“, die Apache-Konfigurationsdatei. Sie finden es normalerweise im Ordner „/etc/httpd/conf/“. Dort fügt man folgende Zeile hinzu:

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
Anwendung/Javascript

Dies zeigt an, dass der Text und der HTML-, CSS- und JavaScript-Code mit GZip komprimiert wurden. Speichern Sie die Datei und starten Sie den Apache-Webserver neu. Ab sofort werden die Daten von Apache komprimiert.

8. Aktivieren Sie HTTP/2

Standardmäßig werden alle Webseitendateien (z. B. Bilder und Skripte) über das HTTP/1.1-Protokoll geladen. Diese Dateien werden nacheinander über eine separate Verbindung heruntergeladen.

Dies verlangsamt den Ladevorgang. Mit einem SSL-Zertifikat kann der Webserver auf das HTTP/2-Protokoll umgestellt werden. Via HTTP/2 werden alle Dateien über eine einzige Verbindung heruntergeladen. Sie werden auch priorisiert. Alle gängigen Browser unterstützen das Protokoll, sodass Sie bedenkenlos damit arbeiten können.

Erfahren Sie mehr in diesem Artikel: So verbessern Sie die Ladegeschwindigkeit von Webseiten mit HTTP/2: ein Leitfaden für Anfänger.

9. Bilder komprimieren

Den verhältnismäßig größten Teil des Downloadvolumens einer Website machen Bilder aus. Dies gilt umso mehr für Online-Shops mit vielen Produkten und Portfolio-Websites, insbesondere von Fotografen.

Wenn Sie es schaffen, die Dateigröße Ihrer Bilder deutlich zu reduzieren, können Sie Ihre Seitengeschwindigkeit deutlich erhöhen. Wir haben bereits einen ausführlichen Artikel zur Bildkomprimierung auf Ryte geschrieben. Hier ist eine Zusammenfassung.

10. Optimieren Sie alle Bilder

Bilder sind wichtig, um eine Website für Ihre Benutzer übersichtlich und attraktiv zu gestalten. Aber Bilder drohen auch, die Dateigröße Ihrer Website erheblich zu erhöhen und die Ladezeit zu verlangsamen. Verwenden Sie daher nur Bilder, die für die Webnutzung optimiert sind.

Im Allgemeinen sollten Fotos und hochwertige Grafiken als JPEG-Dateien und kleinere Grafiken und Grafiken mit wenigen Farben oder Transparenzen als PNG-Dateien betrachtet werden.

Weitere Schritte:

• Komprimieren Sie Ihre Bilder vor dem Hochladen auf Ihrer Website mit einem Bildbearbeitungsprogramm wie Gimp oder Adobe Photoshop. Beide Programme bieten Einsteigern eine „Fürs Web speichern“-Funktion. Auf diese Weise wird die Dateigröße automatisch optimiert. Mit Tools wie kraken.io oder PNGGauntlet können Sie die Dateigröße reduzieren, indem Sie zusätzliche Informationen entfernen.
• Die entsprechende Bildgröße ist im Quellcode angegeben: Muss ein Browser die Größe von Grafiken selbst berechnen, kann die Ladezeit erhöht werden. Die angegebene Größe sollte der Originalgröße des auf dem Server gespeicherten Bildes entsprechen. Die Angaben zur Bildgröße können Sie auch per CSS definieren.
• Meta-Tags und EXIF-Daten entfernen: Wenn Sie beispielsweise Bilder von der eigenen Kamera oder dem Smartphone verwenden, enthalten diese viele Zusatzinformationen wie Standort, verwendete Kamera und andere Daten. Mit einem Tool wie tinypng können Sie diese entfernen und Speicherplatz sparen.

11. Verwenden Sie das WebP-Bildformat

Mit WebP hat Google ein neues Bildformat geschaffen, das Bilder sowohl verlustfrei (ähnlich PNG) als auch verlustbehaftet (ähnlich JPEG) komprimieren kann. Es ist sogar noch effizienter als die alten Formate.

Noch nicht alle Browser unterstützen WebP. Daher ist es sinnvoll, Alternativen für WebP-Dateien im Quellcode zu hinterlegen und einen Schalter zu installieren, zum Beispiel:

<Bild>
<source type="image/webp">
<source type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</Bild>

12. Unterscheiden Sie zwischen Desktop- und mobilen Websites

In Zukunft werden mehr als die Hälfte aller Nutzer Websites über ein mobiles Gerät statt über einen Desktop-Computer aufrufen. Die Anforderungen an Bilder sind auf beiden Ausgabemedien sehr unterschiedlich. Auf dem Desktop besteht meist eine gute Internetverbindung und auf großen HD-Monitoren wünscht sich der Nutzer entsprechend hochauflösende Bilder in bester Qualität.

Auf mobilen Endgeräten hingegen werden Webseiten oft mobil und damit nicht mit der höchsten Bandbreite aufgerufen. Durch das kleine Display sind auch die Qualitätsanforderungen geringer.

Außerdem werden Bilder aufgrund des Bildschirmformats in einer anderen Auflösung als auf dem Desktop angezeigt. Daher ist es sinnvoll, zwischen den Ausgabemedien zu unterscheiden und zwei Varianten eines Bildes zu erstellen.

Ähnlich wie im vorherigen Beispiel für WebP können zu diesem Zweck auch Schalter im Code der Website hinterlegt werden. Mit CSS kann beispielsweise die Bildschirmauflösung abgefragt und somit die Darstellung an das Ausgabemedium angepasst werden.

13. Lazy Loading einrichten

In Produktübersichten und Fotogalerien werden viele Bilder auf einmal angezeigt – das verlangsamt die Ladezeit enorm. Das ist vor allem für Shopbetreiber und Fotografen ein Problem und für Online-Shops besonders ärgerlich, weil es oft die Startseite oder die erste Seite von Produktkategorien ist.

Viele der so geladenen Bilder sind für den Nutzer allerdings erst sichtbar, wenn er die Seite nach unten scrollt. Es ist also nicht erforderlich, dass sie bereits geladen sind, wenn der Benutzer den Teil „above the fold“ betrachtet.

Mit einer Methode namens „Lazy Loading“ können Sie dafür sorgen, dass die Bilder unterhalb des Ordners erst dann geladen werden, wenn sie tatsächlich im Ansichtsfenster erscheinen.

14. Bereinigen Sie den Quellcode

Beim Aufruf einer Webseiten-URL folgt ein Client oder ein Browser zeilenweise dem Quellcode des HTML-Dokuments. Alle Leerzeichen oder Zeilenumbrüche werden gelesen. Ein überflüssiges Leerzeichen wird die Performance Ihrer Website nicht negativ beeinflussen.

Da eine Website aber je nach Größe aus mehr als hundert Zeilen Quellcode bestehen kann, können viele überflüssige Leerzeichen oder Kommentare die Ladezeit deutlich beeinträchtigen.

Daher sollten Sie Ihren Quellcode minimieren:

• Entfernen Sie alle unnötigen Kommentare.
• Entfernen Sie alle überflüssigen Leerzeichen.
• Löschen Sie unnötige Formatierungen, wenn z. B. im Quellcode eine inhaltslose Formatierung wie „<strong></strong>“ gefunden wird

Um überflüssigen Quellcode zu vermeiden, sollten Sie den Text entweder immer als HTML formatiert in die Website einfügen, den CMS-Editor verwenden oder den Text als reinen Text einfügen und dann formatieren. Binden Sie den Text aus Word oder einem anderen Office-Programm direkt in das CMS ein, führt dies zu überflüssigem Quellcode.

Außerdem gibt es Programme, die alle Leerzeichen und Kommentare aus dem Quellcode entfernen können. Wer diese Programme nutzen möchte, sollte immer eine Kopie zur Bearbeitung aufbewahren, da die verkleinerte Datei kaum lesbar ist.

15. Reduzieren Sie externe Skripte

Ob Sharebuttons oder Trackingcodes, externe Skripte können auf unterschiedliche Weise und für unterschiedliche Zwecke in Ihre Website eingebunden werden. Dadurch sind Sie von der Verfügbarkeit dieser Skripte aus einer anderen Quelle abhängig.

Wenn der Webserver, von dem das Skript abgerufen wird, besonders langsam ist, verlangsamt dies auch die Ladezeit Ihrer Website. Überprüfen Sie also, ob Sie diese Skripte wirklich benötigen.

Weitere Tipps:

• Verwenden Sie nur asynchrone Tracking-Codes. Sie werden erst geladen, nachdem die Website gerendert wurde, und behindern das Laden der Website nicht.
• Nutzen Sie Tools wie den Google Tag Manager. Dadurch muss für mehrere Tracking-Codes nur ein Code-Snippet in den Quellcode integriert werden und die Ladezeit wird nicht wesentlich beeinflusst.
• Wenn möglich, sollten Sie die Skripte auf Ihrem Webserver speichern und nicht von außen einbinden.
• Reduzieren Sie die Anzahl der iFrames.

16. Lagern Sie JavaScript und CSS aus

JavaScript ist eine Skriptsprache, mit der Funktionen im Browser und damit auf dem Client-Rechner ausgeführt werden können. CSS (Cascading Style Sheets) können verwendet werden, um Formate und Darstellungen für die Website zu definieren. Für diese Elemente wird viel Quellcode benötigt, der bei jeder URL-Anfrage neu geladen werden muss. Das braucht Zeit.

Um den Quellcode zu reduzieren, können Sie CSS- und JavaScript-Dateien auslagern. Sie werden dann zu einem Dokument zusammengeführt. Es ist nur ein Abruf erforderlich. Lädt der Browser die Datei in den Cache, kann die Ladezeit nochmals verkürzt werden.

So lagern Sie JavaScript aus:

Lassen Sie sich den Quellcode Ihrer Website mit einem Editor anzeigen. Als nächstes schneiden Sie alle JS-Dateien aus und erstellen eine neue Textdatei, in die Sie alle Codeschnipsel einfügen. Speichern Sie die Datei als main.js und speichern Sie sie auf Ihrem Server in dem Ordner, in dem sich alle anderen HTML-Dateien befinden.

Entfernen Sie im HTML-Code der Website die folgenden Befehle:

und

Ersetzen Sie den gelöschten Befehl mit diesem Befehl:

17. Minimieren Sie CSS- und JavaScript-Dateien

Sie können die Größe von CSS und JavaScript reduzieren, indem Sie unnötige Leerzeichen entfernen. Diese werden auch als „Leerzeichen“ bezeichnet. So kann der Quellcode beispielsweise auf nur eine Zeile reduziert werden.

Codeausschnitt mit verfügbaren Leerzeichen:

CSS-Code und Leerzeichen:

Durch das Entfernen von Leerzeichen und Kommentaren wird die Lesbarkeit stark eingeschränkt. Idealerweise arbeiten Sie mit zwei Versionen: Einer Version mit allen Leerzeichen und Kommentaren, die Sie bearbeiten können und einer Version zur Anzeige auf der Website.

Damit Sie nicht jede vorgenommene Änderung duplizieren müssen, können Sie sie beispielsweise auch mit Programmen „minifizieren“. Sie können auch spezielle Tools verwenden, um JavaScript und CSS zu minimieren. Zu den empfohlenen Tools gehören:

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

18. Laden Sie am Ende JavaScript und CSS

Ihre Website wird erst vollständig angezeigt, wenn alle JavaScript- und CSS-Dateien geladen sind. Um den Ladevorgang zu erleichtern, können Sie am Ende des HTML-Codes JavaScript und CSS einfügen. Auch wenn der Server langsam ist, wird Ihre Website-Entwicklung nicht beeinflusst.

Die ideale Position für CSS-Dateien ist daher im <head>-Bereich der Website. Sie sollten jedoch JavaScript in die Fußzeile der Website einbauen.

Eine mögliche Einbindung der Dateien kann wie folgt aussehen:

19. Verwenden Sie CSS3 für Hintergründe

Jedes Bild, das auf Ihrer Website verwendet wird, erfordert mehrere Codezeilen. Dieser Code wird beim Aufruf der Website zeilenweise ausgelesen. Wenn Sie Schaltflächen, Symbole oder Hintergründe als Grafiken hinterlegen, benötigt ein Browser viel Zeit, um Ihre Website zu laden.

Die Lösung liegt darin, alle grafischen Elemente außer Fotos über CSS3 zu generieren. Auf diese Weise reduzieren Sie den Quellcode. Gleichzeitig werden die Dateien auf allen Endgeräten in gleich hoher Qualität angezeigt.

20. Verwenden Sie Pre-Fetching und Pre-Rendering

Wenn Sie die Pre-Fetching-Technologie verwenden, speichert Ihr Browser bestimmte Elemente der Website im Cache, noch bevor die Seite vollständig geladen ist. So können Bilder, Grafiken oder JavaScript und CSS geladen werden, ohne dass die Darstellung der Website behindert wird.

Sie müssen den Quellcode anpassen, damit eine Datei vorab abgerufen werden kann. In diesem Fall wird dem gewünschten Element das Attribut rel="prefetch" vorangestellt.

Ein Beispiel:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

Hier wird das Beispiel neu geladen, noch bevor eine andere Seite geladen wird. Die Ladezeit in der neuen Seitenansicht wird dadurch verkürzt.

Wenn Sie das Pre-Rendering-Verfahren verwenden, wird eine komplette Website vorab vom Browser heruntergeladen und zwischengespeichert. Darin enthalten sind alle Dateien, die für das komplette Rendering notwendig sind. Die vorab gerenderte Website kann beim Aufruf nahezu verzögerungsfrei geladen werden. Die Ladezeit reduziert sich somit auf weniger als 50 Millisekunden.

Um das Pre-Rendering zu implementieren, müssen Sie folgende Zeile in den Quellcode der zu besuchenden Website einfügen:

<link rel="prerender" href="//prerendering-site.com/index">

21. Reduzieren Sie 301-Weiterleitungen

301-Weiterleitungen eignen sich hervorragend, um Duplicate Content zu vermeiden oder alte URLs nach einem Relaunch auf neue URLs umzuleiten. Allerdings erhöht jede Weiterleitung die Ladezeit – nicht wesentlich, aber jedes Mal, wenn ein Browser auf eine Weiterleitung stößt, muss eine neue URL abgerufen werden, und der Browser muss warten, bis eine http-Anfrage zurückkommt. Folgen mehrere 310-Redirects aufeinander, kann die Ladezeit deutlich erhöht werden.

>> Weiterleitungen: Eine anfängerfreundliche Anleitung <<

Um zu viele Weiterleitungen zu vermeiden, sollten Sie den URL-Aufbau bzw. die Entwicklung neuer URLs dokumentieren. Das Gleiche gilt für etablierte 301-Weiterleitungen. Finden Sie bei der Analyse Ihrer Website mehrere Weiterleitungen, sollten Sie die erste Weiterleitung ohne Umweg über eine oder mehrere Weiterleitungen direkt zum eigentlichen Linkziel führen.

22. Vermeiden Sie schlechte Anfragen

Wenn ein Client, z. B. ein Webbrowser, auf Ihre Website zugreift, wird für jede Ressource eine Anfrage gestellt, damit sie die Datei anzeigen kann. Werden diese Ressourcen in Form von Bildern oder JavaScript-Dateien dennoch nicht gefunden, kann dies zu einer Reaktionskette führen, die die Ladezeit vergeudet.

Sie können schlechte Anfragen leicht vermeiden, indem Sie falsche Dateien korrigieren und den richtigen Pfad angeben oder auf die neue Datei weiterleiten.

23. Verwenden Sie AMP

Google bietet Webmastern mit Accelerated Mobile Pages die Möglichkeit, mobile Websites nahezu verzögerungsfrei zu laden. Dazu müssen die Seiten bestimmte Voraussetzungen erfüllen, damit sie auf mobilen Endgeräten angezeigt werden können.

Viele CMS wie WordPress ermöglichen die Verwendung von AMP mit Hilfe von Plugins. Bisher konnte AMP nicht für Onlineshops eingesetzt werden. Dies ist jedoch von den Entwicklern vorgesehen.

Weitere Ressourcen:

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

24. Probieren Sie die automatische Seitengeschwindigkeitsoptimierung aus

In diesem Leitfaden haben Sie viele Maßnahmen zur Verbesserung der Seitengeschwindigkeit kennengelernt. Die meisten dieser Maßnahmen erfordern jedoch, dass Sie über das technische Wissen und die Zeit verfügen, um sie umzusetzen.

Sollte eines dieser beiden Dinge eine Hürde für dich sein, kannst du die Pagespeed-Optimierung einem automatisierten Dienst überlassen.

Der Cloud-Dienst zur automatisierten Pagespeed-Optimierung wao.io funktioniert so: Wie ein Content Delivery Network speichert wao.io die Website zwischen und führt die Maßnahmen durch, die Sie über ein Menü definieren können. Dazu gehören neben intelligenter Bildkomprimierung und Code-Minimierung auch fortschrittliche Maßnahmen wie Lazy Loading.

wao.io schützt auch vor Sicherheitsangriffen und bietet Metriken zur Website-Überwachung und Benutzerzahlen.

Fazit

Eine Website hat viele mögliche Stellschrauben, mit denen Sie die Ladezeit der Seite verbessern können.

In diesem Artikel haben Sie einige Möglichkeiten entdeckt. Einige Methoden sind auch für Einsteiger und SEO-Neulinge sehr einfach umzusetzen.

Selbst wenn Sie nur einige davon ausprobieren, sind wir sicher, dass Sie Ihre Website schneller machen, Ihre Benutzer zufriedener machen und mit besseren Suchrankings belohnt werden.