Skip to main content
Flackern hat in der Regel zwei Hauptursachen:
  • Der Browser hat die Seite oder Teile davon bereits angezeigt, bevor das Skript geladen und ausgeführt wird. Dieses Timing-Problem hängt direkt damit zusammen, wie Sie Kameleoon auf Ihrer Website implementieren. Wenn Kameleoon zu spät lädt oder Sie es in ein Tag-Management-System integrieren, lässt sich das Flackern nicht vermeiden.
  • Die Engine, die die Variationen des Experiments verarbeitet, ist zu langsam und fuehrt die Aenderungen nicht schnell genug aus.
Das Skript von Kameleoon enthaelt eine einzigartige Anti-Flicker-Engine, die sicherstellt, dass A/B-Tests reibungslos laufen, sodass Testvariationen ohne Verzoegerungen angezeigt werden, was zu einer verbesserten Nutzererfahrung und zuverlaessigeren Testergebnissen fuehrt.

​
Wesentliche Vorteile der Technologie:

Hier sind einige Gruende, warum die Anti-Flicker-Technologie von Kameleoon einzigartig und leistungsstark ist:
  • 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.
  • Geringe Skriptgroesse: Die mit TypeScript erstellte Anwendungsdatei 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 erfasst DOM-Ereignisse in Echtzeit und veraendert die Anzeige der an einer Experiment-Variation beteiligten Komponenten, bevor sie vollstaendig gerendert werden.
  • Reduzierte Netzwerkaufrufe: Das Skript fasst mehrere Tracking-Ereignisse in einem einzigen Beacon-Aufruf zusammen, wodurch die Gesamtzahl der erforderlichen Netzwerkaufrufe erheblich reduziert wird.
  • Einzelnes Skript-Laden: Im Gegensatz zu anderen Plattformen, die mehrere Dateien benoetigen, laedt Kameleoon ein einziges konsolidiertes Skript. Dies reduziert die Anzahl der HTTP-Anfragen.
  • Verzoegertes Laden von Experimenten: Kameleoon ermoeglicht es Ihnen, im Einzelfall auszuwaehlen, welche Experimente zum Zeitpunkt des ersten Seitenaufrufs in die Anwendungsdatei engine.js (frueher kameleoon.js genannt) aufgenommen werden sollen, und nicht essentielle Experimente bis 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 jedes mit “LIVE-UPDATE” markierte Experiment innerhalb einer Minute.

​
Wie Sie Flackern in Ihren Experimenten verhindern

Um Flackern beim Laden der Anwendungsdatei zu beseitigen, verwenden Sie das asynchrone Tag mit Anti-Flicker-Schutz. Das Snippet enthält eine “blockierende CSS-Regel”, die zunächst alle Inhalte der Seite ausblendet, während der Browser das Skript herunterlädt. Kameleoon entfernt diese Regel, sobald das Kameleoon-Skript geladen ist, was in der Regel weniger als 50 Millisekunden dauert. Wenn das Kameleoon-Skript nicht innerhalb des angegebenen Timeouts (Standard 750 Millisekunden) geladen wird, entfernt Kameleoon die Regel ebenfalls, damit keine leere Seite unbegrenzt angezeigt wird. Dieser Ansatz stellt sicher, dass Kameleoon Ihre Website in keiner Situation stören kann.
Sie steuern den Timeout über die JavaScript-Variable kameleoonLoadingTimeout, die Sie im Kameleoon-Installations-Tag anpassen können. Standardmäßig hat diese Variable den Wert 750 Millisekunden. Kameleoon empfiehlt, diesen Wert beizubehalten. Diese Variable gibt die maximale Zeit an, in der das Kameleoon-Installations-Tag verhindern kann, dass Ihre Website angezeigt wird, waehrend es auf das Laden der Kameleoon-Anwendungsdatei wartet.Im Falle eines Timeouts bestimmt die gewaehlte Konfiguration, was als Naechstes geschieht, sobald der Kameleoon-Code schliesslich geladen wird. Sie haben in den erweiterten Bestaetigungseinstellungen Ihres Kameleoon-Projekts zwei Optionen:
  1. Kameleoon vollstaendig deaktivieren: Wenn ein Timeout auftritt, werden für diesen Besucher keine Experimente oder Personalisierungen ausgeführt.
  2. Code von Kameleoon normal ausfuehren: In diesem Fall wird der Code spaet ausgefuehrt, was zu Flackern auf der Seite fuehren kann.
