Ihr Sitespeed ist im Keller? Identifizieren Sie die 10 häufigsten Ursachen in weniger als einer Minute

1. Schlechte Backend Performance

Einer der wichtigsten Faktoren ist, wie lange es dauert, bis Ihr Webserver den angeforderten HTML Quellcode der Website an den Browser des Besuchers übertagen hat. Erst wenn der Code im Browser des Besuchers angekommen ist, kann der Browser überhaupt damit beginnen, die einzelnen Elemente der Seite zu laden und diese darzustellen. Drücken Sie F12 in Browser, um die Chrome Entwickler Werkzeuge aufzurufen und wechseln Sie auf das Register Netzwerk, dann laden Sie die zu testende Seite neu. Sie erhalten dann das Wasserfall Diagramm des Ladevorgangs. Wichtig ist hier der erste Eintrag. In unserem Beispiel benötigt die Website fast 4 Sekunden, um den HTML Code zu übertragen. Dies bedeutet, der Besucher sieht 4 Sekunden lang eine weiße Seite und sonst nichts. Dies deutet meist auf ein Problem des Backend Systems hin – eventuell ist Ihr Webserver überlastet bzw. Ihr CMS verwendet kein Caching.

2. Zu viele Objekte (Requests)

Jede Website ist aus unterschiedlichen Objekten wie Grafiken, Stylesheets mit CSS Anweisungen und JavaScript(s) zusammengesetzt. Jedes in der Seite eingebundene Objekt erzeugt einen Request (Zugriff des Browsers) auf Ihren oder einen externen Webserver und das kostet Zeit. Je mehr Requests, umso länger braucht Ihre Seite um vollständig geladen zu werden. Hier als Beispiel die Startseite der New York Times, welche 274 Request erzeugt und 30 Sekunden benötigt, bevor Sie vollständig geladen und gerendert ist. Der Effekt wird durch das lokale Caching Ihres Browsers zwar gemildert, Ziel sollte es aber sein, immer so wenig Requests wie möglich zu erzeugen. Bei vielen vom gleichen Server (Host) angeforderten Objekten besteht auch die Gefahr, dass Sie die fix in den Browsern festgelegten Limits der Anzahl gleichzeitiger paralleler Downloads zum Tragen kommen.

3. Ein "böses" Objekt hält alles auf

Oft ist es nur ein einzelnes Objekt, welches die Ladezeit Ihrer Website negativ beeinflusst. Solche Ausreißer lassen sich im Waterfall Chart auf Grund ihrer überproportionalen Länge des Ladebalkens meist einfach identifizieren. Hier sehen Sie am Beispiel einer Seite des bekannten UX Experten Jakob Nielsen, wie ein einzelnes Bild die Ladezeit um fast 10 Sekunden verlängert. Gerade nicht für das Web optimierte Bilder stellen hier den Flaschenhals dar. Wenn Sie über eine flotte Internetanbindung am PC verfügen, fällt dies meist nicht ins Gewicht, spätestens bei langsamen mobilen Anbindungen ist es sehr wahrscheinlich, dass Sie Ihren Besucher verlieren.

böses Objekt

4. Netzwerk Probleme

Bis eine Webseite zum Browser Ihres Besuchers gelangt, geht sie oft viele unterschiedliche Wege. Je nachdem von welchem Server im Netz ein Objekt geladen wird, werden unterschiedliche Netzwerkrouten verwendet. Diese haben alle unterschiedliche Geschwindigkeiten und weisen unterschiedliche Latenzen auf. Im folgenden Screenshot sehen Sie, wie solche Probleme im Waterfall Chart darstellen werden. Wenn Sie den Mouse Cursor über einen der Ladebalken bewegen, öffnet sich ein PopUp mit genauen Angaben zum jeweiligen Request. Im Beispiel erkennt man, dass z.B. die DNS Auflösung um einen Teil des FaceBook Like Widgets zu laden schon fast eine halbe Sekunde dauert und dann noch eine Wartezeit von fast einer Sekunde bis der eigentliche Download der Ressource beginnt. Diese Effekte treten gearde bei Widgets von Drittanbietern auf, welche ihre Ressourcen auf Content Delivery Networks ausgelagert haben und deren Netzwerkonfiguration für den Standort des Besuchers Ihrer Website nicht optimal ist.

5. Langsame Download Geschwindigkeit

Liegen keine Netzwerk Probleme vor, ist Ihre Internetanbindung ausreichend schnell und trotzdem zeigen viele von der Dateigröße her kleine Objekte lange Ladezeiten, dann ist davon auszugehen, dass die Internet Anbindung Ihres Servers nicht optimal ist. Im Waterfall sieht man dies schön am dünkleren Anteil des Ladezeitbalkens.

6. Blockierende JavaScripts

