Visuellen Editor verwenden

Themen in diesem Artikel:

Benutzeroberfläche des visuellen Editors

Bevor Sie Ihre erste Optimize-Variante erstellen, sollten Sie sich mit dem visuellen Editor vertraut machen. Die beiden Hauptelemente des Editors, die App-Leiste und die Editorpalette, werden im Folgenden beschrieben.

App-Leiste

Die App-Leiste ist eine Navigationsleiste, die am oberen Rand der Seite angezeigt wird, wenn Sie eine Variante erstellen. Die App-Leiste ist in zwei Bereiche unterteilt. Im oberen Bereich werden der Name und der Status des Tests, der Name der Variante, die Vorschau, die Änderungsliste, die Diagnose und die Hilfe angezeigt. Der untere Bereich enthält den Elementselektor, den CSS-Pfad und Schaltflächen für den CSS-Editor, den interaktiven Modus und die Verschiebungseinstellungen.

The app bar in the visual editor.

Die in der App-Leiste verfügbaren Einstellungen werden im Artikel Der visuelle Editor ausführlicher beschrieben.

Editorpalette

Die Editorpalette wird unten rechts auf der Seite angezeigt und enthält die Bearbeitungssteuerelemente für das aktuell ausgewählte Element. In der blauen Leiste finden Sie Schaltflächen zum Rückgängigmachen und Wiederholen von Änderungen sowie zum Schließen der Palette ("x"). Klicken Sie auf die Schaltfläche ELEMENT BEARBEITEN, um den Text oder HTML-Code zu ändern oder JavaScript-Code hinzuzufügen, der beim Laden des Elements ausgeführt wird. Im unteren Teil der Palette befinden sich Steuerelemente für die aktuelle Auswahl. Wenn beispielsweise ein Textelement ausgewählt ist, können Sie dessen Größe, Position, Schriftart, -größe und -stil, Hintergrund, Rahmen und Layout bearbeiten.

Weitere Informationen zu den Tools in der App-Leiste und der Editorpalette finden Sie im Artikel Der visuelle Editor.

CSS-Codeeditor verwenden

Der visuelle Editor von Optimize ist nicht die einzige Möglichkeit, Stiländerungen vorzunehmen. Mit dem CSS-Codeeditor lassen sich ebenfalls CSS-Stiländerungen in einer Variante aufrufen und bearbeiten. Wenn Sie im CSS-Codeeditor Änderungen vornehmen, werden diese beim Speichern in Optimize-Stiländerungen umgewandelt. Änderungen am Text, am HTML-Code sowie an anderen Elementen, die nicht den CSS-Stil betreffen (z. B. der Elementstil), sind nicht sichtbar und daher vom CSS-Codeeditor nicht betroffen.

Um den CSS-Codeeditor aufzurufen, klicken Sie rechts unten in der App-Leiste auf die Einbettschaltfläche ("Einbetten").

The embed button in the visual editor.

Der CSS-Codeeditor von Optimize wird geöffnet:

Optimize CSS code editor screenshot.

Unterstützung für Bedingungen

Bedingungen wie Medienabfragen werden im CSS-Codeeditor unterstützt, sodass sich eine Variante für eine Responsive-Seite ganz einfach implementieren lässt. Beispielsweise können Sie auf Bildschirmen mit einer Breite von weniger als 500 Pixeln die Schriftgröße auf 14 Pixel reduzieren, indem Sie den folgenden CSS-Code einfügen:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Erweiterter CSS-Codeeditor

Falls Sie bereits mit CSS vertraut sind, können Sie die Variante vollständig im CSS-Codeeditor implementieren. CSS-Code, den Sie hier hinzufügen, wird in einzelne Stiländerungen umgewandelt, die in der Änderungsliste sichtbar sind.

Außerdem können Sie eine führende Variante implementieren, indem Sie Code im CSS-Codeeditor kopieren und dann auf Ihrer Website einbinden.

Visueller Editor für Responsive-Seiten

