Γιατί τα κουμπιά Like Facebook αντιπροσωπεύουν το 16% του μέσου κώδικα του ιστότοπου

Σύμφωνα με τα δεδομένα που συλλέγει η BuiltWith.com, το 6% των κορυφαίων 10.000 ιστότοπων με υψηλή επισκεψιμότητα φορτώνει περιεχόμενο από τους διακομιστές του Facebook. Για τη συντριπτική πλειοψηφία αυτών, το περιεχόμενο είναι πιθανότατα το Javascript SDK του Facebook, ένα τεράστιο μπλοκ κώδικα που απαιτείται για την εμφάνιση λειτουργιών όπως το κουμπί Like (όπως φαίνεται σε πολλούς ιστότοπους πολυμέσων) και widgets σχολίων Facebook (χρησιμοποιούνται επίσης σε πολλά μεγάλα μέσα ιστότοπους, Buzzfeed ανάμεσά τους).

Αυτός ο κωδικός SDK είναι τόσο μεγάλος που αντιπροσωπεύει περίπου το 16% του συνολικού μεγέθους όλης της JavaScript στη μέση ιστοσελίδα.

Ως μια αρκετά μεγάλη και ευρέως χρησιμοποιούμενη βιβλιοθήκη λογισμικού, το Facebook SDK είναι ένας καλός τρόπος για να επεξηγήσετε μερικές από τις απαντήσεις στις ερωτήσεις: ακριβώς γιατί ο μέσος ιστότοπος σήμερα είναι τόσο μεγάλος; Και πόσο έχει σημασία το μέγεθος;

Γιατί τόσο μεγάλο;

Το Facebook SDK είναι πολύ πλήρες, αντιγράφοντας πολλά από τα εργαλεία που ο μέσος ιστότοπος είναι πιθανό να περιλαμβάνει ήδη για τη χρήση των δικών του προγραμματιστών: μέθοδοι για την ανάκτηση δεδομένων από άλλους ιστότοπους, για τον προσδιορισμό του προγράμματος περιήγησης και της συσκευής που χρησιμοποιεί ο χρήστης, στοχεύστε συγκεκριμένες λειτουργίες σε αυτά και για την εμφάνιση στοιχείων διεπαφής χρήστη (όπως διαλόγους επιβεβαίωσης και κουμπιά). Εάν κατηγοριοποιήσουμε όλα τα κομμάτια του SDK, η ανάλυση μοιάζει με αυτήν:

Από τα σύνολα χαρακτηριστικών, τα τρία ξεχωρίζουν περισσότερο:

Το "Canvas" είναι το σύστημα του Facebook για εφαρμογές που προορίζονται να φορτωθούν στο Facebook (το Facebook έκανε μια σημαντική ώθηση στο παρελθόν για να ενθαρρύνει τους προγραμματιστές να δημιουργήσουν εφαρμογές που ζούσαν στο Facebook. Δεν είμαι απόλυτα σίγουρος πόσο ευρέως χρησιμοποιούνται αυτές οι εφαρμογές σήμερα, αλλά με κάθε τρόπο, ένας κανονικός ιστότοπος δεν χρησιμοποιεί καμία από τις λειτουργίες που σχετίζονται με τον Καμβά.) Το κόστος της συμπερίληψής τους στο SDK είναι αρκετά οριακό: μόνο το 1,5% του συνολικού μεγέθους.

