PageSpeed.ONE-Studie: Einfluss von Chat-Widgets auf die Website-Geschwindigkeit

Live-Chat wird von zwanzig Prozent der Betreiber tschechischer E-Shops genutzt. Aber wie beeinflussen diese Komponenten die Geschwindigkeit der Website? Wir haben die zehn beliebtesten Live-Chats genauer unter die Lupe genommen und dabei einiges Interessantes erfahren.

Die Zusammenfassung unserer Erkenntnisse konnten Sie in unserer gestreamten Sendung „Na rychlosti záleží“ sehen. Im Folgenden präsentieren wir die Studie im Detail.

Aus Sicht der Geschwindigkeit schnitten die Widgets von LimeTalk, Daktela oder LiveAgent am besten ab. Auch mit dem populärsten SmartSupp machen Sie in Sachen Ladeleistung keinen Fehler.

Vorsicht ist hingegen bei Manychat, Zopim und dem bekannten Facebook Chat Plugin (auch Messenger genannt) geboten. Die Unterschiede im Geschwindigkeitseinfluss zwischen den Chats sind wirklich groß. Übrigens, eines von ihnen kann Ihre Geschwindigkeitspunktzahl im Lighthouse-Tool um ganze 35 Punkte von 100 senken.

Welche sind die beliebtesten Live-Chat-Dienste in Tschechien?#

Aus der diesjährigen Reshoper-Studie ging hervor, dass etwa ein Fünftel der tschechischen E-Shops ein Chat-Widget verwenden. Live-Chats haben daher in Bezug auf die Nutzung einen Einfluss auf das Online-Kauferlebnis vieler Tschechen.

Dank Filip Podstavec von Marketing Miner erhielten wir im November 2020 aktualisierte Daten zu den meistgenutzten Web-Chats in Tschechien. Unangefochtener Spitzenreiter ist Smartsupp, gefolgt von:

1. SmartSupp
2. Facebook Chat Plugin
3. Tawk
4. Zendesk/Zopim
5. FoxyDesk
6. Livechatoo
7. LimeTalk
8. Daktela
9. LiveAgent
10. Manychat

Wie haben wir gemessen?#

Unsere Methodik sah folgendermaßen aus:

• Jeder Live-Chat wurde gemäß den grundlegenden Anweisungen des Herstellers in eine vollkommen leere Seite sowie in eine komplexere Seite eingefügt – hierfür wählten wir die Landkit Vorlage.
• Jede erstellte Testseite wurde über mehrere Tage mit synthetischen Tests von SpeedCurve gemessen, um ein langsames mobiles Gerät, das Samsung Galaxy S4, zu emulieren. Dashboard mit Ergebnissen. Tabellen mit Ergebnissen.
• Die beliebtesten Dienste wurden zudem von unserem Kollegen Michal Matuška in manuellen Browser-Tests untersucht. Er konzentrierte sich dabei auf die Validierung der Ergebnisse der synthetischen Tests und suchte nach Optimierungsmöglichkeiten für sowohl Webseitenbetreiber als auch Widget-Autoren.

Was haben wir gemessen?#

Um die gewonnenen Ergebnisse vergleichen zu können, griffen wir selbstverständlich auf mehrere verfügbare Geschwindigkeitsmetriken zurück.

Beginnen wir mit den technischen Indikatoren. Im Gesamtbild spielen sie eine geringere Rolle, aber hier wird sichtbar, warum wir uns mit ihnen beschäftigt haben.

Übertragene Daten#

Das Datenvolumen, das die Widgets herunterladen, mag aus heutiger Sicht als weniger bedeutende Metrik erscheinen.

Allerdings – als Webseitenbetreiber möchten Sie vermutlich nicht, dass Ihre Nutzer allein für den Chat-Dienst einen ganzen Megabyte zusätzlich herunterladen. Glauben Sie, das könne nicht passieren? Dann schenken Sie uns bitte noch einen Moment Ihrer Aufmerksamkeit.

Wenn die Live-Chat-Daten zudem zu einem ungünstigen Zeitpunkt übertragen werden, könnte der Browser dadurch beim Herunterladen weitaus wichtigerer Elemente Ihrer Webseite verlangsamt werden.

Wie fiel das Ergebnis aus?

• Limetalk übertraf mit nur 8 übertragenen Kilobyte (!).
• Dank der Entwickler von Facebook werden mit dem Messenger über ein Megabyte an Daten in Ihre Webseite geladen. Bei Manychat stoppte der Zähler sogar bei 1,1 MB.

Anzahl der heruntergeladenen Dateien#

Die Anzahl der Dateien spielt in Zeiten moderner Protokolle wie HTTP/2 und HTTP/3 keine so große Rolle, solange die Dateien klein sind.