Mit dem visuellen Editor von Optimize können Sie sicherstellen, dass Ihre Variante mit mehreren Bildschirmgrößen und Gerätetypen kompatibel ist. Außerdem haben Sie die Möglichkeit, Änderungen am Responsive-Stil für bestimmte Bildschirmbreiten vorzunehmen.

Sie haben zwei Möglichkeiten:

  1. Wenn Sie Ihre Variante auf einem bestimmten Gerätemodell testen möchten, wählen Sie im oberen Bereich des visuellen Editors eines der vordefinierten Geräte im Gerätemenü aus. Nun wird der entsprechende Browser-User-Agent simuliert. Daher eignet sich diese Vorgehensweise am besten, wenn Sie über eine spezielle mobile Version Ihrer Website verfügen.
  2. Wählen Sie im unteren Bereich des Gerätemenüs die Option Responsive und dann eine der Responsive-Vorschaumethoden aus, um verschiedene Bildschirmgrößen zu simulieren. Diese Vorgehensweise wird empfohlen, wenn Sie eine Responsive-Website haben, die dynamisch an die Breite und Höhe des Bildschirms angepasst wird – selbst auf einem Computer. Bei dieser Vorgehensweise können Sie mit dem visuellen Editor auch Änderungen am Responsive-Stil vornehmen.

Editor: Device menu screenshot

Gerätemenü des visuellen Editors

Vorschau von Responsive-Seiten

Wenn Sie im Gerätemenü die Option Responsive auswählen, gibt es drei Möglichkeiten, eine Vorschau Ihrer Variante in verschiedenen Bildschirmgrößen aufzurufen:

  1. Klicken Sie in die graue Leiste direkt unter dem Elementselektor, um vordefinierte Seitenbreiten (z. B. 320, 400 oder 600 Pixel) zu simulieren. Dabei wird nur die Breite geändert, nicht jedoch die Höhe. Falls Ihre Website bereits Responsive-CSS-Code enthält, werden in der Leiste die Haltepunkte für die gängigsten Bildschirmbreiten angezeigt. So erkennen Sie ganz einfach, wie Ihre Seiten bei den verschiedenen Bildschirmgrößen aussehen.
  2. Geben Sie in das Feld für die Seitengröße, das direkt unter der grauen Leiste dargestellt wird, die gewünschten Werte für Breite und Höhe als Pixelwerte ein. Drücken Sie dann die Eingabetaste.
  3. Verschieben Sie die dunkelgrauen Ziehpunkte zum Anpassen der Größe an den rechten unteren Rand der Variante, um eine bestimmte Bildschirmgröße zu simulieren. So sehen Sie, wie die Variante bei der entsprechenden Bildschirmgröße angezeigt wird. Dies ähnelt der Darstellung Ihrer Variante, wenn ein Nutzer die Größe des Browserfensters dynamisch ändert.

editor-responsive-previewing-ss-fpo

Optionen für die Vorschau von Responsive-Seiten im visuellen Editor

Bearbeitung von Responsive-Seiten

Wenn Sie im unteren Bereich des Gerätemenüs die Option Responsive auswählen, können Sie nicht nur eine Vorschau Ihrer Varianten aufrufen, sondern auch über das Haltepunktmenü Änderungen am Responsive-Stil vornehmen.

editor-device-and-breakpoint-menus

Gerätemenü (links) und Haltepunktmenü (rechts)

Das Haltepunktmenü enthält Optionen für die am häufigsten verwendeten einfachen Responsive-Einschränkungen (z. B. eine Medienabfrage) für Ihre Website (nur für die Breite). Falls Ihre Website bereits Responsive-CSS-Code enthält, werden in der Leiste die Haltepunkte für die gängigsten Bildschirmbreiten angezeigt. So können Sie Änderungen vornehmen, die zu Ihren aktuellen Haltepunkten passen.

Editor breakpoint menu screenshot

Maximiertes Haltepunktmenü

 

