Kontakt

Absolut wichtig – die Geschwindigkeit einer Website

Zusammenhang von Umsatz und Performance. Es gibt keinen entschuldbaren Grund für langsame Websites.

Website Performance

Wieso die Ladegeschwindigkeit so entscheidend ist!

In nur 3 Sekunden 50% Traffic verlieren?

Wieso die Ladegeschwindigkeit so entscheiden ist!

53% der Besuche werden mit hoher Wahrscheinlichkeit abgebrochen, wenn die Seite länger als 3 Sekunden lädt.

Jeder zweite Besucher erwartet das eine Website in unter 2 Sekunden geladen wird.

46% aller Besucher geben beim Aufruf über ein Mobilgerät das Warten auf eine fertig geladene Website als Hauptgrund für Frustration an.

Zusätzlich wurde herausgefunden das Seiten die innerhalb von 5 Sekunden bei Besuchern vollständig geladen sind insgesamt 70% längere Verweildauern35% niedrigere Absprungraten und 25% höhere Sichtbarkeit von Anzeigen zur Folge haben!

Erkenntnisse stammen aus einer weit angelegten Studie (über 10,000 ausgewertete, mobile Seiten) von Google.

Alte Ladezeit der ruhmesmeile-Website

Um die eigene Website zu testen, können Sie zum Beispiel für einen ersten, oberflächlichen Eindruck folgendes Tool von Google verwenden:
Google Test My Site

Es gibt keinen Grund für langsame Websites!

Warum es sich lohnt die Ladezeit zu optimieren

Die Ladezeitgeschwindigkeit einer Website ist eines der wenigen Qualitätskriterien einer Website, die immer optimal sein sollte. Bei anderen Kriterien sind, abhängig vom Kontext, und je nach Zielsetzung, Kompromisse manchmal sinnvoll. Die Ladezeit-Performance sollte jedoch immer optimal sein. Nun heißt optimal wiederum nicht immer auch maximal schnell. Denn die Geschwindigkeit wird auch durch den eingesetzten Content, insbesondere Bilder, aber auch den Grad an dynamisch nachgeladenen / personalisierten Inhalten, die angezeigt werden, beeinflusst.

