Affichage au-dessus de la ligne de flottaison (ATF)

L'affichage au-dessus de la ligne de flottaison donne l'impression que le site Web charge plus rapidement qu'en réalité. Le but est d'afficher d'abord toutes les parties visibles de la page puis, avant que l'utilisateur ne fasse défiler la page vers le bas, d'afficher le reste de la page qui n'est pas initialement visible.

Un emplacement peut avoir une désignation "au-dessus de la ligne de flottaison". Une icône correspondante est alors affichée dans l'onglet.

Pour afficher un emplacement de cette nouvelle façon, il doit être marqué par scs-atf, comme suit :

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

Un composant doit indiquer au programme d'affichage lorsque son affichage est terminé. Les composants prêts à l'emploi le font par défaut. Un composant personnalisé peut effectuer des appels supplémentaires et doit réaliser les actions suivantes :

  1. Indiquer au programme d'affichage qu'il souhaite que ce dernier attende son affichage complet.
  2. Indiquer au programme d'affichage lorsque son affichage est terminé.

Pour la première action, dans le fichier appinfo.json du composant personnalisé, ajoutez la propriété suivante :

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

Pour la seconde action, dans le fichier render.js du composant, veillez à faire savoir au programme d'affichage que vous avez terminé en appelant :

 SitesSDK.setProperty('renderComplete', true);

Si des composants d'un emplacement d'affichage au-dessus de la ligne de flottaison n'indiquent pas que leur affichage est terminé en temps opportun, le programme d'affichage attendra 2 secondes avant de continuer à afficher le reste de la page. Si vous pensez que ce délai n'est pas suffisant, vous pouvez l'augmenter en déclarant la variable globale suivante dans un modèle de page :

var SCSAtfPassTimeout = 3000;

Remarque :

Le temps est indiqué en millisecondes. Dans cet exemple, le délai est donc défini sur 3 secondes.

Une API fournit des données de diagnostic relatives au processus d'affichage au-dessus de la ligne de flottaison. Vous pouvez y accéder à partir d'une page si besoin, ou appeler la méthode suivante dans la console de débogage :

SCSRenderAPI.getRenderMetrics();

Par exemple :

{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