Wenn Sie im Haltepunktmenü eine Option auswählen, wird im Editor ein spezieller Modus aktiviert. In diesem wird für alle Stiländerungen, die über die Editorpalette vorgenommen werden, diese Einschränkung angewendet. Beispiel: Sie wählen im Haltepunktmenü den Eintrag "Bis zu 600 Pixel breit" aus und ändern dann die Schriftgröße einer Schaltfläche. Nun wird diese Schaltfläche auf Geräten, bei denen das Browserfenster breiter als 600 Pixel ist, in der ursprünglichen Schriftgröße angezeigt. Sie erkennen dies auch an der Hervorhebung in der Editorpalette. Dies betrifft nur Stiländerungen, keine Änderungen am Text oder an den Inhalten.

Editor palette constrained by the breakpoint menu.

Die Editorpalette ist durch Werte eingeschränkt, die im Haltepunktmenü ausgewählt sind.

Wenn Sie das Haltepunktmenü verwenden, kann die Größe von Responsive-Seiten weiterhin mithilfe der Ziehpunkte angepasst werden, um eine Vorschau zu sehen. Die Seitengröße wird jedoch automatisch wieder in die ausgewählte Haltepunktbreite geändert.

Über die Änderungsliste und den CSS-Codeeditor können Sie die Medienabfrage jeder einzelnen Stiländerung aufrufen und ändern. Außerdem können Sie mit der Liste und dem Editor auch komplexere Einschränkungen für Medienabfragen festlegen. Wenn Sie den Bearbeitungsmodus für Responsive-Seiten beenden möchten, wählen Sie oben im Haltepunktmenü die Option Alle Größen aus.

Änderungsliste

Änderungen, die Sie im visuellen Editor vornehmen, werden in einer Änderungsliste erfasst. Sie können sich die Änderungsliste als eine Reihe einfacher Anweisungen vorstellen, mit denen sich die ursprüngliche Seite in die zu testende Variante verwandeln lässt. Die Anzahl der Änderungen in der aktuellen Variante wird in der App-Leiste angezeigt. Im obigen Screenshot wurde beispielsweise eine Änderung vorgenommen. Wenn Sie die Änderungsliste aufrufen möchten, klicken Sie auf die Anzahl der Änderungen in der App-Leiste.

In Optimize wird keine externe Bibliothek geladen oder verwendet, um Änderungen vorzunehmen. Stattdessen wird die Änderungsanleitung mithilfe kompakter Google Tag Manager-Tags implementiert.

Änderungsarten

In Optimize werden die folgenden Änderungstypen unterstützt:

Stiländerung

Stiländerungen dienen der Implementierung von Stilattributänderungen, beispielsweise an der Größe und der Position des Elements.

Durch eine Stiländerung können Sie die Anleitung mit einer CSS-Regel implementieren:

#target { color : red }

... oder das Stilattribut des Zielelements verwenden:

<p id="target" style="color : red"> </p>

Der visuelle Editor wird auf die Standardeinstellung, nämlich die "korrekteste" Syntax, zurückgesetzt. Bevorzugt wird dabei das CSS-Regel-Verfahren.

Wenn es auf der Seite eine spezifischere CSS-Regel gibt, durch die die neue Regel überschrieben wird, wird vom visuellen Editor die "wichtige" Property verwendet, z. B.:

#target { color : red !important}

Der Stil des Elements wird vom Editor nur verwendet, wenn die oben genannte Regel auch von einer spezifischeren Regel auf der Seite überschrieben wird.

Durch das CSS-Regel-Verfahren wird Seitenflackern minimiert. Dieses entsteht, wenn vor dem Laden des CSS-Stylesheets ganz kurz unformatierte Inhalte erscheinen. Im Gegensatz dazu ist es bei der Änderung einer Stil-Property mit element.style erforderlich, dass das Element bereits auf der Seite vorhanden ist. Dadurch wird die Wahrscheinlichkeit erhöht, dass es für den Nutzer kurz sichtbar ist, bevor es geändert wird.

