Pruefen, wann das Snippet laedt
Pruefen Sie das Timing desengine.js-Tags (frueher kameleoon.js genannt) nach dem Neuladen der Seite, wie im untenstehenden Screenshot gezeigt. Wenn die Metrik started at ueber 1 Sekunde liegt, fuegen Sie das Kameleoon-Skript weiter oben im <head>-Tag ein und setzen Sie fetchpriority="high". Diese Aenderungen stellen sicher, dass das Kameleoon-Skript in weniger als 1 Sekunde laedt.
Beim ersten Laden der Seite dauert das Kameleoon-Skript laenger, in der Regel unter 60 Millisekunden, da es direkt vom CDN heruntergeladen wird. Bei nachfolgenden Neuladevorgaengen wird das Skript aus dem Cache heruntergeladen.
Performance-Score ueber die Chrome-Erweiterung von Kameleoon pruefen
Fuehren Sie je nach dem in der Erweiterung angezeigten Performance-Score (siehe Screenshot unten) eine oder alle dieser Aktionen aus:- Stoppen Sie alle Experimente oder Personalisierungen, die seit mehr als 2 Monaten laufen, und uebertragen Sie den Code basierend auf dem Ergebnis des Experiments oder der Personalisierung in den Quellcode Ihrer Website.
- Archivieren Sie alle gestoppten Experimente oder Personalisierungen.
- Entfernen Sie alle ungenutzten Ziele, einschliesslich ihres Codes, wenn es sich um benutzerdefinierte Ziele handelt.
- Entfernen Sie alle ungenutzten Segmente.
- Entfernen Sie alle ungenutzten benutzerdefinierten Daten.
- Optimieren Sie das globale benutzerdefinierte Skript, um allen ungenutzten/veralteten Code zu entfernen.
Performance mit PageSpeed Insights verfolgen
Die Registerkarte Performance in den Entwickler-Tools des Browsers hilft, die Leistung einer Webseite zu analysieren, indem wichtige Daten wie Seitenladezeiten, Speichernutzung und Ressourcenverbrauch aufgezeichnet und visualisiert werden. Sie liefert detaillierte Einblicke in Rendering-, Scripting- und Layout-Prozesse in Form von Zeitleisten und Flame Charts. Dies kann helfen, Engpaesse, langsam ladende Skripte und andere geschwindigkeitsbeeinflussende Faktoren zu identifizieren. Google PageSpeed Insights analysiert den Inhalt einer Webseite und bietet Leistungseinblicke sowie Verbesserungsvorschlaege. Es vergibt einen Score und Vorschlaege basierend auf den Core Web Vitals wie Ladezeit, Interaktivitaet und visueller Stabilitaet. Die Ergebnisse werden in einem Berichtsformat mit Metriken wie “FCP”, “LCP”, “INP” und “CLS” angezeigt.
First Contentful Paint
First Contentful Paint (FCP) misst die Zeit zwischen dem Beginn des Seitenladens und dem Moment, in dem der Seiteninhalt auf dem Bildschirm angezeigt wird.- Moegliche Auswirkung: Anti-Flicker koennte den FCP beeinflussen, da es die Anzeige des ersten Elements auf der Seite verzoegert
- Aktion: Senken Sie den Timeout des Anti-Flicker von 1000 Millisekunden auf 500 Millisekunden oder entfernen Sie das Anti-Flicker-Skript, falls Kameleoon sehr frueh laedt (started at ≃ 500 Millisekunden). Das folgende Beispiel-Code-Snippet zeigt, wie das erreicht werden kann:
Largest Contentful Paint
Largest Contentful Paint (LCP) misst die wahrgenommene Ladegeschwindigkeit. Er markiert den Punkt in der Seitenladezeitleiste, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde.- Moegliche Auswirkung: Anti-Flicker koennte den LCP beeinflussen, da es die Anzeige des groessten Elements auf der Seite verzoegert
- Aktion: Gleich wie beim FCP oben.
Interaction to Next Paint
Interaction to Next Paint (INP) misst die Reaktionsfaehigkeit der Seite. Streben Sie einen INP von weniger als 200 Millisekunden an, um eine positive Nutzererfahrung zu bieten.- Moegliche Auswirkung: Wenn Kameleoon frueh laedt, sollte es keine negativen Auswirkungen geben. Tests, die das Verhalten einer Interaktion aendern, koennten diese Metrik jedoch beeinflussen.
- Aktion: Sie koennen die Kameleoon Chrome-Erweiterung oder den folgenden Code in der Konsole verwenden, um zu pruefen, welche Experimente / Personalisierungen auf der betreffenden Seite aktiv sind, um die moegliche Quelle der Auswirkung zu finden. Das folgende Beispiel-Code-Snippet zeigt, wie das erreicht werden kann:
Cumulative Layout Shift
Cumulative Layout Shift (CLS) misst die groesste Positionsaenderung eines Elements waehrend des Lebenszyklus der Seite. Beachten Sie, dass Layout-Verschiebungen nur auftreten, wenn vorhandene Elemente ihre Startposition aendern. Wenn ein neues Element zum DOM hinzugefuegt wird oder ein vorhandenes Element seine Groesse aendert, zaehlt dies nicht als Layout-Aenderung, solange die Aenderung keine Aenderung der Startposition anderer sichtbarer Elemente bewirkt.- Moegliche Auswirkung: Der Kameleoon-Tag hat keinen Einfluss auf diesen Index. Experimente / Personalisierungen koennen hingegen einen negativen Einfluss haben, wenn sie eine Aenderung der Startposition eines Elements verursachen.
- Aktion: Gleich wie beim INP oben.
Speed Index (ContentSquare-Metrik)
Der Speed Index misst den Zeitpunkt, an dem die Mehrheit der grafischen Elemente oberhalb des sichtbaren Bereichs angezeigt wird.- Moegliche Auswirkung: Anti-Flicker koennte den Speed Index beeinflussen, da es die Anzeige der Elemente oberhalb des sichtbaren Bereichs verzoegern kann. Wenn Sie zudem Experimente/Personalisierungen ausfuehren, die Aenderungen am oberen Seitenbereich vornehmen, wird der Speed Index negativ beeinflusst (er steigt).
- Aktionen: Gleich wie beim FCP und INP oben.
Eigenschaften des Kameleoon-Skripts auf einen Blick
- Asynchrones Snippet: Kameleoon laedt sein Skript asynchron von einem zuverlaessigen CDN (Cloudflare), um ein nicht blockierendes erstes Seitenladen zu gewaehrleisten, und nutzt das Browser-Caching fuer schnellere nachfolgende Seitenladevorgaenge. Kameleoon haelt ein Service Level Agreement (SLA) von ueber 99,99 % ein.
Stellen Sie sicher, dass das Kameleoon-Skript mit dem async-Attribut auf Ihrer Website installiert ist. Bitte beachten Sie das folgende Snippet:
- Geringe Skriptgroesse: Die mit TypeScript erstellte Anwendungsdatei von Kameleoon hat eine Groesse von nur 29 KB (mit Brotli komprimiert), was die Ladezeit beim ersten Seitenaufruf minimiert.
- Praeprozessor-Ansatz: Das Kameleoon-Skript wird nur aus den Komponenten generiert, die fuer Ihre spezifische Einrichtung erforderlich sind, basierend auf den Funktionen und Optionen, die Sie verwenden.
- Einzigartige Anti-Flicker-Engine: Die Engine von Kameleoon erfasst DOM-Ereignisse in Echtzeit und veraendert die Anzeige der an einer Experiment-Variation beteiligten Komponenten, bevor sie vollstaendig gerendert werden.
- Reduzierte Netzwerkaufrufe: Kameleoon fasst mehrere Tracking-Ereignisse in einem einzigen Beacon-Aufruf zusammen, was die Gesamtzahl der erforderlichen Netzwerkaufrufe erheblich reduziert.
- Einzelnes Skript-Laden: Im Gegensatz zu anderen Plattformen, die mehrere Dateien benoetigen, laedt Kameleoon ein einziges konsolidiertes Skript, was die Anzahl der HTTP-Anfragen reduziert.
- Verzoegertes Laden von Experimenten: Kameleoon ermoeglicht es Ihnen, im Einzelfall auszuwaehlen, welche Experimente zum Zeitpunkt des ersten Seitenaufrufs in die Anwendungsdatei
engine.js(frueherkameleoon.jsgenannt) aufgenommen werden sollen, und nicht essentielle Experimente nach dem ersten Laden zu verschieben. - Echtzeit-Update: Um haeufigere Updates zu ermoeglichen, ohne durch Browser-Caching behindert zu werden, aktualisiert die Funktion Live Update Experiments von Kameleoon jedes mit “LIVE-UPDATE” markierte Experiment innerhalb einer Minute.