« Zurück zum Magazine

Monster der Webseitenoptimierung: Das Monster der langsamen Ladezeit

Die Seitennavigation lädt bereits seit ein paar Minuten und die Abbildungen werden erst gar nicht angezeigt. Stattdessen wird ein grauer langweiliger “Loading”-Ring angezeigt oder – noch schlimmer – ein Ladebalken.

Wenn Deine Besucher mit solchen Anzeigen konfrontiert werden, bleibt ihnen meist nicht anderes übrig, als die Seite ganz schnell wieder zu verlassen.Ein untrügliches Zeichen dafür, dass das nächste Monster des Optimierungs-Alltags zugeschlagen hat: Das langsame Ladezeiten-Monster!

Magazin-Monster-PageSpeed

Nichts kann Deine User beim ersten Seitenaufruf mehr vergraulen, als eine langsame Ladezeit. Neben einer schlechten User Experience kann gerade für Onlineshop-Betreiber jede Millisekunde mehr Ladezeit große Einbußen des Umsatzes nach sich ziehen. Umso wichtiger ist es deshalb, dass Deine Webseite den nötigen Speed hat.

Laut einer Studie von kissmetrics erwarten knapp die Hälfte aller Internetnutzer eine Ladezeit von weniger als zwei Sekunden. Dauert das Laden mehr als drei Sekunden, springen 40 Prozent der Besucher ab. Je kürzer also Deine Ladezeit, desto höher die Verweildauer der Nutzer und desto kleiner die Absprungrate.

Wir zeigen Dir, was Du tun kannst, wenn das Monster der langsamen Ladezeit auch bei Dir zugeschlagen hat!

Unser monster-vernichtendes Praxis-Beispiel

Beim Aufruf einer Webseite erwarten Besucher neben einer technisch einwandfreien Funktionalität und qualitativ hochwertigem Content auch aussagekräftige Bilder. Je länger diese Elemente jedoch laden, umso langsamer baut sich die Seite insgesamt auf.

Im Diagramm von http-archive wird deutlich, dass Bild- und Videodateien ca. drei Viertel der durchschnittlichen Seitengröße von 2533 kB ausmachen. Wenn dann die Bilder verzögert erscheinen, stört das den Lesefluss und die User Experience ist mangelhaft.

Abbildung 1: httparchive, 2017

Besser ist es, die Bilder vor dem Einfügen zu komprimieren und das richtige Format zu wählen. Dafür kannst Du mit einem Bildbearbeitungsprogramm wie Gimp arbeiten. Hochauflösende Fotos speicherst Du als JPEG, kleine Grafiken als GIF.

Die Studie von httparchive zeigt auch die Durchschnittsgröße der einzelnen Dateiformate.

Abbildung 2: httparchive, 2017

Tipp: Für die Bildoptimierung kannst Du verschiedene Tools nutzen, zum Beispiel die Freeware jpegtran für JPG-Dateien oder PNGOUT für PNG-Dateien. Wenn Du Deine Bilder mit Photoshop bearbeitest, gibt es eine einfache Lösung: Klicke einfach im Reiter „Datei“ unter „Exportieren“ auf die Option „Für Web speichern“. So werden die Bilder automatisch in ihrer Größe reduziert.

Ladezeit überprüfen und optimieren

Welche Faktoren Du im konkreten Fall für Deine Mobil- und Desktop-Seiten optimieren solltest, zeigt Dir Googles PageSpeed Insights Tool. Für die Mobile Analyse wird hier eine sehr knappe Ladezeit empfohlen:

„PageSpeed Insights analysiert eine Seite, um festzustellen, ob diese unseren Empfehlungen für das Rendering einer Seite in einem Mobilfunknetz in weniger als einer Sekunde entspricht”.

Abbildung 3: Beispiel für einen Performance Level Test mit PageSpeed Insights

Die Bewertung der Seitengeschwindigkeit beträgt im PageSpeed Insights Tool zwischen 0 Punkte (schlecht) und 100 Punkte (sehr gut). Seiten mit einer Punktzahl ab 85 gelten als leistungsstark. PageSpeed Insights Ergebnisse können sich allerdings ständig ändern, sobald Google seine Regeln oder Analysemethoden weiterentwickelt. Auf dem Laufenden zu bleiben lohnt sich also.

So findest Du die langsamen Seiten auf Deiner Domain

Der Performance Report in Ryte kann Dir bei der Analyse der Server- Performance helfen und Ansatzpunkte zur Verbesserung geben.

So kannst Du beispielsweise,

  • überprüfen, welche Dateien Deiner Webseite bereits komprimiert werden

  • eine Gesamtübersicht über alle Ladezeiten Deiner Webseite erhalten

  • auf einen Blick erkennen, bei welchen Dateien Dein Server sehr langsam reagiert

  • Deine Serverleistung in wenigen Schritten analysieren

  • prüfen, auf welchen Seiten beispielsweise sehr viele CSS-Ressourcen geladen werden, die die Ladezeit beeinträchtigen.

  • Dir alle Bild-URLs anzeigen lassen, die für eine langsame Ladezeit sorgen

Öffne hierzu einfach den Performance Report im Modul Website Success und klicke auf “Ladezeiten”.

performance-report

Abbildung 4: Übersicht über die Ladezeiten der Webseite

Der Report zeigt Dir auf einen Blick, bei welchen Dateien Dein Server sehr langsam reagiert. Indem Du auf das Diagramm „Sehr langsam“ klickst aktivierst Du den Filter. Wähle anschließend den Dateityp mit der höchsten Zahl aus.

Du siehst nun anhand der Antwortzeit des Servers, wo Verbesserungsbedarf besteht. Auch die Time to First Byte gibt Dir Aufschluss darüber, bei welchen Dateien Dein Server zu lange braucht, um auf Crawler- oder Browseranfragen zu reagieren.

Fazit

Langsame Ladezeiten adé - Dank der oben genannten Tipps und mithilfe von Ryte machst Du diesem schleimigen Monster Beine! Mit einem optimierten Performance Level Deiner Seite erhöhst Du Deine Chancen, inmitten einer großen Online-Konkurrenz wahrgenommen zu werden. Achte also am besten von Anfang an auf eine geringe Verarbeitungszeit. Wichtige Faktoren sind dabei unter anderem die HTML-Struktur einer Seite sowie die richtige Verwendung von Skripten, Bildern, CSS und JavaScript. Einen ausführlichen Guide zur Optimierung der Ladezeit findest Du hier im Ryte Magazin.

Kennst Du schon die anderen Monster der Webseitenoptimierung:

Das Weiterleitungs-Monster

Das fehlende ALT-Attribute Monster

Das Thin Content Monster

Das 404 Monster

Das verwaiste Seiten Monster

Das falsche Canonical Tag Monster

Das Duplicate Content Monster

Das hreflang-Monster

Das Monster der internen Verlinkung

Bekämpfe jetzt das Monster der langsamen Ladezeit mit Ryte!

Veröffentlicht am May 15, 2017 von Eva Wagner