Sie können die Optionen überprüfen, die vom Editor ausgewählt wurden, und dabei jede einzelne von ihnen ändern, indem Sie eine vorhandene Stiländerung bearbeiten.

Advanced editor – Edit style dialog screenshot

Attributänderung

Attributänderungen dienen der Implementierung von Elementattributänderungen, beispielsweise am Ziel eines Links oder an der Quelle eines Bilds. Sie können Properties wie den CSS-Selektor, das Attribut und den Wert überprüfen und ändern.

Advanced editor – edit attribute screenshot

Textänderung

Textänderungen werden verwendet, wenn Sie im Editor Änderungen am Inline-Text vornehmen. Wenn sich in einem Element Text und untergeordnete Elemente überlappen, zeigt der Editor den Teil des Texts an, der geändert wurde. Im folgenden Beispiel können Sie nur einen der Teile ändern, z. B. "Some text". Klicken Sie zum Bearbeiten jeden einzelnen Teil einzeln an oder klicken Sie auf den Tab, um zum nächsten Teil zu gehen.

<div>
Some text 
<b> a child element </b>
Some other text
</div>

 

Die folgenden Modi werden unterstützt:

  1. Ersetzen: Ein vorhandener Textteil wird ersetzt.
  2. Einfügen: Ein neuer Textteil wird im Zielelement am Anfang eingefügt.
  3. Anfügen: Ein neuer Textteil wird im Zielelement am Ende eingefügt.
  4. Vor: Ein neuer Textteil wird vor dem Zielelement eingefügt.
  5. Nach: Ein neuer Textteil wird nach dem Zielelement eingefügt.

Advanced editor - edit text screenshot

Eine Textänderung ist sicherer und weniger invasiv als eine HTML-Änderung. Im Idealfall soll sich nämlich nur der Text ändern. Eine Textänderung wirkt sich weder auf die Dokumentstruktur noch auf CSS-Selektoren oder andere Elemente aus. Das gilt auch für Event-Handler, die möglicherweise in den Zielelementen registriert sind.

HTML-Änderung

HTML-Änderungen dienen dazu, HTML zu ersetzen oder neue HTML einzufügen. Die folgenden Modi werden unterstützt:

  • Ersetzen: Der vorhandene HTML-Inhalt wird ersetzt.
  • Einfügen: Ein neuer HTML-Inhalt wird im Zielelement am Anfang eingefügt.
  • Anfügen: Ein neuer HTML-Inhalt wird im Zielelement am Ende eingefügt.
  • Vor: Ein neuer HTML-Inhalt wird vor dem Zielelement eingefügt.
  • Nach: Ein neuer HTML-Inhalt wird nach dem Zielelement eingefügt.

Advanced editor – Insert text before screenshot

Eine HTML-Änderung führt zum Verlust aller Nicht-Inline-Event-Handler. Diese Schaltfläche funktioniert beispielsweise nach einer HTML-Änderung nicht mehr (z. B. beim Einfügen einer HTML-Änderung vor dem Zielelement):
<button id=”button”> My button </button>
<script>
  document.getElementById("button")
    .addEventListener("click", function() {alert(‘hello’);});
</script>

Zu HTML-Änderungen kommt es, wenn die ersten HTML-Inhalte vom Browser geparst wurden. Das bedeutet, dass alle im enthaltenen Skripte bereits ausgeführt wurden. Aus diesem Grund werden Skript-Tags vom visuellen Editor entfernt, wenn der HTML-Inhalt für die Bearbeitung geladen wird. Dem neuen HTML-Inhalt können keine Skripte hinzugefügt werden. Wenn Sie ein neues Skript als Teil einer Variante ausführen möchten, verwenden Sie eine Skriptänderung (JavaScript ausführen). Vorhandene Skripte können nicht verändert werden.

Neuanordnungsänderung