Aber dennoch – es ist höflich, die Anzahl der heruntergeladenen Dateien im Zaum zu halten, da sie sich mit den Dateien Ihrer Webseite teilen müssen.

• Hervorragende Ergebnisse erzielten hier LimeTalk und Daktela (jeweils 5 Dateien) oder LiveAgent (7 Dateien).
• Facebook lädt 42, Manychat sogar 49 Dateien herunter. Aus dieser Menge könnte man schon eine ziemlich große Webseite zusammensetzen.

Es sei jedoch angemerkt, dass die gewählte Rendering-Strategie der Chat-Autoren eine Rolle spielt. Einige Dienste laden von Anfang an eine große Menge an Daten herunter, aber die „Blase“ ihres Chats ist relativ schnell verfügbar. Bei anderen, datenschonenderen Diensten dauert die erste Anzeige hingegen eine Weile.

Kommen wir zum nächsten Indikator. Hier wird es ernst, denn wir halten ihn für einen wichtigen Indikator für den Geschwindigkeitseinfluss.

Lighthouse Performance Score (LPS)#

Das „Lighthouse Score“ konnten wir nicht auslassen. Es besteht aus sechs wesentlichen Metriken und gibt ein plastisches Bild der möglichen Gesamtgeschwindigkeit einer Webseite. Mehr über LPS.

Wie beeinflussen die Chats die LPS-Metrik auf einer leeren Seite?

• Hervorragend sind LimeTalk, Daktela und LiveAgent – das Lighthouse Score (gemessen über SpeedCurve) bleibt bei 100 Punkten. Auch die großartigen Ergebnisse von Livechatoo (99 von 100 Punkten) und SmartSupp (95 Punkte) verdienen Anerkennung.
• Der Blick auf das Ende des Feldes ist bei dieser Metrik sehr traurig. Zopim reduziert das Lighthouse-Score einer leeren Seite von hundert auf 67 Punkte, Manychat sogar auf 65 Punkte. Das ist wirklich schlecht.

Hier könnten wir bereits sagen, dass wir die Gewinner und Verlierer kennen. Aber so einfach ist es nicht. Wir möchten Sie noch auf weitere wesentliche Faktoren hinweisen.

Beginnen wir mit einer Metrik, die zwar Teil des Lighthouse Performance Scores ist, aber bei Drittanbieterkomponenten als eine der wichtigsten wahrgenommen wird.

Total Blocking Time (TBT)#

Die „Total Blocking Time“ gibt den Zeitraum an, den der Browser benötigt, um komplexe Aufgaben in JavaScript zu verarbeiten, währenddessen der Benutzer also nicht mit der bereits gerenderten Seite interagieren kann. Mehr über TBT.

Werfen wir einen Blick auf die Gewinner und Verlierer auch bei diesem Indikator:

• Bei LimeTalk und LiveAgent maß SpeedCurve in allen Tests eine blockierende Zeit von null, was großartig ist. Hervorragende Ergebnisse erzielten auch Livechatoo (10 ms), FoxyDesk (28 ms), Daktela (46 ms), aber auch die Ergebnisse des populären Smartsupp (270 ms) sind nicht schlecht.
• Zopim (1.079 ms) liegt aus unserer Sicht jenseits der tragbaren Werte und Manychat bewegt sich am Rande (438 ms).

Zum Kontext – wir haben auf einer Mobil-Emulation gemessen, bei der zum Beispiel die standardmäßig eingestellten Google Analytics etwa 100 ms TBT verbrauchen.

In einer idealen Welt wäre es das Beste, wenn Komponenten bei der Verarbeitung von JavaScript keine Intervallzeiten über 50 ms hätten, die TBT misst. Aber als Entwickler ist uns klar, dass dies ein schwer erreichbares Ziel ist.

Abgesehen vom oben erwähnten Zopim könnten wir hier feststellen, dass die gemessenen Live-Chats weniger negative Auswirkungen auf die Benutzerinteraktivität haben als erwartet.

Geschwindigkeit der Chat-Anzeige#

Wie Sie vielleicht im Video gesehen haben, legte Michal Matuška bei der detaillierten Untersuchung der beliebtesten Widgets im Browser auch Wert auf die Geschwindigkeit der Anzeige. Es ergab sich folgendes Bild:

Chat	Anzeigegeschwindigkeit
SmartSupp	5 s
Facebook	7 s
Tawk	2,7 s

Am schnellsten wird Tawk angezeigt, aber es ist wahr, dass die Entwickler die Strategie einer schnellen Anzeige der anfänglichen „Blase“ gewählt haben, sodass die Initialisierung des Kommunikationsfensters bei Tawk noch eine Weile dauert.

