Chat-Widget 100% PageSpeed

Wie funktioniert ein Chat-Widget?

Ein Chat-Widget liegt meist in Form von etwas JavaScript-Code vor. Sie fügen diesen Code zum HTML Ihrer Webseite hinzu. Ohne selbst programmieren zu müssen, sehen Sie automatisch ein Chat-Widget auf Ihrer Seite erscheinen.

Das JavaScript, das das Chat-Widget erstellt hat, tut dies, indem es 1, 2 oder sogar 3 iFrames auf Ihrer Seite platziert. Ein iFrame ist eine Mini-Webseite, die in Ihre Seite eingebettet ist. Der Chat läuft nicht auf Ihrer Seite, sondern über die Seite des Chat-Plugins selbst. Es wird eine Verbindung zwischen dem iFrame und dem Chat-Server hergestellt, der den gesamten Chat abwickelt.

Einfluss eines Chat-Widgets auf den Lighthouse-Score

Das Laden des Chat-iFrames ist oft eine relativ teure Angelegenheit. Eine neue Chat-Seite muss innerhalb Ihrer Seite geladen werden. Diese Chat-Seite benötigt oft viel JavaScript und das braucht Zeit zum Laden und Ausführen. Alles in allem hat das einen erheblichen Einfluss auf Ihren Lighthouse-Score. Zum Beispiel: Unser Lighthouse-Score sank um nicht weniger als 35 Punkte:

1. Speed Index +3.6 Sek.
2. Time to Interactive +10.9 Sek..
3. Total Blocking Time +1 Sek..

Wie man den Lighthouse-Score mit einem Chat-Widget verbessert

Viele Webmaster denken, dass ein Chat-Widget die Seite einfach verlangsamt und dass man dagegen nichts tun kann, da sie wenig Kontrolle über das Chat-Widget haben. Sie haben teilweise recht. Das Stück JavaScript, das sie in ihre Seite einfügen müssen, verursacht nicht direkt die Verzögerung. Das JavaScript initiiert eine Reihe von Aktionen auf Ihrer Seite. Diese Aktionen verlangsamen die Webseite und tatsächlich: darauf haben Sie wenig Einfluss.

Deshalb müssen wir schlau sein und das Problem umgehen. Es gibt keine Alternative. Wir müssen sicherstellen, dass das Chat-Widget das Rendern der Seite nicht behindert. Das Chat-Widget sollte ausgeführt werden, nachdem der 'Main Thread' Ihres Browsers das Laden und Rendern der Seite abgeschlossen hat.

Wir erreichen dies durch die Verwendung der JavaScript-Funktion setTimeout() und des Page Load Events. Das Load Event wird ausgelöst, wenn HTML, CSS und JavaScript geladen und geparst sind. Die setTimeout()-Funktion führt einen gegebenen Befehl nach einer Anzahl von Millisekunden aus. Dieses Beispiel: setTimeout(function(){alert('test')},4000) wird nach 4 Sekunden (oder 4000ms) einen Alarm in Ihrem Browser anzeigen.

Wir können das Load Event und die setTimeout-Funktion verwenden, um das Rendern des Chat-Widgets auf 1500ms zu verzögern, nachdem HTML, CSS und JavaScripts geparst wurden. Zu diesem Zeitpunkt sind wir ziemlich sicher, dass der Main Thread des Browsers im Leerlauf ist.

Zuerst müssen wir das Chat-Widget in eine Funktion verpacken. Und dann diese Funktion 1500ms nach dem Load Event aufrufen, wenn der Main Thread höchstwahrscheinlich im Leerlauf ist. Wenn wir dies für das Facebook-Chat-Plugin auf dieser Seite implementieren, erhalten Sie schließlich diesen Code

var _x = function(d, s, id) {
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version: 'v8.0'
        });
    };
    var js, fjs = d.getElementsByTagName (s) [0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
    fjs.parentNode.insertBefore (js, fjs);
};

setTimeout(function() { _x(document, 'script', 'facebook-jssdk') }, 4000);

Sie können diesen Trick für jedes Chat-Plugin da draußen anwenden. Es erfordert etwas Handarbeit und Sie können zum Beispiel keine WordPress-Plugins verwenden. Kommen Sie nicht weiter? Ich helfe Ihnen gerne!

Haben wir nun alle PageSpeed-Probleme gelöst?

Wenn ein Chat-Widget auf die obige Weise lädt, erhalten wir einen 100% Lighthouse-Score für unser Chat-Widget. Bedeutet dies, dass wir alle PageSpeed-Probleme gelöst haben?

Ja, teilweise, aber nicht vollständig. Wir haben Progressive Rendering verwendet, um die wichtigsten Teile der Seite früh während des Seitenladens zu laden, während wir die weniger wichtigen Teile (das Chat-Widget) an das Ende des Ladezyklus geschoben haben. Wichtige Metriken wie der LCP (Largest Contentful Paint) und der FCP (First Contentful Paint) haben sich erheblich verbessert, da wir das Chat-Widget aus dem 'Critical Rendering Path' entfernt haben. Dies ermöglicht es dem Browser, den 'Blocking Mode' früher zu verlassen, was die initiale Blocking Time erheblich senkt.

Danach wird es eine andere Geschichte. Indem wir das Chat-Widget an das Ende des Ladezyklus der Seite schieben, fällt es aus der Lighthouse-Messung heraus. Sobald das Chat-Widget zu laden beginnt, wird der Main Thread des Browsers blockiert. Die Seite ist für einen Moment nicht mehr interaktiv. Die Auswirkung dieses Verhaltens hängt vom Chat-Widget ab. Die meisten beliebten Chat-Widgets werden die Seite nicht merklich blockieren, wenn sie später ausgeführt werden.

Chat-Widgets sind so gebaut, dass sie von Haus aus eine PageSpeed-Verzögerung verursachen. Um eine Seite zu beschleunigen, müssen wir Entscheidungen treffen. Diese Entscheidungen sind nie perfekt. Das Zurückschieben des Chat-Widgets an das Ende des Ladezyklus führt zu einem viel früheren LCP und FCP, andererseits sind einige Geschwindigkeitsgewinne Auslegungssache.