Für das Ziehen und Verschieben eines Elements an eine andere Position auf der Seite werden zwei Verfahren unterstützt. Beim Standardverfahren kommt es zu einer Neuanordnungsänderung. Dabei wird die Position des Elements im DOM verändert. Das Element erhält ein neues übergeordnetes Element und/oder ein oder mehrere gleichgeordnete Elemente. Dies führt in der Regel dazu, dass das Element im neuen Bereich den Stil der anderen Elemente übernimmt.

Verwenden Sie eine Neuanordnungsänderung, wenn Sie Menüelemente oder andere ähnlich aussehende Elemente neu anordnen.

Eine Neuanordnungsänderung umfasst sowohl einen Quell- und einen Ziel-CSS-Selektor, der über den entsprechenden Dialog geändert werden kann, als auch einen "Verschieben"-Modus:

  • Oben: Das Quellelement wird zum ersten untergeordneten Element des Zielelements.
  • Unten: Das Quellelement wird zum letzten untergeordneten Element des Zielelements.
  • Vor: Das Quellelement wird zum vorherigen gleichgeordneten Element des Zielelements.
  • Nach: Das Quellelement wird zum nächsten gleichgeordneten Element des Zielelements.

Skriptänderung

Optimize kann durch eine Skriptänderung beliebiges JavaScript in jedem Element ausführen, das mit einem CSS-Selektor übereinstimmt. Durch diese Änderung kann Optimize den JavaScript-Code als Text einer Funktion ausführen, die das Element als Parameter verwendet.

Sie können auch "head" oder "body" für den CSS-Selektor verwenden und das JavaScript nur einmal ausführen. Schließlich ist auf der Seite auch nur ein solches Element vorhanden. Der von Ihnen verwendete Selektor wirkt sich in Verbindung mit seiner "run at"-Option auf die Vorbedingungen aus, die bestimmen, wann das Skript ausgeführt wird. Weitere Informationen finden Sie im Abschnitt Wenn Änderungsanleitungen angewendet werden unten.

Wenn ein CSS-Selektor mit mehreren Elementen übereinstimmt, wird das bereitgestellte Skript mehrere Male, nämlich einmal pro Skript, ausgeführt. Das Element wird bei jedem Anruf als einzelnes Argument der Funktion übergegeben.

Jeder Anruf findet basierend auf der ausgewählten Option so früh wie möglich statt:

  • Nach dem öffnenden Tag: Nur das öffnende Tag des übereinstimmenden Elements muss geparst worden und auf der Seite verfügbar sein, damit das Skript ausgeführt werden kann.
  • Vor dem schließenden Tag: Alle Inhalte und das schließende Tag des übereinstimmenden Tags müssen geparst worden und auf der Seite verfügbar sein, damit das Skript ausgeführt werden kann.

Beispiel:

  • Wenn Sie die Option "Nach dem öffnenden Tag" mit dem Selektor "head" verwenden, kann die Skriptänderung erst ausgeführt werden, nachdem das Optimize-Snippet zum ersten Mal im <HEAD>-Bereich (Ausführung der synchronen Blockierung) ausgeführt wird.
  • Die Verwendung der Option "Nach dem schließenden Tag" mit dem Selektor "body" bedeutet, dass die Skriptänderung nach dem Ereignis "Dokument fertig" (DOMContentLoaded) ausgeführt wird.

Advanced editor – Run JavaScript screenshot

Mehrere Zielelemente

Genau wie bei anderen Änderungstypen können Sie mit einer Neuanordnungsänderung die zugehörigen Quell- und Ziel-CSS-Selektoren so ändern, dass mit mehreren Elementen übereinstimmen. Wenn Sie beispielsweise mehrere Quellelemente auswählen, haben Sie die Möglichkeit, alle Elemente eines Menüs in ein anderes zu verschieben.

Durch eine Neuanordnungsänderung wird außerdem ein Zielselektor unterstützt, der mit mehreren Elementen übereinstimmt. Damit kann die Reihenfolge von zwei Tabellenspalten oder eine beliebige andere tabellarische Struktur auf der Seite geändert werden

  • Sollten mehr Ziel- als Quellelemente vorhanden sein, werden zusätzliche Zielelemente ignoriert.
  • Gibt es mehr Quell- als Zielelemente, werden die zusätzlichen Quellelemente im letzten Zielelement hinzugefügt.

