Webseiten-Ladezeit optimieren

Ladezeiten verringern: besonders wichtig für Mobilgeräte

Das Herunterladen einer Webseite sollte laut Google weniger als 400 bis 600 Millisekunden betragen. Je länger eine Seite zum Laden benötigt, desto größer ist die Wahrscheinlichkeit, dass Besucher die Seite wieder verlassen, noch bevor sie fertig geladen hat. Mit jeder Sekunde, die eine Webseite länger zum Laden benötigt, vergrößert sich die Absprungrate. Wir haben deswegen die wichtigsten Maßnahmen zur Verringerung der Ladezeiten zusammengestellt.

1. Bildoptimierung

Die Optimierung von Bildern gehört zu jenen Schritten, die auch Laien durchführen können – umgekehrt ist es allerdings auch genau der Punkt, an dem Webseiten-Besitzer bei der Content-Einpflegung sorgfältig sein müssen. Dafür sollten die Bilder in der kleinstmöglichen Abmessung hinterlegt (also die größte mögliche Abmessung der Darstellung nicht überschritten werden) und komprimiert werden. Wir als WordPress-Webagentur haben dazu ein PlugIn entwickelt, welches die Bildschirmabmessung des Nutzers abfragt, daraus resultierend die benötigten Bildabmessungen und dann das Bild in exakt dieser Größe ausliefert. So brauchen unsere WordPress-Anwender nichts mehr beachten und können ihr Bildmaterial ohne vorherige Bearbeitung hochladen.

2. HTTP-Requests reduzieren

Wenn der Browser Daten von einem Server abruft, verwendet er HTTP (Hypertext Transfer Protocol). Jede zu ladende Einzeldatei löste eine Anfrage / Antwort zwischen  Client und Host aus. Je mehr HTTP-Anfragen Ihre Webseite macht, desto langsamer wird sie im Allgemeinen geladen. Anschaulich formuliert: eine Datenmenge in einer Anfrage wird schneller bearbeitet, als die gleiche Datenmenge auf mehrere Anfragen geteilt.

Um die HTTP-Requests zu reduzieren gibt es viele Möglichkeiten:

  1. CSS- und JS-Dateien kombinieren
  2. CSS-Sprites verwenden
  3. Inline des JavaScripts (nur wenn es sehr wenig ist)
  4. CSS- und JS-Dateien kombinieren
  5. Umfangreiche Frameworks wie Bootstrap oder Foundation nur dann verwenden, wenn wirklich ein solcher Funktionsumfang benötigt wird
  6. Reduzierung von Ressourcen wie Plugins von Drittanbietern, die eine große Anzahl externer Anforderungen stellen
  7. Weniger Code benutzen!

Die Anzahl der Anforderungen, die eine bestimmte Website stellen muss, ist von Website zu Website sehr unterschiedlich. Wenn Sie einen Website-Geschwindigkeitstest durchführen, erfahren Sie, wie viele Anforderungen zum Generieren einer bestimmten Seite erforderlich waren.

3. CSS und JavaScript minimieren

Durch die Minimierung von Ressourcen werden unnötige Zeichen aus HTML, JavaScript und CSS entfernt, die keinen anderen Zweck haben, als den Code für das menschliche Auge lesbar zu gestalten. Das sind Kommentare (oder auskommentierte Teile), Leerzeichen und Zeilenumbrüche. Sind diese Zeichen entfernt, sind die anzufordernden Dateien kleiner. Für WordPress gibt es zahlreiche PlugIns, die unter anderem das tun.

4. Kritische Ressourcen für Pfad- und Renderblockierung (CSS + JS)

Für die Analyse der Geschwindigkeit Ihrer Webseiten ausschlaggebend ist, was das DOM blockiert und damit das Anzeigen der Webseite verzögert. Diese Ressourcen werden auch als Renderblocker-Ressourcen bezeichnet: HTML, CSS (einschließlich Webfonts) und JavaScript. Im Folgenden finden Sie einige Empfehlungen, wie Sie verhindern können, dass CSS und JavaScript das DOM blockieren, indem Sie Ihren kritischen Renderpfad optimieren.

