Rendering ATF (Above The Fold)

Il rendering ATF dà l'impressione che un sito Web venga caricato più velocemente di quanto non faccia in realtà. L'obiettivo consiste nell'eseguire in primo luogo il rendering di tutte le parti visibili di una pagina, quindi, prima che l'utente scorra verso il basso, nell'eseguire il rendering del resto della pagina inizialmente non visibile.

Uno slot può disporre di una designazione "Above The Fold", che visualizza un'icona sulla scheda.

Affinché possa essere visualizzato in questo modo, uno slot deve essere contrassegnato con scs-atf, come indicato di seguito:

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

Un componente deve notificare al renderer quando ha completato il rendering. I componenti integrati effettuano questa operazione per impostazione predefinita. Un componente personalizzato può effettuare chiamate aggiuntive e deve eseguire le operazioni riportate di seguito.

  1. Notificare al renderer che desidera che rimanga in attesa fino al completamento del rendering.
  2. Notificare al renderer quando è stato completato.

Per la prima operazione, aggiungere la proprietà seguente al file appinfo.json del componente personalizzato:

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

Per la seconda operazione, nel file render.js del componente assicurarsi che il renderer venga informato del completamento del rendering chiamando:

 SitesSDK.setProperty('renderComplete', true);

Se non tutti i componenti in uno slot ATF segnalano tempestivamente di aver finito, il renderer lascerà trascorrere 2 secondi prima di passare al resto della pagina. Se si ritiene che questo lasso di tempo non sia sufficiente, è possibile estenderlo dichiarando la variabile globale seguente in un modello di pagina:

var SCSAtfPassTimeout = 3000;

Nota:

il tempo di attesa è espresso in millisecondi, pertanto in questo esempio il timeout è di 3 secondi.

Un'interfaccia API fornisce i dati diagnostici per il processo ATF. È possibile chiamare il metodo seguente nella console di debug oppure accedervi da una pagina, se necessario:

SCSRenderAPI.getRenderMetrics();

Ad esempio:

{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