Μετά από αυτό, έχουμε υποστήριξη χαρακτηριστικών παλαιού τύπου. Αυτό αντικατοπτρίζει το γεγονός ότι ένα API θα συσσωρεύει πολλές διεπαφές για τον χειρισμό των ίδιων δυνατοτήτων με την πάροδο του χρόνου. Για παράδειγμα, οι προγραμματιστές μπορούν να γράψουν κώδικα που καλεί είτε FB.getLoginStatus () (την παλαιά προσέγγιση για να ζητήσετε την τρέχουσα κατάσταση σύνδεσης στο Facebook) ή το Auth.getLoginStatus ()(η νέα, ενθαρρυντική προσέγγιση). Ο τρόπος αντιμετώπισης που πρέπει να συμπεριλάβετε και τα δύο σύνολα μεθόδων είναι να τα απελευθερώσετε σε ξεχωριστές εκδόσεις του SDK, αλλά το Facebook επέλεξε να μην το κάνει αυτό, πιθανότατα να απλοποιήσει την εμπειρία για προγραμματιστές και να μεγιστοποιήσει τον αριθμό των ιστότοπων χρησιμοποιώντας το ίδιο ακριβώς αρχείο ( για να αυξήσετε την πιθανότητα ότι ο μέσος χρήστης το έχει ήδη κατεβάσει). Αυτή η απόφαση έρχεται με μικρό κόστος: περίπου το 3,5% του κώδικα SDK προορίζεται για το χειρισμό λειτουργιών που επισημαίνονται ρητά ως "παλαιού τύπου" (και είναι πολύ πιθανό ότι υπάρχουν πολλές άλλες λειτουργίες "παλαιού τύπου" που απλά δεν επισημαίνονται ρητά ως τέτοιες ).

Το πιο σημαντικό, το SDK περιλαμβάνει μια σειρά από βοηθητικά προγράμματα τύπου polyfills και polyfill, τα οποία αποτελούν πάνω από το 15% του κώδικα. Τα Polyfills χρησιμοποιούνται για την παροχή λειτουργιών που βρίσκονται στα νεότερα προγράμματα περιήγησης σε παλαιότερα προγράμματα περιήγησης και μερικές φορές επίσης για την παροχή νεότερων λειτουργιών που είναι προσεχείς αλλά δεν έχουν προστεθεί σε κανένα πρόγραμμα περιήγησης ακόμα. Τα περισσότερα από τα πολυπληρώματα που περιλαμβάνονται στο Facebook SDK είναι για λειτουργίες που περιλαμβάνονται ήδη σε προγράμματα περιήγησης που χρησιμοποιούνται από τη συντριπτική πλειονότητα των χρηστών του διαδικτύου. Χρησιμεύουν μόνο για να κάνουν το SDK να λειτουργεί για το <1% ​​των παγκόσμιων χρηστών του Διαδικτύου που χρησιμοποιούν παλιά προγράμματα περιήγησης όπως ο Internet Explorer 8, τα οποία πολλοί (αν όχι η συντριπτική πλειοψηφία) σημαντικοί ιστότοποι έχουν εγκαταλείψει την υποστήριξη.

Από το υπόλοιπο ~ 80% του SDK, είναι λίγο πιο δύσκολο να ξεμπερδέψετε ποιες λειτουργίες χρειάζονται για ποιο σκοπό. Αυτό συμβαίνει επειδή είναι γραμμένο έτσι ώστε, για να χρησιμοποιήσετε μια απλή λειτουργία όπως το κουμπί "Μου αρέσει", πρέπει επίσης να συμπεριλάβετε κώδικα που χρησιμοποιείται μόνο για σχόλια, ενσωματώσεις βίντεο, κουμπιά σύνδεσης και άλλα άσχετα χαρακτηριστικά. Το Facebook θα μπορούσε να επιλέξει να διανείμει πολύ μικρότερα αρχεία για να συμπεριλάβει μόνο μεμονωμένες λειτουργίες όπως κουμπιά Like, αλλά έχει επιχειρηματικό στόχο να ενθαρρύνει τους ιστότοπους να χρησιμοποιούν όσο το δυνατόν περισσότερες δυνατότητες που παρέχονται από το FB.

Έχει σημασία το μέγεθος;

