Asynchrone Bereitstellung asynchronous-deployment
Performance und blockierungsfreie Bereitstellung der von unseren Produkten benötigten JavaScript-Bibliotheken sind für Adobe Experience Cloud-Benutzende zunehmend wichtig. Tools wie Google PageSpeed empfehlen, dass die Benutzer die Art und Weise der Bereitstellung der Adobe Bibliotheken auf ihrer Site ändern. Dieser Artikel erklärt, wie Sie die Adobe-JavaScript-Bibliotheken asynchron verwenden können.
Synchron und asynchron im Vergleich
Synchrone Bereitstellung
Häufig werden Bibliotheken synchron im <head>-Tag einer Seite geladen. Beispiel:
<script src="example.js"></script>
Standardmäßig analysiert der Browser das Dokument, erreicht diese Zeile und ruft dann die JavaScript-Datei vom Server ab. Der Browser wartet, bis die Datei zurückgegeben wird, analysiert die JavaScript-Datei und führt sie aus. Schließlich wird die Analyse des übrigen HTML-Dokuments fortgesetzt.
Wenn der Parser vor dem Rendern sichtbarer Inhalte zum <script>-Tag gelangt, wird die Inhaltsanzeige verzögert. Wenn die geladene JavaScript-Datei nicht absolut erforderlich ist, um Ihren Benutzern Inhalte anzuzeigen, müssen Ihre Besucher unnötig auf Inhalte warten. Je größer die Bibliothek, desto länger die Verzögerung. Deshalb kennzeichnen Benchmark-Tools für Webperformance, wie z. B. Google PageSpeedoder Lighthouse, häufig synchron geladene Skripte.
Tag-Management-Bibliotheken können schnell unübersichtlich werden, wenn viele Tags zu verwalten sind.
Asynchrone Bereitstellung
Sie können jede Bibliothek asynchron laden, indem Sie dem <script>-Tag ein async-Attribut hinzufügen. Beispiel:
<script src="example.js" async></script>
Dies zeigt dem Browser an, dass er beim Analysieren dieses Skript-Tags mit dem Laden der JavaScript-Datei beginnen muss. Statt darauf zu warten, dass die Bibliothek geladen und ausgeführt wird, sollte der Browser den Rest des Dokuments analysieren und rendern.
Überlegungen zur asynchronen Bereitstellung
Wie oben beschrieben, hält der Browser bei synchronen Bereitstellungen Analyse und Rendern der Seite an, während die Tag-Bibliothek von Adobe Experience Platform geladen und ausgeführt wird. In asynchronen Bereitstellungen hingegen fährt der Browser mit dem Analysieren und Rendern der Seite fort, während die Bibliothek geladen wird. Diese Varianz zwischen dem Zeitpunkt, zu dem die Tag-Bibliothek fertig geladen wurde, und dem Analysieren und Rendern der Seite muss berücksichtigt werden.
Da die Tag-Bibliothek vor oder nach Analyse des Seitenendes vollständig geladen und ausgeführt werden kann, sollten Sie _satellite.pageBottom() nicht mehr aus Ihrem Seiten-Code aufrufen (_satellite ist erst nach dem Laden der Bibliothek verfügbar). Dies wird unter Asynchrones Laden des Tag-Einbettungs-Codes näher erläutert.
Außerdem kann das Laden der Tag-Bibliothek abgeschlossen werden, bevor oder nachdem das Browser-Ereignis DOMContentLoaded (DOM bereit) eingetreten ist.
Aufgrund dieser beiden Punkte ist es sinnvoll, zu veranschaulichen, wie die Ereignistypen Bibliothek geladen, Seitenende, DOM bereit und Fenster geladen aus der Haupterweiterung funktionieren, wenn eine Tag-Bibliothek asynchron geladen wird.
Wenn Ihre Tag-Eigenschaft die folgenden vier Regeln enthält:
- Regel A: Verwendet den Ereignistyp „Bibliothek geladen“
- Regel B: Verwendet den Ereignistyp „Seitenende“
- Regel C: Verwendet den Ereignistyp „DOM bereit“
- Regel D: Verwendet den Ereignistyp „Fenster geladen“
Unabhängig davon, wann die Tag-Bibliothek fertig geladen ist, werden alle Regeln garantiert in der folgenden Reihenfolge ausgeführt:
Regel A → Regel B → Regel C → Regel D
Obwohl die Reihenfolge immer durchgesetzt wird, können einige Regeln sofort nach dem Laden der Tag-Bibliothek ausgeführt werden, während andere möglicherweise erst später ausgeführt werden. Folgendes tritt auf, wenn die Tag-Bibliothek geladen wird:
- Regel A wird sofort ausgeführt.
- Wenn das Browserereignis
DOMContentLoaded(DOM bereit) bereits eingetreten ist, werden Regeln B und C sofort ausgeführt. Andernfalls werden Regel B und Regel C später ausgeführt, wenn das Browser-EreignisDOMContentLoadedeintritt. - Wenn das Browser-Ereignis
load(Fenster geladen) bereits eingetreten ist, wird Regel D sofort ausgeführt. Andernfalls wird Regel D später ausgeführt, wenn das Browser-Ereignisloadeintritt. Beachten Sie, dass – wenn Sie die Tag-Bibliothek gemäß Anweisungen installiert haben – der Ladevorgang der Tag-Bibliothek immer abgeschlossen wird, bevor das Browser-Ereignisloadauftritt.
Beachten Sie beim Anwenden dieser Prinzipien auf Ihre eigene Website folgende Punkte:
- Regeln, die den Ereignistyp „Bibliothek geladen“ verwenden, werden möglicherweise ausgeführt, bevor die Datenschicht vollständig geladen ist. Dies kann dazu führen, dass die Aktionen der Regel mit fehlenden Daten ausgeführt werden, da die Daten noch nicht auf der Seite verfügbar sind. Diese Art von Problemen können Sie durch die Optimierung Ihrer Regelkonfiguration verhindern. Statt eine Regel durch den Ereignistyp „Bibliothek geladen“ auszulösen, können Sie die Ereignistypen „Benutzerspezifisches Ereignis“ oder „Direktaufruf“ verwenden. Diese werden vom Seiten-Code ausgelöst, sobald die Datenschicht geladen wurde.
- Der Ereignistyp „Seitenende“ bietet keinen echten Mehrwert, wenn die Bibliothek asynchron geladen wird. Verwenden Sie stattdessen „Bibliothek geladen“, „DOM bereit“, „Fenster geladen“ oder andere Ereignistypen.
Wenn es zu einer Fehlermeldung kommt, liegen wahrscheinlich einige Timing-Probleme vor. Bereitstellungen, die ein präzises Timing erfordern, müssen möglicherweise Ereignis-Listener sowie den Ereignistyp „Benutzerspezifisches Ereignis“ oder „Direktaufruf“ verwenden, um ihre Implementierungen stabiler und einheitlicher zu gestalten.
Asynchrones Laden des Tag-Einbettungs-Codes
Tags sind mit einer Schaltfläche versehen, über die Sie das asynchrone Laden aktivieren können, wenn Sie bei der Konfiguration einer Umgebung einen Einbettungs-Code erstellen. Sie können das asynchrone Laden auch selbst konfigurieren:
-
Fügen Sie dem
<script>-Tag das Attribut „async“ hinzu, um das Skript asynchron zu laden.Im Tags-Einbettungs-Code bedeutet das eine Änderung von:
code language-markup <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>… wie folgt ändern:
code language-markup <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script> -
Entfernen Sie sämtlichen Code, den Sie zuvor unten im Tag hinzugefügt haben:
code language-markup <script type="text/javascript">_satellite.pageBottom();</script>Dieser Code informiert Platform darüber, dass der Browser-Parser das Seitenende erreicht hat. Da Tags vor diesem Zeitpunkt wahrscheinlich nicht geladen und ausgeführt wurden, führt der Aufruf von
_satellite.pageBottom()zu einem Fehler, und der Ereignistyp „Seitenende“ verhält sich möglicherweise nicht wie erwartet.