Wie schnell der Besucher einer Website mit dem Inhalt auch wirklich interagieren kann beeinflusst massgeblich die Verweildauer. Nach mehreren Studien wirkt es sich positiv bei guter Performance (Studie CookStudie Pinterest), oder aber negativ bei schlechter Performance (Studie BBCStudie DoubleClickauf die Verweildauer des Besuchers aus. Die Auswirkungen stehen somit im direkten Zusammenhang mit der Erreichung der Ziele der Website. Diese können vom messbaren Verkauf eines Produkts, also einer direkten Conversion, über die Anmeldung zu Newslettern und Marketing-Emails bis hin zum gelenkten Auffinden bestimmter Seiten / Informationen durch den Besucher reichen.

Zusätzlich muss bei der Ladegeschwindigkeit heutzutage neben dem Aufruf über schnelle Internetleitungen auf Desktop-PCs auch der Aufruf durch Mobilgeräte berücksichtigt werden, die über das Mobilfunk-Netz nur wesentlich niedrigere Übertragungsraten erreichen. Eine langsame Website wird in diesem Kontext also lediglich noch langsamer!

Was bedeutet Ladegeschwindigkeit genau?

LADEGESCHWINDIGKEIT

Die Seitenladezeit, bzw. der PageSpeed oder die Performance einer Website, geben grundsätzlich erst mal an wie groß das Zeitintervall zwischen dem Absenden der Anfrage (Request) und dem vollständigen Laden einer Website ist (Response).

Also wie lange ein Benutzer darauf warten muss mit der final dargestellten Website zu interagieren.

Die Betrachtung und Messung des PageSpeeds wird dabei meist in vier Messstationen unterteilt:
Time to First Byte (TTFB), First Contentful Paint (FCP), First Meaningful Paint (FMP) und Time to Interactive (TTI)

Begrifflichkeiten

Time to First Byte (TTFB)

Definiert den Zeitraum, startend mit der Anfrage der Website durch einen Benutzer, und endend mit dem ersten durch den Browser geladenen Bytes der Website.

Erst danach kann mit der Anzeige von ersten, für den Benutzer sichtbaren Inhalten durch den Browser begonnen werden.

First Contentful Paint (FCP)

Definiert den Zeitraum den die Seite braucht bis das erste Bild- oder Textelement durch den Besucher im Browser zu sehen ist.

First Meaningful Paint (FMP)

Misst die Zeitspanne ab Aufruf des Website, bis der größte Teil des ersten, durch den Benutzer zu sehenden Screens ("Above-the-fold") geladen wurde.

Es ergeben sich ab hier also nur noch kleinere Änderungen im sichtbaren Inhalt der Website.

Time to Interactive (TTI)

Definiert den Zeitraum den die Seite zum Laden braucht bis der Nutzer Sie vollständig nutzen kann.

Wovon ist die Ladegeschwindigkeit abhängig?

Welche Faktoren für die Ladegeschwindigkeit eine Zentrale Rolle spielen

Grundsätzlich hängt die Ladegeschwindigkeit von den folgenden, zentralen Faktoren ab:

  • Performance des Servers auf dem die Website betrieben wird,
  • Konfiguration der Website; wie gut Server und Website zusammenarbeiten,
  • Größe der Seite die zu laden ist (Bilder, Layout und Inhalt),
  • Performance und Übertragungsrate des Endgeräts des Besuchers,
  • und schlussendlich der Implementierung des Frontends; also wie effizient der Aufbau des für den Besucher sichtbaren Interfaces abgeschlossen wird

Alle diese Faktoren finden sich in den bereits erwähnten Metriken (TTFBFCPFMPTTI) auf die eine oder andere Weise wieder.

So hängt das Time to First Byte (TTFB) gerade von der Performance des Servers ab, während ein First Meaningful Paint (FMP) erst möglich wird, wenn der Großteil der Seite geladen ist. Und auch die Time to Interactive (TTI) kann nur dann schnell erreicht werden, wenn der Besucher im Moment des Aufrufs auch zusätzlich noch schnelles Netz zur Verfügung hat.

Wie werden diese abstrakten Zahlen greifbar?

Hin zu einer ganzheitlichen Betrachtung von Ladegeschwindigkeit

Die Performance-Analyse von Websites basiert historisch darauf einzelne Messstationen (zum Beispiel First Contentful PaintFCP) zu betrachten und zu optimieren. Und obwohl über die Zeit eine Reihe weiterer, und auch komplexerer, Messwerte hinzugenommen wurden (zum Beispiel Time to Interactive; TTI), ergibt sich noch kein übergreifendes, zusammenhängendes Gefühl für die Geschwindigkeit / Performance einer Website.

Das Kernproblem ist dabei das Betrachten einer Reihe, voneinander unabhängiger, Werte, anstatt die Ladegeschwindigkeit, und damit die User Experience (UX), ganzheitlich zu verstehen.

Als Antwort darauf wurde der Speed Index entwickelt:

Ein Speed Index bestimmt den gemittelten Zeitpunkt für das Anzeigen von Inhalten. Um so länger Inhalte laden, um so höher ist der Speed Index. Wird also zum Beispiel ein Popup erst 7 Sekunden nach Seitenaufruf, ohne weitere Interaktion durch den Benutzer, angezeigt, so ist die Seite dem Speed Index nach auch erst nach  7 Sekunden wirklich fertig geladen. Ein niedrigerer Speed Index ist also besser!

Anders formuliert: Um so mehr Inhalt schnell und final zu sehen ist, um so besser der Speed Index, und um so besser in der Folge auch das Nutzererlebnis (UX).

Mittlerweile nutzt auch Google einen Speed Index als zentrale Metrik für Website Performance, auch innerhalb des PageSpeed Insights-Tools:
https://developers.google.com/web/tools/lighthouse/audits/speed-index

Gute Performance!
Speed Index: 1219
bereits nach 0,3 Sekunden > 90 % der Inhalte zu sehen

Schlechte Performance!
Speed Index: 9022
>80 % der Inhalte erst nach 11 Sekunden sichtbar

Wie den Überblick behalten?

Wie löst ruhmesmeile das Problem und wie könnten Sie davon profitieren?

So vielfältig wie die Faktoren die Einfluss auf die finale Ladegeschwindigkeit einer Website haben, gestalten sich auch die Lösungsansätze die wir verfolgen:

  • Reduktion der verwendeten Assets (CSSJavaScript, Bilder) auf nur die tatsächlich verwendeten Teile
  • Optimieren von Bild-Dateien, um bei maximierter Qualität möglichst niedrige Dateigrößen zu erhalten
  • Verzicht auf schwergewichtige Abhängigkeiten, wo möglich (Einsatz kleiner gezielter Libraries, anstatt großer allgemeiner)
  • Komprimieren und Zusammenfassen von Dateien (insbesondere CSS und JavaScript)
  • Isolieren von Layout- / Design-Angaben (CSS) die für die initiale Ansicht eines neuen Benutzers benötigt werden (Optimierung des Critical Rendering Path), damit diese direkt mit der Seite ausgeliefert werden können
  • Übertragung über HTTP/2, wo möglich (ermöglicht mehr, parallele Downloads von Dateien ohne Overhead)
  • Hinweise an den Browser, welche Dateien mit Priorität zu laden sind (zum Beispiel über "rel=preload")
  • Berücksichtigung von Caching und Redundanz auf allen Ebenen einer Website (Server, Browser, Netzstruktur), um Inhalte möglichst nur einmalig teuer durch den Server erstellen zu lassen
  • Nutzung von Server- / Backend-Technologien (TYPO3), die bereits von sich aus einen Fokus auf Performance legen
  • langfristig angelegtes Monitoring und Reporting der Ladegeschwindigkeit

Weiterhin setzen wir auf Tooling zur stetigen Analyse und Monitoring von durch uns umgesetzten TYPO3-Systemen:

SITESPEED.IO

Ermittelt die zentralen Performance-Metriken für uns, und übertragt diese in eine zentrale Datenbank für spätere Auswertungen. Neben reiner Performance werden auch SEO-Merkmale und der semantische Aufbau analysiert.

Performance-Messungen laufen alle 8 Stunden, sowohl für das Live-System, als auch das Abnahme-System.

 

Hier gehts zum Tool.

GRAFANA

Zeigt die ermittelten Werte in verschiedenen grafischen Aufbereitungen an.

Der Fokus liegt darauf die Entwicklung der relevanten Werte über einen definierten Zeitraum zu betrachteten. So können sowohl positive als auch negative Entwicklungen frühzeitig erkannt werden.

Hier gehts zum Tool

BLACKFIRE.IO

Für die tiefere Analyse von Performance-Engpässen, insbesondere wenn diese im Backend auftreten, nutzen wir Blackfire.io als Profiler.

Dieses zeigt detailliert, wo während der Erzeugung der angefragten Website die Zeit verbracht wird. Auf diese Weise können gezielt Probleme erkannt und behoben werden.

Hier geht's zum Tool.

Die durch dieses Tooling ermittelten Ergebnisse werden Kunden monatlich, in reduzierter, verständlicher Form, zur Verfügung gestellt.

Zusätzlich basieren durch uns umgesetzte Websites grundsätzlich auf TYPO3.

Der Plattformgedanke, und die damit einhergehenden flexiblen Konfigurationsmöglichkeiten des Systems, können auf der einen Seite aufgrund ihrer Komplexität als Nachteil empfunden werden. Auf der anderen Seite bieten sie gerade die Entscheidungsfreiheiten, die es ermöglichen flexible und doch performante Websites zu entwickeln!

Im folgenden ein Zitat von Rick Viscomi (Google), einer der zentralen Figuren hinter der Chrome User Experience Report-Offensive, einer Initiative zur Messung und Verbesserung realer Website-Performance. Es wird der durchschnittliche First Contentful Paint (FCP) für die führenden CMS-Systeme weltweit gezeigt. Für TYPO3 gibt es hier den entsprechend größten Anteil an gut performenden Websites unter allen betrachteten CMS-Systemen!

"TYPO3 has the highest density of fast FCP"

Website Relaunch mit TYPO3

Ergebnisse aus der Praxis anhand unseres Kunden Deloro

Im Mai 2019 ging die neue Unternehmenswebsite des mittelständischen Werkstoffspezialisten Deloro aus Koblenz online. Technische Basis der neuen Website bildet auch hier das Open Source Content Management Systems TYPO3. Aufgrund unserer langjährigen Erfahrung mit dem CMS konnten wir dieses unter Berücksichtigung zahlreicher Best-Practices erweitern und auf die Bedürfnisse unseres Kunden anpassen.

In der Folge wurde eine Verbesserung des Google PageSpeed von 15 (Mobile) / 70 (Desktop) auf einen PageSpeed von 92 (Mobil) / 100 (Desktop) erreicht:

 

Der Speed Index konnte auf 600-700 reduziert werden, womit die Seite jetzt innerhalb der oberen 1% aller durch Google getesteten Websites (3.771.730 Seiten insgesamt) liegt:

In Folge dieser Optimierungen konnte der Kunde eine konkrete Steigerung an Umsatz generierenden Anfragen über die Website messen!

Und wie bekomme ich meine TYPO3 Website schnell?

Sprechen Sie mit uns für eine erste Einschätzung

Weitere Themen aus diesem Bereich

TYPO3 Schulung

TYPO3 Plattform

TYPO3 Solr

TYPO3 Responsives Design