Laden Sie ein Chat-Widget mit perfekten Core Web Vitals

Wie man ein Chat-Widget richtig lädt!

Ich habe es immer wieder gesagt. Manche Skripte sind wichtiger als andere. Niemand in der Geschichte des Internets hat sich jemals darüber geärgert, dass ein Chat-Widget nicht in den ersten 500ms des Seitenladens geladen wurde. Jene Zeit, in der die Seite noch weiß ist.

Es würde keinen Sinn machen, richtig, ein Chat-Widget zu laden, bevor der Hauptinhalt der Seite überhaupt mit dem Laden begonnen hat? Nein, es würde viel mehr Sinn machen, zuerst die wichtigsten Teile zu laden (Ihr Logo, Ihr Hauptbild, Ihre Stylesheets, Ihre Schriften, vielleicht einige superwichtige Skripte, die Navigation und Konversion handhaben)

Leider ist dies nicht die Art und Weise, wie die meisten Websites Dinge tun. Täglich sehe ich unwichtige Skripte (wie Chat-Skripte) mit der höchsten Priorität direkt zu Beginn des Seitenladens laden.

In diesem Artikel werde ich erklären, wie man ein Chat-Skript korrekt lädt und wie dies wichtige Metriken wie den Largest Contentful Paint und den Interaction to Next Paint beeinflusst.

Hintergrund: Wie funktionieren Chat-Widgets

Ein Chat-Widget funktioniert normalerweise, indem es ein kleines Skript auf Ihrer Seite lädt. Dieses Skript lädt einige Stile und injiziert ein iFrame auf Ihre Seite. Ein iFrame ist eine kleine isolierte Webseite innerhalb einer Webseite. Und dieses iFrame handhabt alles, was es braucht, um mit Ihren Kunden zu chatten.

Wie beeinflussen Chat-Widgets die Core Web Vitals?

Chat-Widgets beeinflussen die Core Web Vitals auf einige Arten:

1. Sie beeinflussen den First Contentful Paint & Largest Contentful Paint, indem sie um frühe Netzwerkressourcen konkurrieren.

2. Sie beeinflussen den Interaction to Next Paint, indem sie den Main Thread blockieren und manchmal durch langsames Aktualisieren nach Interaktion.

3. Sie können Layout Shifts verursachen, wenn sie nicht korrekt auf der Seite rendern

Largest Contentful Paint Probleme verursacht durch Chat-Widgets

Ein Chat-Widget kann die Core Web Vitals beeinflussen, wenn es um Netzwerkressourcen konkurriert. JavaScript wird normalerweise früher für den Download in die Warteschlange gestellt als Bilder. Dies bedeutet, dass im schlimmsten Fall (wenn das Chat-Skript render blocking ist) der Browser warten muss, bis das Chat-Skript heruntergeladen und ausgeführt ist, bevor er mit irgendetwas anderem fortfahren kann.

Selbst wenn das Chat-Skript deferred ist, kann es immer noch Auswirkungen auf die Paint-Metriken auf einige Arten haben. Lassen Sie mich zuerst erklären, was deferred Skripte tun. Der Browser kann deferred Skripte parallel herunterladen und der Browser kann mit dem Rendern fortfahren bis zum DomContentLoaded Event. Danach wird er die Skripte ausführen. Das Problem ist, dass für wiederkehrende Besucher das LCP-Element wahrscheinlich nicht beim DomContentLoaded Event geladen sein wird, aber das (gecachete) Chat-Skript ausgeführt wird, was eine Verzögerung in LCP-Metriken verursacht.

Interaction to Next Paint (INP) Probleme verursacht durch Chat-Widgets.

Ein Chat-Widget kann und wird den Interaction to Next Paint auf 2 Arten beeinflussen. Die erste Art ist durch Blockieren des Main Threads für eine kurze Zeit, während das Chat-Widget seine Skripte ausführt oder nach Updates sucht. So funktionieren Dinge nun mal. Alles, was Sie 'zu einer Seite hinzufügen', wird die Seite ein wenig verlangsamen. 

Die zweite Art, wie es INP-Probleme verursachen kann, ist durch schlechten Code (und glauben Sie mir, es gibt einige schlecht codierte Chat-Widgets da draußen.) Wenn es um Chat-Widgets geht, bedeutet 'beliebter' nicht 'besser codiert'. Wenn schlechter Code lange braucht, um die Darstellung zu aktualisieren, erhalten Sie automatisch INP-Probleme. Ich schätze, einige Chat-Anbieter müssen ihr Spiel verbessern. Dieser Teil liegt leider außerhalb meiner Kontrolle. Wenn Sie ein 'schlecht codiertes' Chat-Widget gewählt haben, gibt es für mich keine Möglichkeit, diesen Code besser zu machen. 

Layout Shift (CLS) Probleme verursacht durch Chat-Widgets

Manchmal verursachen Chat-Widgets einen Layout Shift. Es gibt 3 übliche Verdächtige, nach denen ich suche, während ich auf Chat-Widget-bezogene Layout Shifts prüfe.

• Layout Shifts, die jedes Mal beim Laden des Chats auftreten
• Layout Shifts, die bei einem verzögerten 'Chat öffnen' auftreten
• Layout Shifts, die auftreten, wenn ein Chat-Verlauf geladen wird (wiederkehrender Chat-Besucher)

Wie man Core Web Vitals Probleme verursacht durch Chat-Skripte behebt

<script>
/* requestIdleCallback Fallback für ältere Browser  */
var safeRequestIdleCallback = window.requestIdleCallback || function (cb) {
    return setTimeout(function () {
        cb();
    }, 1);
}   

/* ausführen nach dem Load Event */
window.addEventListener('load', function () {
    /* wenn Browser inaktiv ist */
    safeRequestIdleCallback(function () {
        /* Skript injizieren, Preload Scanner umgehen */
        var script = document.createElement('script');
        script.src = 'ihr-chat-skript.js';
        document.body.appendChild(script);
    });
});
<script>

Fix Cumulative Layout Shifts Probleme verursacht durch Chat-Widgets

<style>
/*Chat-Widget standardmäßig verbergen*/
.chatwidget{opacity:0}
/*Chat-Widget nach .showchat Body Class anzeigen*/
body.showchat .chatwidget {opacity:1}
<style>

<script>
chat.ready(function(){
  document.documentElement.classList.add('showchat');
})
<script>

Das war's! Viel Glück beim Beschleunigen Ihres Chat-Widgets