Snippet gegen Seitenflackern installieren

Dieses Snippet kann Seitenflackern verhindern.

Einführung

Wenn Sie den Schritten im Hilfeartikel Optimize installieren folgen und sich an die Best Practices für die Platzierung des Optimize-Snippets halten (siehe unten), wird Optimize auf Ihrer Webseite noch vor anderen Ressourcen geladen, die zur Darstellung der Seite erforderlich sind. Dann gibt es kein Flackern und Sie sollten das Snippet gegen Seitenflackern nicht installieren.

Seitenflackern tritt auf, wenn eine Webseite kurz mit den Standardstilen des Browsers angezeigt wird, bevor ein externes CSS-Stylesheet geladen wird. Die Seite wird mit diesem Stylesheet neu dargestellt, sodass sich die Elemente, deren Stil geändert wird, kurz auf der Seite bewegen.

Das Flackern beim Laden von Optimize lässt sich am wirkungsvollsten verringern, wenn die Seite vorübergehend ausgeblendet wird, während der Optimize-Container geladen wird. Fügen Sie hierzu das Snippet gegen Seitenflackern als erstes Skript auf Ihren Seiten ein.

Tritt Seitenflackern auf, prüfen Sie zuerst, ob Sie alle Schritte im Hilfeartikel Optimize installieren durchgeführt und sich an die Best Practices gehalten haben. Danach können Sie bei Bedarf weitere Möglichkeiten zur Fehlerbehebung nutzen.

Achten Sie insbesondere darauf, dass das Optimize-Snippet möglichst weit oben im <HEAD>-Bereich des HTML-Codes Ihrer Website platziert ist. Dadurch lassen sich die meisten Probleme mit Seitenflackern beheben.

Zielgruppe

Dieser Artikel richtet sich an Kunden, bei denen auf Seiten mit dem Optimize-Snippet Flackern auftritt.

Installieren Sie das Snippet gegen Seitenflackern in folgenden Fällen nicht:

  • Das Optimize-Snippet befindet sich nicht am Anfang des <HEAD>-Bereichs.
  • Seitenflackern tritt nicht auf.
  • Sie verwenden Aktivierungsereignisse, die beim ersten Laden keine Änderungen auslösen.
  • Mit einem Tag-Management-System (TMS) wie Google Tag Manager.

Snippet gegen Seitenflackern mit einem TMS eingefügt?

Fügen Sie das Snippet nicht mit einem Tag-Management-System wie Google Tag Manager ein.
Es darf nur direkt auf der Webseite installiert werden, niemals über ein TMS oder ein anderes asynchrones Skript. Ist das nicht möglich, verwenden Sie das Snippet nicht.

Seitenflackern verringern

Sollte auch nach den hier beschriebenen Schritten noch Seitenflackern auftreten, können Sie die Seite vorübergehend ausblenden, während der Optimize-Container geladen wird. So lässt sich das Flackern am wirkungsvollsten verringern. Fügen Sie hierzu das Snippet gegen Seitenflackern als erstes Skript auf Ihren Seiten ein.

Funktionsweise

Mit Optimize sehen Besucher Varianten Ihrer Website. Hierfür werden Änderungen am DOM (Document Object Model) vorgenommen. In einigen Fällen werden sogar Elemente verändert, die für den Endnutzer bereits sichtbar sind. Diese sichtbaren Änderungen werden als Seitenflackern bezeichnet.

Seitenflackern tritt auf, wenn eine Webseite kurz mit den Standardstilen des Browsers angezeigt wird, bevor ein externes CSS-Stylesheet geladen wird. Die Seite wird mit diesem Stylesheet neu dargestellt, sodass sich die Elemente, deren Stil geändert wird, kurz auf der Seite bewegen.

Snippet gegen Seitenflackern implementieren

So binden Sie das Snippet gegen Seitenflackern ein:

  1. Kopieren Sie den unten stehenden Code vollständig und fügen Sie ihn möglichst weit oben in den <HEAD>-Bereich einer jeden Seite mit Optimize ein, aber nach der dataLayer-Deklaration, falls eine solche verwendet wird.
  2. Das Optimize-Snippet oder der Tag Manager-Container muss sich direkt unter dem Snippet gegen Seitenflackern befinden.

Beispiel: Snippet gegen Seitenflackern

<HTML>
<HEAD>
<!-- anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'CONTAINER_ID':true});</script>

Hinweis: Ersetzen Sie CONTAINER_ID durch Ihre Optimize-Container-ID. Wenn Sie Optimize mithilfe von Google Tag Manager implementieren, fügen Sie anstelle von CONTAINER_ID Ihre Tag Manager-Container-ID ein.

Die Datenschicht (dataLayer) muss vor dem Snippet gegen Seitenflackern initialisiert werden. Andernfalls wird die Websiteleistung beeinträchtigt. Überschreiben Sie die Datenschicht nicht später auf der Seite.

Best Practices für die Platzierung des Optimize-Snippets

Sie erzielen die beste Leistung, wenn Sie das Optimize-Snippet ganz oben im <HEAD>-Bereich aller Seiten einfügen, die Sie optimieren möchten.

Nur die folgenden Elemente dürfen vor dem Optimize-Snippet platziert werden:

  1. dataLayer-Initialisierungscode. Hinweis: Die dataLayer-Variable darf nach dem Snippet gegen Seitenflackern nicht neu zugewiesen werden.
  2. Alle Skripts, in denen JavaScript-Variablen und -Funktionen deklariert oder Cookies gesetzt werden, die Sie in Optimize verwenden, also z. B. eine jQuery- oder JavaScript-Bibliothek zur Implementierung oder für die Ausrichtung. Hinweis: jQuery wird nicht standardmäßig von Optimize installiert.
  3. Das optionale Snippet gegen Seitenflackern (falls es verwendet wird).

Snippet gegen Seitenflackern anpassen

Das Snippet gegen Seitenflackern hat eine einstellbare Zeitüberschreitungsfunktion, mit der Sie festlegen können, nach welcher Zeit nicht mehr versucht werden soll, Teständerungen zu übernehmen. Nach der Zeitüberschreitung wird die Seite mit den Standardinhalten eingeblendet. Der Nutzer sieht also nicht die neuen Inhalte mit Teständerungen.

Weitere Informationen zum Anpassen des Snippets gegen Seitenflackern

Tag Manager-Nutzer

Sollten Sie Google Tag Manager für die Bereitstellung von Optimize verwenden, geben Sie im Snippet gegen Seitenflackern nicht die Optimize-Container-ID an, sondern Ihre Tag Manager-Container-ID.

Wenn Sie Ihrem Tag Manager-Container das Optimize-Tag hinzufügen, können Sie Seitenflackern verhindern, bis Optimize geladen wird. Falls Sie das Tag später deaktivieren, hat das keine Auswirkungen auf die Seite.

Weitere Informationen zur Bereitstellung des Optimize-Tags über Google Tag Manager

Andere Bezeichnungen

Neben „Seitenflackern“ werden auch die Bezeichnungen „JavaScript-Flackern“, „DOM-Flackern“, „FOUC“ (Flash of Unstyled Content) und „FOUT“ (Flash of Unstyled Text) verwendet. Das Snippet zum Ausblenden von Seiten war bisher unter dem Namen Snippet gegen Seitenflackern bekannt.

War das hilfreich?
Wie können wir die Seite verbessern?