Απόδοση Above the Fold (ATF)

Η απόδοση ATF δίνει την εντύπωση ότι μια τοποθεσία ιστού φορτώνεται πιο γρήγορα από ότι φορτώνεται στην πραγματικότητα. Ο στόχος είναι να αποδοθούν πρώτα όλα τα τμήματα μιας σελίδας που είναι ορατά και, στη συνέχεια, πριν ο χρήστης κάνει κύλιση προς τα κάτω, να αποδοθεί η υπόλοιπη σελίδα που δεν είναι αρχικά ορατή.

Μια υποδοχή μπορεί να έχει έναν προσδιορισμό "πάνω από τη δίπλωση", ο οποίος εμφανίζει ένα εικονίδιο στην καρτέλα.

Για να αποδοθεί μια υποδοχή με αυτόν τον νέο τρόπο, πρέπει να σημειωθεί με scs-atf, ως εξής:

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

Ένα συστατικό στοιχείο πρέπει να ειδοποιήσει τη λειτουργία απόδοσης όταν ολοκληρώσει την απόδοση. Τα έτοιμα προς χρήση συστατικά στοιχεία το κάνουν αυτό από προεπιλογή. Ένα προσαρμοσμένο συστατικό στοιχείο μπορεί να κάνει πρόσθετες κλήσεις και πρέπει να κάνει τα εξής:

  1. Να ειδοποιήσει τη λειτουργία απόδοσης ότι θέλει να περιμένει μέχρι να ολοκληρώσει την απόδοση.
  2. Να ειδοποιήσει τη λειτουργία απόδοσης όταν έχει ολοκληρώσει.

Για το #1, στο αρχείο appinfo.json του προσαρμοσμένου συστατικού στοιχείου, προσθέστε την ακόλουθη ιδιότητα:

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

Για το #2, στο αρχείο render.js του συστατικού στοιχείου, βεβαιωθείτε ότι έχετε ειδοποιήσει τη λειτουργία απόδοσης πότε ολοκληρώσατε καλώντας:

 SitesSDK.setProperty('renderComplete', true);

Αν δεν αναφέρουν όλα τα συστατικά στοιχεία σε μια υποδοχή ATF ότι έχουν ολοκληρώσει εγκαίρως, τότε η λειτουργία απόδοσης θα περιμένει για 2 δευτερόλεπτα προτού συνεχίσει με την υπόλοιπη σελίδα. Αν ξέρετε ότι αυτό δεν θα είναι αρκετό, μπορείτε να επεκτείνετε τον χρόνο δηλώνοντας την ακόλουθη καθολική μεταβλητή σε ένα πρότυπο σελίδας:

var SCSAtfPassTimeout = 3000;

Σημείωση:

Ο χρόνος είναι σε χιλιοστά του δευτερολέπτου, έτσι αυτό το παράδειγμα ορίζει την προθεσμία σε 3 δευτερόλεπτα.

Ένα API παρέχει δεδομένα διαγνωστικού ελέγχου για τη διαδικασία ATF. Μπορείτε να καλέσετε την ακόλουθη μέθοδο στην κονσόλα εντοπισμού και διόρθωσης σφαλμάτων ή μπορείτε να την χρησιμοποιήσετε από μια σελίδα, αν είναι απαραίτητο:

SCSRenderAPI.getRenderMetrics();

Για παράδειγμα:

{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