An beliebige Position verschieben

Es gibt noch ein alternatives Verfahren für das Verschieben von Elementen an eine andere Position. Aktivieren Sie dazu in den Verschiebungseinstellungen die Option An beliebige Position verschieben.

Optimize editor – Move anywhere switch

Dieses Verfahren führt zu positionsbezogenen Stiländerungen, also "links", "oben", "Position" usw. Obwohl sich die Position des Elements in der DOM nicht ändert, wirkt es so, als würde es an eine neue Position verschoben. In der Regel wirkt sich das weder auf den Stil noch auf den Rest der Seite aus.

Verwenden Sie An beliebige Position verschieben, wenn Sie die Position globaler Schaltflächen oder Bereiche wie z. B. des Log-in-Bereichs und bereits positionierter Elemente ändern.

Automatisch für die Neuanordnung auswählen

Diese Option ist standardmäßig aktiviert. Daher ist es einfach, beim Ziehen die korrekten Quell- und Zielelemente auszuwählen. Im Editor wird das korrekte Element ausgewählt (z. B. ein Listenelement <li> anstelle des enthaltenen Bilds <img>) und die Neuanordnung auf die Inhalte im Container (also auf das Listenelement <ul>) beschränkt.

Sie können diese Option deaktivieren, um jedes Element an eine andere Position in der DOM zu verschieben. Sie haben darüber hinaus die Möglichkeit, den standardmäßigen "Verschieben"-Modus von "Vor"/"Nach" zu "Oben"/"Unten" zu ändern, indem Sie das Häkchen neben Außerhalb des Zielelements neu anordnen entfernen.

CSS-Selektor erstellen

Wenn Sie auf einen Seitenbereich klicken, wählt der Editor das tiefste Element im angeklickten Bereich aus.

Sie können in der Hierarchieleiste ein beliebiges Ancestor-Element auswählen, das denselben Bereich einnehmen und sich auf sichtbare Eigenschaften des Bereichs wie Hintergrundbild oder -farbe auswirken kann. Wenn Sie den Mauszeiger in der Hierarchieleiste auf die Ancestor-Elemente bewegen, können Sie den Bereich überprüfen, der von jedem Element eingenommen wird. Klicken Sie auf das Element, wählen Sie es aus und überprüfen Sie mit der Editorpalette die Eigenschaften, auf die es sich auswirkt.

Advanced editor – CSS selector screenshot

Nachdem ein Element für eine Änderung ausgewählt wurde, besteht eine wichtige Eigenschaft dieser Änderung in dem CSS-Selektor, der vom Editor erstellt wird, da er den Abgleich der korrekten Elemente unterstützt.

Dies ist der Algorithmus, den der Editor verwendet, um den Selektor zu erstellen:

  • Durchsuchen Sie die Ancestors in der DOM von unten nach oben, bis Sie einen finden, der eindeutig identifiziert werden kann.
    • Durch das ID-Attribut
    • Durch eine Klasse, die nur von diesem Element auf der Seite verwendet wird
    • Als <BODY> des Dokuments
  • Gehen Sie wieder nach unten zum ausgewählten Element und
    • verwenden Sie den Tag-Namen, wenn nur ein untergeordnetes Element mit diesem Tag vorhanden ist, oder
    • verwenden Sie den Selektor ":nth-of-type", wenn kein untergeordnetes Element mit diesem Tag vorhanden ist.