Beachten Sie, dass Timeouts unter ueblichen Bedingungen (z. B. bei angemessener Internetgeschwindigkeit) relativ selten sein sollten und nur bei etwa 2-3 % Ihrer Besucher auftreten, sofern der Standard-Timeout-Wert nicht angepasst wird.
Obwohl nicht empfohlen, koennen Sie auch das synchrone Tag implementieren. Beim synchronen Laden rendert der Browser keinen Inhalt, bis die Kameleoon-Anwendungsdatei vollständig heruntergeladen und ausgeführt wurde, solange Sie das Tag im HTML-<head>-Abschnitt einbinden. Das blockierende Laden von Ressourcen gilt jedoch nicht als gute Praxis. Selbst wenn Sie die richtige Methode implementieren, koennen Flackereffekte auftreten, wenn die zugrunde liegende Engine einer A/B-Test-Loesung nicht darauf optimiert ist, sie zu verhindern. Kameleoon stellt diese Optimierungen automatisch fuer alle Aenderungen sicher, die ueber den grafischen Editor vorgenommen werden. Fuer Variationen, die benutzerdefinierten JavaScript-Code verwenden, stehen APIs zur Verfügung, um eine reibungslose Erfahrung sicherzustellen. Verwenden Sie diese APIs korrekt, um Probleme zu vermeiden. Fuehren Sie alle Aenderungen an einem Element oder alle Aktionen, die auf das Erscheinen eines Elements auf der Seite warten, mit der JavaScript-API-Methode durch, insbesondere mit Kameleoon.API.Core.runWhenElementPresent(), anstatt handgeschriebene Poller oder anderen benutzerdefinierten Code zu verwenden.
Beruecksichtigen Sie beim Implementieren von JavaScript-Code fuer eine Variation die gewuenschten Aenderungen und die spezifischen DOM-Elemente, auf die sie sich beziehen sollen. Sobald Sie den passenden CSS-Selektor fuer diese Elemente identifiziert haben, schliessen Sie den Aenderungsaufruf in eine Callback-Funktion ein, die Sie an Kameleoon.API.Core.runWhenElementPresent() uebergeben. Dieser Ansatz hat zwei wesentliche Vorteile: Erstens stellt er sicher, dass der Code zum richtigen Zeitpunkt ausgefuehrt wird, erst nachdem die Elemente im DOM vorhanden sind, was potenzielle Probleme verhindert, die entstehen koennten, wenn Ihr Code vorzeitig ausgefuehrt wird. Zweitens beseitigt er das Risiko unerwuenschter Flackereffekte.

​
Auswirkungen der Flacker-Verwaltung auf die Leistung

Obwohl Leistungsueberwachungsloesungen wertvolle Erkenntnisse liefern, bieten sie kein vollstaendiges Bild, insbesondere fuer Experimentations-Plattformen. Echte Leistung bedeutet, das richtige Gleichgewicht zwischen Geschwindigkeit, Genauigkeit und einer nahtlosen Nutzererfahrung zu finden. Kameleoon erreicht dieses Gleichgewicht effektiv: Das Experiment-Snippet ist speziell darauf ausgelegt, sowohl die Leistung als auch die Nutzererfahrung zu optimieren. Kameleoon laedt ein einzelnes Skript, das die Engine und alle von Ihnen auf der Plattform eingerichteten Konfigurationen enthaelt, einschliesslich Experimente, Ziele und benutzerdefinierte Skripte. Anschliessend werden keine zusaetzlichen Skripte geladen. Das Verbergen der Seite, bis die Kameleoon-Anwendungsdatei geladen ist oder der Timeout abläuft, kann eine weiße Seite und ein langsameres First Contentful Paint (FCP) verursachen. PageSpeed Insights misst den FCP. Wenn eine weiße Seite oder PageSpeed-Ergebnisse ein Problem darstellen, ist das Entfernen des Anti-Flicker-Codes in den meisten Fällen die einfachere Lösung. Verwenden Sie stattdessen das asynchrone Tag ohne Anti-Flicker. Ohne Anti-Flicker können Besucher die ursprüngliche Seite sehen, bevor eine Variation erscheint, was die Genauigkeit Ihrer Ergebnisse verringern kann.

​
FAQ

Dies ist ein bekannter Fehler in Firefox. Bis das Firefox-Team ihn behebt, befolgen Sie diesen Workaround: Stellen Sie sicher, dass auf Ihre verlinkte CSS-Ressource ein <script>-Tag folgt (auch ein nahezu leeres).Beispiel:
Dies entfernt den Flackereffekt vollständig.