Λόγω της ευρείας χρήσης του SDK του Facebook και του γεγονότος ότι αλλάζει σχετικά σπάνια, πολλοί χρήστες είναι πιθανό να το έχουν ήδη κατεβάσει προτού φορτώσουν έναν ιστότοπο. Στην πραγματικότητα, αυτό είναι ένα μεγάλο μέρος της λογικής για το γιατί το Facebook θα διανέμει ένα τόσο τεράστιο αρχείο, αντί για μικρότερα, για συγκεκριμένες λειτουργίες όπως τα κουμπιά Like. Και στις συνδέσεις δικτύου των περισσότερων χρηστών - τουλάχιστον σε αναπτυγμένες χώρες - ο χρόνος που απαιτείται για τη λήψη του αρχείου είναι οριακός.

Όμως, ανεξάρτητα από το εάν το πρόγραμμα περιήγησης του χρήστη έχει ήδη κατεβάσει το SDK, εξακολουθεί να υπάρχει εναέρια επέμβαση στην εκτέλεση ενός μεγάλου μπλοκ Javascript, ειδικά σε κινητές συσκευές. Στο σχετικά νέο MacBook Pro που το γράφω, το SDK του Facebook διαρκεί περίπου 50 ms (1/20 του δευτερολέπτου), για να τρέξει σε έναν ιστότοπο όπως το Buzzfeed. Όχι κακό - ειδικά όταν λαμβάνονται σε σχέση με τον υπόλοιπο κώδικα JS, συμπεριλαμβανομένου κώδικα που σχετίζεται με διαφημίσεις που απαιτεί πολύ περισσότερο χρόνο εκτέλεσης - αλλά εξακολουθεί να είναι ένα ασήμαντο κόστος για κάτι που χρησιμοποιείται μόνο για την εμφάνιση σχολίων στο κάτω μέρος του σελίδα.

Σε ένα πολύ νέο smartphone (Google Pixel), ο χρόνος εκτέλεσης του JS διπλασιάζεται, παίρνοντας πλέον το 1/10 του δευτερολέπτου:

Όταν εξετάζεται στο πλαίσιο, αυτό είναι ένα μικρό κλάσμα του συνολικού χρόνου εκτέλεσης κώδικα στη σελίδα. Αλλά προσθέτει στο χρονικό διάστημα κατά το οποίο η κύλιση ή η αλληλεπίδραση αλλιώς με τη σελίδα μπορεί να είναι μια ασταθή και δυσάρεστη εμπειρία. Και αυτό γίνεται σε ένα σημαντικό σημείο: αυτό το συγκεκριμένο SDK έχει οριακό κόστος, αλλά οι σύγχρονοι ιστότοποι - ειδικά οι ιστότοποι πολυμέσων - συχνά περιλαμβάνουν παρόμοιο κώδικα από μεγάλο αριθμό τρίτων (αυτό το παράδειγμα συνέλαβα από τον Gawker πριν σκοτωθεί από έναν βρικόλακα δισεκατομμυριούχου) δείχνει πόσα τέτοια αιτήματα μπορεί να υπάρχουν).

Ακόμη και παραμερίζοντας τον αντίκτυπο απορρήτου από την αποστολή ορισμένων πληροφοριών χρήστη σε καθένα από αυτά τα τρίτα μέρη, το κόστος όλων αυτών των λειτουργιών αυξάνεται γρήγορα. Κάθε σενάριο τρίτου μέρους που προσθέτει ένας ιστότοπος κοστίζει, τόσο από την άποψη της απόδοσης όσο και από πλευράς εξορθολογισμού της προσθήκης του επόμενου «σχετικά ακίνδυνου» τμήματος κώδικα τρίτου μέρους αργότερα. Εκτός από τον άμεσο αντίκτυπο στην απόδοση του πρόσθετου κόστους αυτού του κώδικα, αυτό επηρεάζει το ηθικό του προγραμματιστή: φανταστείτε να εργάζεστε για μέρες για να αποκόψετε το 10% του χρόνου φόρτωσης του δικού σας κώδικα, μόνο για να δείτε ένα τεράστιο μπλοκ κώδικα τρίτου μέρους που προσθέτει ότι νάνοι ο αντίκτυπος αυτής της επίπονης προσπάθειας. Και μετά (εάν εργάζεστε για έναν ιστότοπο πολυμέσων), βλέποντας το ίδιο μοτίβο να επαναλαμβάνεται ξανά και ξανά κάθε λίγους μήνες.

