Above-the-fold-(ATF-)Rendering

ATF-Rendering sorgt dafür, dass eine Website scheinbar schneller lädt, als das eigentlich der Fall ist. Ziel ist es, zunächst alle sichtbaren Teile einer Seite zu rendern und anschließend, bevor Benutzer nach unten scrollen, den Rest der Seite zu rendern, der zunächst nicht sichtbar ist.

Ein Slot kann eine "Above-the-fold"-Kennzeichnung erhalten, sodass ein Symbol auf der Registerkarte angezeigt wird.

Damit ein Slot auf diese neue Art gerendert wird, muss er wie folgt mit scs-atf markiert werden:

<div class="scs-slot scs-atf" id="headline"></div>

Eine Komponente muss nach Abschluss des Renderings den Renderer benachrichtigen. Bei Out-of-the-box-Komponenten wird dieser Schritt standardmäßig ausgeführt. Eine benutzerdefinierte Komponente kann zusätzliche Aufrufe tätigen und muss folgende Aktionen ausführen:

  1. Den Renderer benachrichtigen, dass er warten soll, bis das Rendering abgeschlossen ist.
  2. Den Renderer nach Abschluss benachrichtigen.

Fügen Sie für Aktion 1 die folgende Eigenschaft in der Datei appinfo.json der benutzerdefinierten Komponente hinzu:

   "initialData": {
        . . .
        "customRenderComplete": true,
        . . .

Stellen Sie für Aktion 2 in der Datei render.js der Komponente sicher, dass der Renderer nach Abschluss durch folgenden Aufruf benachrichtigt wird:

 SitesSDK.setProperty('renderComplete', true);

Wenn nicht alle Komponenten in einem ATF-Slot zeitgemäß den Abschluss des Renderings melden, wartet der Renderer 2 Sekunden lang, bevor er mit dem Rest der Seite fortfährt. Wenn Sie wissen, dass diese Zeit nicht ausreicht, können Sie die Wartezeit verlängern, indem Sie die folgende globale Variable in einer Seitenvorlage deklarieren:

var SCSAtfPassTimeout = 3000;

Hinweis:

Die Zeit wird in Millisekunden angegeben. In diesem Beispiel wird der Timeout also auf 3 Sekunden gesetzt.

Eine API stellt Diagnosedaten für den ATF-Prozess bereit. Sie können die folgende Methode in der Debug-Konsole aufrufen oder gegebenenfalls von einer Seite darauf zugreifen:

SCSRenderAPI.getRenderMetrics();

Beispiel:

{currentTime: 16243.400000000001, renderStartTime: 264.36, atfPassEndTime: 306.535, mainPassStartTime: 316.475, mainPassEndTime: 331.38500000000005, …}

1.   atfComponentCount:13

2.   atfPassEndTime:306.535

3.   completionCount:23

4.   completionRecords:Array(23)

1.   0:{atf: true, componentId: "a7afdd33-3fbb-4329-bc1b-6be60056a995", time: 280.065}

2.   1:{atf: true, componentId: "edfcfcb4-b0d3-422f-aa59-5c925bbbebee", time: 283.54}

3.   2:{atf: true, componentId: "c1c3aec8-e52f-406c-8c29-ab69c05877ed", time: 283.56000000000006}

4.   3:{atf: true, componentId: "b3a31dc6-62a1-44d9-9c80-bdb2c5bedaaa", time: 284.13000000000005}

5.   4:{atf: true, componentId: "c05aa1a2-c11c-4ef5-9051-4799c5bee24a", time: 284.15500000000003}

6.   5:{atf: true, componentId: "bafd4047-06ec-4739-9b23-9db74f573f30", time: 294.665}

7.   6:{atf: true, componentId: "e7d49528-0357-4b45-801e-b3a2716a086c", time: 297.995}

8.   7:{atf: true, componentId: "a5f33674-4022-4138-8cc5-fef00c02a557", time: 299.78000000000003}

9.   8:{atf: true, componentId: "ccfedc98-1dbd-440e-b867-5e683cea2ec5", time: 301.19500000000005}

10. 9:{atf: true, componentId: "d691bc44-fed9-474a-9806-2191f46a5e2e", time: 302.46}

11. 10:{atf: true, componentId: "cf613054-05d8-40dd-83a0-718760d7bc73", time: 303.79}

12. 11:{atf: true, componentId: "b4a6ef98-ffc8-48c7-987c-63346ee97bcc", time: 305.115}

13. 12:{atf: true, componentId: "de1fa2ce-66ba-419b-b517-2cb4a7601c3b", time: 306.535}

14. 13:{atf: false, componentId: "ba3f8ed4-31d4-4347-b6f0-f1019783a57c", time: 318.665}

15. 14:{atf: false, componentId: "ae8af486-76b3-47cd-9989-db4212eefebb", time: 320.45500000000004}

16. 15:{atf: false, componentId: "a48b5abb-49b2-4456-90bd-a3de998150c8", time: 320.48}

17. 16:{atf: false, componentId: "a9650e6d-7e7e-42a2-b758-58f2aeab18a2", time: 322.61500000000007}

18. 17:{atf: false, componentId: "aca9836a-f955-4aa7-8db2-fd3cf1189dea", time: 324.23500000000007}

19. 18:{atf: false, componentId: "e3d7941c-fbc7-4da9-963b-e3810b6467d4", time: 325.85}

20. 19:{atf: false, componentId: "eecde809-da54-4066-9326-73f9d9c35fe4", time: 327.315}

21. 20:{atf: false, componentId: "e8f4fb16-4e15-4570-b7de-304e99e449a7", time: 328.74}

22. 21:{atf: false, componentId: "a7baa06e-7f30-42c7-94f4-e171ab2edcd6", time: 330.09000000000003}

23. 22:{atf: false, componentId: "fd603b96-2beb-4e87-a54f-12d0e264cd0a", time: 331.38500000000005}

24. length:23

25. __proto__:Array(0)

5.   componentCount:23

6.   currentTime:16243.400000000001

7.   mainPassEndTime:331.38500000000005

8.   mainPassStartTime:316.475

9.   renderStartTime:264.36

10. __proto__:Object