CSS

  • Sicherstellen, dass der Aufruf der CSS-Dateien regelkonform ist
  • Verwendung von Media-Queries, um unnötige Teile des CSS als „nicht render blockierend“ auszuzeichnen
  • Reduzierung der Anzahl der CSS-Dateien (mehrere CSS-Dateien zu einer Datei verknüpfen)
  • CSS minimieren
  • Insgesamt weniger CSS verwenden

JavaScript

Für JavaScript gibt es eine einfachere Methode, damit diese das Rendern nicht blockieren:

  • Verschieben Sie Ihre Skripte ans Ende der Seite unmittelbar vor das schließende </ body> -Tag.
  • Zusammenführung der JS-Dateien zu einer Datei
  • Minimieren der JavaScript-Dateien
  • Bei sehr kleinen Code-Snippets das JavaScript inline verwenden
  • Verwendung der Direktive async oder defer: Mit async kann das Skript im Hintergrund heruntergeladen werden, ohne blockiert zu werden. Sobald der Download abgeschlossen ist, wird das Rendern blockiert und das Skript ausgeführt. Das Rendern wird fortgesetzt, wenn das Skript ausgeführt wurde.
<script async src = "example.js"> </ script>

Alternativ kann defer anstelle von async verwendet werden. Diese Anweisung entspricht der asynchronen Anweisung, stellt jedoch sicher, dass Skripts in der Reihenfolge ausgeführt werden, in der sie auf der Seite angegeben wurden.

6. Caching

Für Assets, die sich selten ändern sollte Browser-Caching genutzt werden. Empfohlen wird ein Höchstalter von 7 Tagen. Einer der wichtigsten HTTP-Cache-Header ist Cache-Control. Der Header besteht aus einer Reihe von Anweisungen, mit denen definiert wird, wann, wie und wie lange eine Antwort zwischengespeichert werden soll. HTTP-Caching bedeutet, dass ein Browser Kopien von Ressourcen für einen schnelleren Zugriff speichert. Es ist mit HTTPS-Nutzung verwendbar.

7. Hotlink-Protection

Hotlink-Protection schränkt HTTP-Verweise ein, um zu verhindern, dass andere Webseiten Inhalte der eigenen Webseite einbetten.

Fügen Sie den folgenden Code in Ihre .htaccess-Datei ein, um das Verknüpfen Ihrer Bilder von anderen Websites zu unterbinden und ein Ersatzbild mit dem Namen nohotlinking.jpg von einem Bildhost anzuzeigen:

RewriteEngine On
RewriteCond% {HTTP_REFERER}! ^ Http: // (. + \.)? IhreDomain \ .com / [NC]
RewriteCond% {HTTP_REFERER}! ^ $
RewriteRule. * \. (Jpe? G | gif | bmp | png) $ http://example.com/nohotlinking.jpg [L]

8. Reduzieren Sie die Latenz mit einem Content Delivery Network (CDN)

CDNs verringern die Latenz, indem sie weltweit „Kopien“ von Webseiten vorhalten und Nutzer diese automatisch vom räumlich nähesten Server ausgeliefert bekommen. Wir nutzen dafür Cloudflare. CDNs bieten aber neben schnellerem Ausliefern auch andere Vorteile wie Schutz vor DDoS-Attacken.

Sollten Ihre Webseite von uns entwickelt worden und bei uns gehostet sein, brauchen Sie nichts weiter tun. Sind Sie Inhaber einer WordPress-Webseite, verstehen aber nichts von Code und Serverkonfiguration und wollen es auch nicht lernen müssen, schauen Sie sich gerne unseren Wartungs- und Hostingvertrag an. Wir setzen alle diese Best-Practices bei der Server-Konfiguration um.

Webseiten-Optimierung