Weergave boven de vouw (Above the Fold, ATF)

Door weergave boven de vouw (Above the Fold, ATF) lijkt het alsof een website sneller wordt geladen dan werkelijk het geval is. Het doel hiervan is om eerst alle zichtbare onderdelen van een pagina weer te geven en vervolgens, voordat de gebruiker naar beneden bladert, de rest van de pagina weer te geven die in eerste instantie niet zichtbaar is.

Een slot kan de aanduiding "boven de vouw" hebben, hetgeen als pictogram op het tabblad wordt weergegeven.

Een slot die op deze nieuwe manier moet worden weergegeven, moet als volgt worden gemarkeerd met scs-atf:

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

Een component moet aan de renderer een melding sturen wanneer de weergave is voltooid. Bij kant-en-klare componenten wordt dit standaard gedaan. Een aangepaste component kan aanvullende aanroepen uitvoeren en moet het volgende doen:

  1. De renderer een melding sturen dat deze moet wachten tot de weergave is voltooid
  2. De renderer een melding sturen wanneer de weergave is voltooid

Voor nummer 1 voegt u de volgende eigenschap toe in het bestand appinfo.json van de aangepaste component:

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

Voor nummer 2 laat u de renderer weten dat u klaar bent door de volgende aanroep uit te voeren in het bestand render.js van de component:

 SitesSDK.setProperty('renderComplete', true);

Als niet alle componenten in een ATF-slot tijdig laten weten dat de weergave is voltooid, wacht de renderer 2 seconden voordat deze verder gaat met de rest van de pagina. Als u weet dat deze tijd te kort is, kunt u deze verlengen door in een paginasjabloon de volgende algemene variabele te declareren:

var SCSAtfPassTimeout = 3000;

Opmerking:

De tijd is in milliseconden, dus in dit voorbeeld is de time-out ingesteld op 3 seconden.

Een API bevat diagnostische gegevens voor het ATF-proces. U kunt de volgende methode aanroepen in de debugconsole of eventueel openen vanaf een pagina:

SCSRenderAPI.getRenderMetrics();

Bijvoorbeeld:

{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