Tipps für CSS-Selektoren
  • Es ist immer besser, sich mit einer ID oder einer eindeutigen Klasse auf Elemente zu konzentrieren. Es kann auch ein Ancestor in der Nähe verwendet werden, der sowohl über eine ID als auch über eine eindeutige Klasse verfügt. So können Ihre Varianten einfacher verwaltet werden, wenn kleine Änderungen an der Seite vorgenommen werden.
  • Wenn Sie Klassen als eindeutige IDs verwenden, vergewissern Sie sich, dass Sie eine repräsentative Seite als Editorseite verwenden und nicht beispielsweise eine Produktergebnisseite mit einem einzigen Produkt.
  • Sie können den CSS-Selektor einer Änderung jederzeit ändern und Ihren eigenen Selektor eingeben. Der Editor hebt das neu abgeglichene Element/die neu abgeglichenen Elemente hervor.
  • Sie können die Optionen zur Verwendung einer eindeutigen ID oder einer eindeutigen Klasse deaktivieren, um eine Selektorhierarchie zu verkürzen. Dies kann hilfreich sein, wenn diese Attribute eine CMS- oder Datenbank-ID verwenden und variieren.

Wenn Änderungsanleitungen angewendet werden

Das Optimize-Snippet wird im Bereich <HEAD> der Seite geladen. Dies bedeutet, dass die Zielelemente noch nicht geparst wurden und nicht auf der Seite verfügbar sind, wenn die Änderungsanleitung ausgeführt wird.

Auf vielen Seiten sind synchrone Skripte im Text der Grund dafür, dass im DOM Verzögerungen auftreten. Um Seitenflackern zu vermeiden, wird das Dokument im Abstand von 80 ms so lange durch Optimize-Änderungen überwacht, bis übereinstimmende Elemente identifiziert werden können. Wenn ein CSS-Selektor mit mehreren Elementen auf einer komplexen Seite mit mehreren synchronen Skripten übereinstimmt, kann die Änderung nach und nach auf mehrere Wiederholungen angewendet werden, während übereinstimmende Elemente geparst werden.

Außerdem werden in verschiedenen Phasen des Parsings unterschiedliche Änderungstypen angewendet. Text-, HTML- und Neuanordnungsänderungen werden nur angewendet, wenn alle Elemente und das schließende Tag des übereinstimmenden Elements geparst wurden. Für Attribut- und Stiländerungen ist nur das öffnende Tag erforderlich. Skriptänderungen können vom Nutzer konfiguriert werden.

Darüber hinaus soll Seitenflackern dadurch minimiert werden, dass übereinstimmende Elemente in Optimize so lange ausgeblendet werden (mit <STYLE>-Tags, die bereits sehr früh hinzugefügt werden), bis die Elemente abgeglichen und Änderungen angewendet wurden.

  • Diese Details können wichtig sein, wenn Ihre Änderungen einen globalen Container oder den Dokumenttext umfassen.
  • Stiländerungen, die als CSS-Regeln implementiert werden, werden synchron im <HEAD>-Bereich hinzugefügt, wenn das Optimize-Snippet ausgeführt wird. Es wird also nicht gewartet, bis übereinstimmende Elemente geparst wurden.

Reihenfolge, in der Änderungen angewendet werden

Die Reihenfolge der Änderungsanleitungen wird eingehalten, wenn Nebeneffekte auftreten, z. B. eine spätere Änderung, die ein Element betrifft, das von einer früheren Änderung hinzugefügt wurde. Optimize kann Änderungen allerdings in einer anderen Reihenfolge anwenden, wenn keine Nebeneffekte auftreten und übereinstimmende Elemente einer späteren Änderung verfügbar werden. Optimize ist sogar in der Lage, Änderungen auszuführen und dabei mehrere Elemente nach und nach sowie parallel abzugleichen.

Obwohl diese Funktionen in Optimize enthalten sind, wird empfohlen, das Dokument von oben nach unten zu bearbeiten.

Aktivierungsereignisse

Bei dynamischen Seiten und einseitigen Web-Apps werden üblicherweise weitere Daten abgerufen, nachdem der ursprüngliche Ladevorgang der Seite abgeschlossen wurde. In Optimize wird dies über die Funktion "Aktivierungsereignisse" unterstützt. Weitere Informationen zu Aktivierungsereignissen

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