Wir wetten, dass es im Interesse der meisten Webseitenbetreiber liegt, zunächst ihren wesentlichen Inhalt anzuzeigen und die Kommunikationswerkzeuge erst als zweite oder dritte Priorität zu rendern.

Diese Strategie ist nicht unbedingt jedermanns Sache, aber wenn wir uns daran halten, kann das spätere Anzeigen von SmartSupp oder Facebook unproblematisch sein. Im Gegenteil, es könnte sinnvoll sein, die Priorität von Tawk, das schnell lädt und rendert, zu senken oder es anderweitig zu verzögern.

Jetzt kommen wir zum Finale, denn sicherlich interessiert Sie das endgültige Urteil.

Gesamtbewertung#

Zunächst übertragen wir alle Ergebnisse in eine Tabelle.

	LPS	Geladene kB	Dateien	TBT in ms
SmartSupp	95	247	12	270
Facebook	78	1.052	42	319
Tawk	93	177	16	135
Zopim	67	554	15	1.079
FoxyDesk	87	517	30	28
Livechatoo	99	49	16	10
LimeTalk	100	8	5	0
Daktela	100	36	5	46
LiveAgent	100	27	7	0
Manychat	65	1.127	49	438

Tabelle mit den Testergebnissen: LPS steht für Lighthouse Performance Score, gefolgt von der Anzahl der heruntergeladenen Kilobyte, der Anzahl der Dateien und der Total Blocking Time in ms. Erklärungen der Metriken und eine tiefere Analyse finden Sie im obigen Text.

Bei jedem bewerteten Kriterium suchten wir zwei bis drei der besten und schlechtesten Live-Chats (rot hervorgehoben).

Je mehr grüne Zahlen ein Chat-Widget erhielt, desto besser. Kommunikationswerkzeuge mit mehr als einer roten Zahl sollten Sie hingegen unbedingt meiden.

Fassen wir die Ergebnisse in einigen auf Geschwindigkeitstests basierenden Empfehlungen zusammen:

• Wir empfehlen Ihnen wärmstens, einen Chat aus der Dreiergruppe LimeTalk, Daktela oder LiveAgent zu wählen. Insbesondere der erstgenannte erzielt wirklich großartige Bewertungen. Auch mit SmartSupp, Tawk oder Livechatoo machen Sie in Sachen Ladeleistung keinen Fehler. Sie haben zwar nicht überragend abgeschnitten, aber ihre Ergebnisse sind durchaus ordentlich.
• In unserer Studie schneidet hingegen Manychat schlecht ab, gefolgt von Zopim und Facebook.

Lassen Sie uns noch einmal betonen, dass wir hier keine anderen Parameter als die Geschwindigkeit berücksichtigt haben, aber wir gehen davon aus, dass Sie dies bei der Auswahl der geeigneten Komponente tun werden.

Analyse der drei wichtigsten im Browser#

Neben Martins Messungen von SpeedCurve führte Michal eine detaillierte Analyse des Downloads und Renderings der drei beliebtesten Chat-Tools direkt mithilfe der Entwicklertools im Chrome-Browser durch.

Die Messungen wurden in Chrome (Version 86.0.4240.183 (Official Build) (x86_64)) und im Inkognito-Modus im mobilen Ansicht durchgeführt.

SmartSupp#

Der Chat wird etwa um die fünfte Sekunde herum angezeigt. Der Wasserfall des Downloads der einzelnen Dateien, die für den Start notwendig sind, könnte verbessert werden. Dadurch würde der Chat schneller angezeigt werden. Das Kettenverhalten halten wir für unnötig. Jeder entfernte Abschnitt bedeutet hier einen erheblichen Fortschritt.

Kettenverhalten beim Download von SmartSupp-Dateien.

Der JavaScript-Laufzeit beträgt im Browser etwa 380 ms, was wir für ein gutes Ergebnis halten.

Facebook Chat Plugin#

Der Chat wird etwa um die sechste Sekunde herum angezeigt. Ein Verbesserungsvorschlag für Facebook ist sicherlich die bereits erwähnte Datenmenge. Es gibt viele übertragene Daten in großen Dateien, JavaScript, das heruntergeladen und ausgeführt werden muss. Dies verzögert die Anzeige. Übertragene Daten verlangsamen auch das Laden anderer Ressourcen, auf die die Webseite angewiesen ist.

Angesichts des Datenvolumens würden Sie bei der Implementierung des Facebook Chats am meisten von der Methode des Lazy Loadings profitieren, die wir im weiteren Text erwähnen.

Tawk#

