Sayfanın Kullanıcıya İlk Görünen Bölümünü (ATF) Görüntüleme

Sayfanın kullanıcıya ilk görünen bölümünü görüntüleme bir web sitesinin görünümünün gerçekte olduğundan daha hızlı yüklenmesini sağlar. Burada amaç, önce bir sayfanın tüm görünür kısımlarının görüntülenmesi ve ardından kullanıcı aşağı kaydırmadan önce sayfanın başta görünmeyen geri kalan kısmının görüntülenmesidir.

Bir yuvanın sekmede bir simge görüntüleyen "sayfanın kullanıcıya ilk görünen bölümü" ataması olabilir.

Bir yuvanın bu yeni yöntemle görüntülenmesi için yuvanın şu şekilde scs-atf ile işaretlenmesi gerekir:

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

Bir bileşenin görüntülemeyi tamamladıktan sonra görüntüleyiciyi bilgilendirmesi gerekir. Kullanıma hazır bileşenler bunu öndeğer olarak yapar. Özel bileşenler ek arama yapabilir ve şunları yapmaları gerekir:

  1. Görüntüleyicinin görüntülemeyi tamamlayana kadar beklemek istediğini görüntüleyiciye bildirmek.
  2. Tamamlandığında görüntüleyiciyi bilgilendirmek.

1 numaralı işlemde özel bileşenin appinfo.json dosyasına şu niteliği ekleyin:

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

2 numaralı işlemde bileşenin render.js dosyasında şunu çağırarak görüntüleyiciye işlemi tamamladığınızı bildirdiğinize emin olun:

 SitesSDK.setProperty('renderComplete', true);

Sayfanın kullanıcıya ilk görünen bölümü yuvasındaki bileşenlerin hepsi zamanında tamamlandıklarını bildirmezse görüntüleyici sayfanın geri kalanına devam etmeden önce 2 saniye bekler. Bunun yeterince uzun olmayacağını düşünüyorsanız bir sayfa şablonunda şu global değişkeni bildirerek süreyi uzatabilirsiniz:

var SCSAtfPassTimeout = 3000;

Not:

Bu süre milisaniyedir. Yani bu örnekte zaman aşımı 3 saniye olarak ayarlanmıştır.

Uygulama programı arabirimi, sayfanın kullanıcıya ilk görünümü işlemi için tanı verisi sağlar. Hata ayıklama konsolunda aşağıdaki yöntemi çağırabilir veya gerekirse yönteme bir sayfadan erişebilirsiniz:

SCSRenderAPI.getRenderMetrics();

Örneğin:

{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