Eigentlich sollte bei einer schnellen Website das Waterfall Chart idealerweise eine von links oben nach rechts unten verlaufende Linie von möglichst kurzen Ladezeitbalken ergeben. Treten im Verlauf große Abstände zwischen zwei Objekten auf, kann man davon ausgehen, dass hier ein Objekt das Laden der Seite blockiert. Meist sind dies externe (3rd Party) JavaScripts, die nicht geladen bzw. geparst werden können. Bei kleinen Scripten sollten Sie prüfen, ob Sie diese nicht inline in den HTML Code einbetten können (dies spart Ihnen außerdem Requests). Moderne Browser unterstützen auch das async Attribut für die Einbindung von JavaScript und ermöglichen so das asynchrone Laden. Scripte welche noch die document.write Anweisung verwenden, können das asynchrone Laden von JavaScript verhindern. Versuchen Sie diese Scripte so zu ändern, dass sie ohne diesen Anweisungen auskommen.

7. Fehler auf der Seite

Natürlich sollten Sie auch prüfen, ob Ihre Webseite überhaupt fehlerfrei geladen werden kann. Ob und wie viele Fehler beim Ladevorgang aufgetreten sind, sehen Sie rechts oben in der Developer Console. Dies können z.B. nicht gefundene Ressourcen (Statuscode 404), falsch konfigurierte Server (wie hier dargestellt Statuscode 500), oder auch JavaScript Fehler sein. Solche Fehler gehören auf jeden Fall beseitigt, bevor Sie irgendwelche anderen Optimierungsmaßnahmen ergreifen.

8. Objekte werden in der falschen Reihenfolge geladen

Stellen Sie sicher, dass Sie jene Objekte in Ihrer Website zuerst laden, welche für den Benutzer interessant und wichtig sind (Content first). Beispiel: Moderne Tracking Scripte etwa benötigen Sie zumeist nicht am Anfang der Seite und können Sie auch am Ende laden, ohne die Funktion für den Besucher einzuschränken. Stellen Sie auch sicher, dass z.B. Plugins von beliebten JavaScript Bibliotheken wie jQuery in der richtigen Reihenfolge geladen werden. Viele (insbesondere ältere) der Plugins prüfen leider nicht, ob die Haup-Bibliothek schon geladen ist und erzeugen dann JavaScript Fehler.

Übrigens: Accelerated Mobile Pages stellen eine Möglichkeit dar, Objekte und Inhalte einer Seite nur dann zu laden, wenn sie sich im sichtbaren Bereich der Website befinden.

9. 3rd Party Tags

Die meist kostenlosen 3rd Party Tags von Sozialen Netzwerken, Videoportalen, oder Banner Netzwerken sind beliebt und leicht in die eigene Website zu integrieren. Leider neigen diese Widgets oft dazu, Code in die Seite zu injetzieren, der viele Reuqests erzeugt. Nachfolgend sehen Sie einen Auszug aus dem Waterfall Chart für ein einzelnes Facebook Widget, welches schon 20 Requests erzeugt.

10. Wartezeiten bis die Seite gerendert wird

Trotz aller Optimierungsmaßnahmen kann es sein, dass die Ladezeit, welche in den Diagnose Tools angezeigt wird, noch immer zu hoch ist. Dies kann unterschiedliche Ursachen haben. Je komplexer Ihre Website aufgebaut ist, umso mehr Rechenleistung und Zeit benötigt der Browser um die Seite darstellen zu können. Hier helfen dann nur mehr fortgeschrittenere Tools, um den Aufbau der Seite im Zeitverlauf zu visualisieren.

Hier am Beispiel unserer eigenen Website:
Laut Diagnose Tool benötigt unsere Website trotz aller Optimierungen ca. 5.3 Sekunden bis sie vollständig geladen ist.

Das kann doch nicht sein? Die Antwort ist: Ja und Nein.

Wir setzen auf unserer Startseite eine CSS Animation ein. Wenn diese zu laufen beginnt, ist der Rest der Website eigentlich schon komplett geladen und der Benutzer kann bereits nach 1,25 Sekunden (ohne Cache) mit der Site interagieren, während die CSS Animation noch läuft. Kostenpflichtige Tools wie Yottaa können dies visualisieren und Ihnen helfen, die Performance richtig zu beurteilen.

Alle diese Tipps haben Ihnen nicht geholfen?

Mit unseren Tipps haben Sie gute Chancen, Probleme, welche permanent und immer an der gleichen Stelle auftreten, rasch zu identifizieren.

Viele Probleme treten jedoch nur zeitweise auf und sind eine Kombination aus den diversen Fehlerquellen. Diese lassen sich erst durch eine kontinuierliche Langzeitüberwachung und tiefgehende Analyse der aufgezeichneten Testdaten identifizieren.

Wir bieten im Rahmen eines Sitespeed Gutachtens alle nötigen Tools und Leistungen an, um die Probleme und Ursachen zu erkennen und schlagen Ihnen konkrete Maßnahmen vor, wie diese zu beheben sind.

Interesse? Kontaktieren Sie uns! kontakt@e-dialog.group

PS: Falls Ihre Website kein Speed Problem hat und Sie trotzdem gerne die Tipps nachvollziehen möchten, finden Sie hier eine Liste mit wirklich langsamen Websites 😉