Der Chat wird etwa um die dritte Sekunde herum angezeigt. Der Download-Wasserfall sieht fast exemplarisch aus:

Der Wasserfall des Datei-Downloads des Tawk-Widgets sieht wirklich wie ein Wasserfall aus. Quelle: Chrome DevTools.

Hier gibt es eigentlich nichts hinzuzufügen. Wir waren nur von drei Referenzen auf Google-Schriften überrascht. Außerdem scheint es sich um einen Verweis auf dieselbe Datei zu handeln:

Mehrfache Anfragen für dieselben Dateien trüben den ansonsten hervorragenden Eindruck von Tawk ein wenig. Aber das ist eine Kleinigkeit, die im normalen Betrieb dank HTTP-Caching nicht auffällt.

Die Laufzeit selbst wird in etwa 300 ms verarbeitet, was ebenfalls sehr gut ist.

Ein paar Anmerkungen zu SmartSupp und LiveAgent#

Wir waren erfreut über die sehr guten Ergebnisse von zwei lokalen Produkten – dem tschechischen SmartSupp und dem slowakischen LiveAgent.

Smartsupp gehörte bis vor kurzem in Bezug auf die Geschwindigkeit der Webseite nicht zu den Spitzenreitern, aber mit dem Übergang zur neuen Version des Widgets haben sich die Zahlen bei vielen unserer Kunden deutlich verbessert.

Einsatz der neuen Widget-Version von SmartSupp bei einem unserer Kunden, einem mittelgroßen E-Shop.

Wir standen in Kontakt mit beiden Unternehmen und müssen sagen, dass sie die Geschwindigkeit definitiv nicht auf die leichte Schulter nehmen.

Damit möchten wir auch Sie motivieren. Wenn Sie aus irgendeinem Grund einen der langsameren Chats verwenden, zögern Sie nicht, sich mit den Autoren in Verbindung zu setzen. Aber das führt bereits zu allgemeinen Empfehlungen, die wir uns für den Schluss aufgehoben haben.

Eine weitere tschechische Software – FoxyDesk – erzielte ebenfalls anständige Ergebnisse, aber wir würden es vorziehen, wenn das Widget weniger Dateien und Daten herunterladen würde.

Allgemeine Empfehlungen für Entwickler, Marketer und Webseitenbetreiber#

Zum Abschluss geben wir Ihnen allgemeine Empfehlungen, unabhängig davon, welches Tool Sie für den Live-Chat verwenden.

Wählen Sie den Live-Chat auch nach Geschwindigkeit aus#

Fügen Sie Geschwindigkeit zu den Kriterien für die Auswahl eines Live-Chats hinzu. Wie in unserer Studie zu sehen ist, beeinflussen viele von ihnen die Geschwindigkeit Ihrer Webseite erheblich.

Messen Sie den Einfluss von Drittanbieterkomponenten#

Messen Sie den Einfluss von Drittanbieterkomponenten. Wir verwenden die Third-Party-Analyse in SpeedCurve, aber auch die Analyse von Drittanbietern aus dem einfachen Lighthouse kann Ihnen erheblich helfen. Mehr über die Analyse von Drittanbieterkomponenten und die Optimierung von Third-Party-JS auf web.dev.

Im PLUS-Monitoring bieten wir die Möglichkeit, die Gesamtwirkung von Drittanbieterkomponenten mithilfe der 3PBT-Metrik zu messen.

Kommunizieren Sie mit den Widget-Autoren#

Sehen Sie einen unangenehmen Einfluss des Widgets auf die Geschwindigkeit der anfänglichen Seitenanzeige? Schreiben Sie zunächst den Autoren, möglicherweise haben sie das Problem einfach noch nicht angegangen.

Erwägen Sie Lazy Loading des Widgets#

Erwägen Sie gegebenenfalls die Methode des Lazy Loadings des Chats.

Optimiertes Widget auf Smarty.cz.

Die Methode des Lazy Loadings besteht darin, den Live-Chat durch ein Platzhaltersymbol (meistens ein Bild) zu ersetzen.

Das eigentliche Chat-Widget wird dann später geladen. Die erste Möglichkeit ist die Auslösung durch eine Benutzeraktion, wie z.B. das Klicken auf den Platzhalter oder das Annähern des Cursors. Die zweite Möglichkeit ist das Herunterladen nach einer bestimmten Zeit, sodass die Dateien des Widgets das Herunterladen und Ausführen wichtigerer Seitenelemente nicht verlangsamen.

Wenn Sie Hilfe bei der Optimierung des Live-Chats oder der Geschwindigkeit Ihrer Webseite benötigen, zögern Sie nicht, sich an PageSpeed.ONE zu wenden.