Πρέπει να το συμπεριλάβετε;

Εάν πρέπει να χρησιμοποιήσετε μια λειτουργία όπως τα Σχόλια στο Facebook, δεν υπάρχει ανάγκη να φορτώσετε το Facebook SDK. Ωστόσο, ανάλογα με τον τρόπο δομής του ιστότοπού σας, ενδέχεται να μπορείτε να περιορίσετε τον αντίκτυπο της απόδοσης του SDK φορτώνοντάς το μόνο όταν χρειάζεται (π.χ. όταν ο χρήστης μετακινηθεί προς τα κάτω στο σημείο όπου τα σχόλια θα γίνουν ορατά).

Εάν θέλετε να χρησιμοποιήσετε το κουμπί Like, σταματήστε και επανεξετάστε. Το Facebook δεν εμφανίζει πλέον τις επισημάνσεις "Μου αρέσει" μιας σελίδας (ή, στις περισσότερες περιπτώσεις, καθόλου) στα χρονοδιαγράμματα των χρηστών. Είναι καλύτερα να χρησιμοποιήσετε ένα απλό προσαρμοσμένο κουμπί Κοινή χρήση ή σύνδεσμο και, ως παράλληλο όφελος, κάτι τέτοιο θα αποτρέψει το Facebook από την παρακολούθηση όλων των επισκέψεων στη σελίδα σας και την παρεμβολή στο απόρρητο των χρηστών σας. Ιστότοποι που έχουν εξαλείψει το κουμπί "Μου αρέσει" δεν κατάφεραν να εντοπίσουν τυχόν αρνητικές επιπτώσεις σε αυτό όταν πρόκειται για παραπομπές κίνησης στο Facebook.

ΔΙΟΡΘΩΣΗ στον τίτλο: Αρχικά τον τίτλο "Γιατί το 16% του κώδικα στον μέσο ιστότοπο ανήκει στο Facebook και τι σημαίνει αυτό". Όπως ορθά επεσήμαναν ορισμένοι, αυτό σημαίνει ότι το 16% του Javascript σε όλους τους ιστότοπους στο Διαδίκτυο (ή τουλάχιστον σε όλους τους κορυφαίους ιστότοπους), αποτελείται από το Facebook Javascript SDK. Δεν ήταν αυτή η πρόθεσή μου και μπορώ να δω πώς συνάντησε υπερβολικά εντυπωσιακό.

Ας ελπίσουμε ότι ο νέος τίτλος καθιστά σαφέστερο ότι το Facebook SDK μετρά το 16% του μεγέθους του μέσου Javascript του ιστότοπου και δεν σημαίνει πλέον ότι αντιπροσωπεύει το 16% του συνολικού ιστότοπου Javascript στο Διαδίκτυο. Όπως σημειώνει ο David Gilbertson, ο πραγματικός παγκόσμιος αριθμός θα ήταν πολύ μικρότερος - 0,96%. Επίσης, θέτει ένα καλό σημείο σχετικά με: caching: το Facebook Javascript SDK δεν έχει αποθηκευτεί στο βέλτιστο τρόπο, αλλά αποθηκεύεται μόνο με τον ιδανικότερο τρόπο έως και 20 λεπτά, μετά το οποίο το πρόγραμμα περιήγησης του χρήστη ελέγχει ξανά με τους διακομιστές του Facebook για να επαληθεύσει ότι έχει ήδη την τελευταία έκδοση.