Home » Ein Grund und drei Lösungen, wenn Deine Webseite langsam lädt!

Ein Grund und drei Lösungen, wenn Deine Webseite langsam lädt!

Wie schnell eine Webseite geladen wird hängt von einigen Faktoren ab.

Ein Faktor ist die Anzahl der HTTP Requests, die beim Aufruf der Seite an den Webserver gesendet werden.

Wie muss man sich das vorstellen?

Jeder Abruf eines Objektes aus dem Quellcode erfordert einen HTTP-Request.

Objekte können zum Beispiel Java Script Dateien, Css-Dateien, Bilder oder Anzeigencode sein. Jedes Mal, wenn der Browser ein Objekt vom Server abholt macht er ein Request. Dabei liest er die HTML Datei von Oben nach Unten aus.

Diese Requests werden bis zu einem bestimmten Teil gleichzeitig, dann aber nacheinander abgearbeitet. Die Anzahl gleichzeitig möglicher HTTP-Requests wird aber durch den Browser beschränkt.

Ein normaler Browser kann bis zu 2 verschiedene Objekte zur gleichen Zeit herunterladen. Moderne Browser schaffen sogar bis zu 6 gleichzeitig.
Eine Übersicht über alle Browser und Ihre Limitierungen erhältst Du auf Browserscope

Wenn Deine Webseite langsam lädt, bieten sich folgende Lösungen an um mehrere Requests gleichzeitig laufen zu lassen:

  1. Subdomain / CDN (Content Delivery Network)
  2. Dateien zusammenfassen
  3. Objekte verkleinern

Subdomain / CDN

Da ein Browser nur begrenzt mehrere Objekte von einer Domain parallel laden kann, wär es ratsam Objekte wie das Logo oder das Favicon auf Subdomains auszulagern, umso die Anzahl an parallelen Downloads zu erhöhen. Zum Beispiel auf eine Subdomain http://cdn1.wpard.de.

Besteht eine Webseite zum Beispiel aus 24 verschiedenen Objekten, dann können bei dem Aufruf mit einem modernen Browser 6 Dateien parallel geladen werden. Um die Webseite vollständig anzeigen zu können müssten somit 4 Request Schleifen gemacht werden.

Nutzt man nun jeweils eine Subdomain für Bilder, CSS und Javascript-Dateien, dann erhöht sich die maximale Anzahl an gleichzeitigen Downloads von 6 Objekten auf 24 Objekte (1-mal normal plus 3-mal über Subdomains). Es ist daher nur eine Request Schleife notwendig.

Anstelle von Subdomains kann man auch ein CDN einsetzen
Wie man eine langsame, bilderlastige Webseite mit dem Amazon-Service als CDN schneller macht, habe ich in meinem eBook ausführlich beschrieben.

Dateien zusammenfassen

Anstatt 24 Objekte zu laden, könnte man die Anzahl verringern.  Hat ein WordPress Theme mehrere Css -Dateien, könnten die Dateien in eine zusammengefasst werden.
Typisches Beispiel ist die Nutzung eines Childthemes in WordPress.

Die Css -Datei eines Child-Themes nutzt die Import-Funktion um die original Css -Datei einzufügen.

Css Import vermeiden

Kopiert man die original Css-Datei jedoch direkt in die Child Css -Datei, spart man sich schon einen Request.

Alternativ könnte man kleinere Css-Befehle direkt im HEAD-Bereich einbinden. Auch das spart Requests.

Tipp:
Wer keine Hand an den Code legen will, der kann WordPress Plugins nutzen. Es gibt einige wie zum Beispiel WP Minify and Better WordPress Minify welche Css-Dateien und JavaScript in eine einzelne Datei packen.

Objekte verkleinern

Zur Anzahl gleichzeitiger Requests kommt die Größe der abzurufenden Objekte. Je größer(in Kilobyte) ein Objekt (z.B. ein Bild oder CSS-Datei) ist, desto länger dauert es dieses zu laden.

Eine Möglichkeit wäre das Plugin Smush-It zu nutzen welches ein Bild beim Upload in die Mediathek automatisch komprimiert. 

Die Bildoptimierung kann sehr umfangreich sein und wird ausführlich (von der Analyse, bis zur Umsetzung) in meinem eBook zur Beschleunigung von WordPress Seiten beschrieben.