Prema podacima koje je prikupio BuiltWith.com, 6% od 10.000 najboljih web lokacija s najvećim prometom učitava sadržaj s Facebook poslužitelja. Za veliku većinu njih taj je sadržaj vjerojatno Facebookov Javascript SDK, ogroman blok koda koji je potreban za prikazivanje takvih značajki kao što je gumb Sviđa mi se (što se vidi na mnogim medijskim web-mjestima) i dodaci za komentare na Facebooku (koji se također koriste na mnogim velikim medijima web mjesta, Buzzfeed među njima).
Ovaj SDK kôd toliko je velik da predstavlja oko 16% ukupne veličine svih JavaScript-a na prosječnoj web stranici.
Kao značajna i široko korištena softverska knjižnica, Facebook SDK lijep je način ilustriranja nekih odgovora na pitanja: zašto je prosječna web stranica danas tako velika? I koliko je zapravo bitna veličina?
Zašto tako velik?
Facebook SDK ima vrlo značajke, duplirajući mnoge alate koje će prosječna web lokacija vjerojatno već uključiti za upotrebu vlastitih programera: metode za dohvaćanje podataka s drugih web lokacija, za određivanje kojeg preglednika i uređaja korisnik koristi, tako da ciljajte na njih određene značajke i za prikaz elemenata korisničkog sučelja (poput dijaloških okvira i gumba za potvrdu). Ako kategoriziramo sve dijelove SDK-a, raščlamba izgleda ovako:
Od skupa značajki, tri se najviše ističu:
"Platno" je Facebookov sustav za aplikacije čija je namjena učitavanje unutar Facebooka (Facebook je u prošlosti napravio veliki poticaj da potakne programere da grade aplikacije koje su živjele u Facebooku; nisam sasvim siguran koliko se danas takve aplikacije široko koriste ali u svakom slučaju, redovno web mjesto ne koristi nijednu značajku povezanu s platnom.) Cijena njihovog uključivanja u SDK prilično je neznatna: samo 1,5% od ukupne veličine.
Nakon toga imamo naslijeđenu podršku značajki. To odražava činjenicu da će API tijekom vremena akumulirati više sučelja za rukovanje istim značajkama. Na primjer, programeri mogu napisati kod koji poziva ili FB.getLoginStatus () (naslijeđeni pristup zahtjevu za trenutnim korisničkim statusom prijave na Facebook) ili Auth.getLoginStatus ()(novi, ohrabreni pristup). Način da se zaobiđe potreba za uključivanjem oba skupa metoda je njihovo objavljivanje u zasebnim verzijama SDK-a, ali Facebook je odlučio da to ne učini, vjerojatno da bi pojednostavio iskustvo programerima i maksimalizirao broj web lokacija koje koriste potpuno istu datoteku ( kako bi se povećala vjerojatnost da je prosječni korisnik već preuzeo). Ova se odluka donosi uz malu cijenu: otprilike 3,5% SDK koda odnosi se na rukovanje značajkama koje su izričito označene kao "naslijeđe" (i sasvim je moguće da postoji mnogo više "naslijeđenih" značajki koje jednostavno nisu izričito označene kao takve ).
Što je najvažnije, SDK uključuje brojne polifilseve i uslužne programe slične polifilima, koji čine preko 15% njegovog koda. Polyfills se koriste za pružanje značajki koje se nalaze u novijim preglednicima starijim preglednicima, a ponekad i za novije značajke koje dolaze, ali još nisu dodane u bilo koji preglednik. Većina polifila koji su uključeni u Facebook SDK odnose se na značajke koje su već uključene u preglednike koje koristi velika većina internetskih korisnika. Služe samo za to da SDK radi za <1% globalnih korisnika Interneta koji koriste stare preglednike poput Internet Explorera 8, kojih su mnoge (ako ne i velika većina) glavnih web mjesta odustale od podrške.
Od preostalih ~ 80% SDK-a, malo je teže razmrsiti koje su značajke potrebne u tu svrhu. To je zato što je napisan tako da se za upotrebu jednostavne značajke poput gumba Sviđa mi se mora uključiti i kod koji se koristi samo za komentare, ugrađivanje videozapisa, gumbe za prijavu i druge nepovezane značajke. Facebook se mogao odlučiti za distribuciju puno manjih datoteka radi uključivanja samo pojedinačnih značajki poput gumba Like, ali poslovni je cilj potaknuti web stranice da koriste što više značajki koje pruža FB.
Je li veličina bitna?
Zbog široke upotrebe Facebookovog SDK-a i činjenice da se on relativno rijetko mijenja, mnogi su ga korisnici vjerojatno već preuzeli prije nego što učitaju web mjesto. Zapravo, ovo je velik dio obrazloženja zašto bi Facebook distribuirao tako veliku datoteku, a ne manje zbog specifičnih značajki poput gumba Like. A na mrežnim vezama većine korisnika - barem onima u razvijenim zemljama - vrijeme potrebno za preuzimanje datoteke je marginalno.
No, bez obzira na to je li korisnikov preglednik već preuzeo SDK, još uvijek postoje troškovi pokretanja velikog bloka Javascripta, posebno na mobilnim uređajima. Na relativno novom MacBook Pro-u na kojem ovo pišem, Facebookovom SDK-u treba oko 50 ms (1/20 sekunde) da bi se pokrenuo na web mjestu poput Buzzfeeda. Nije loše - pogotovo ako se uzme u kontekstu s ostatkom JS koda, uključujući kôd povezan s oglasom kojem je potrebno mnogo više vremena za izvršenje - ali i dalje ne trivijalni trošak za nešto što se koristi samo za prikaz komentara na samom dnu stranica.
Na vrlo novom pametnom telefonu (Google Pixel), vrijeme izvršenja JS-a se udvostručuje, sada preuzimajući 1/10 sekunde:
Kad se gleda u kontekstu, ovo je mali djelić ukupnog vremena izvršavanja koda na stranici. Ali to dodaje količini vremena tijekom kojeg pomicanje ili interakcija sa stranicom na bilo koji drugi način može biti uzburkano i neugodno iskustvo. I to dolazi do važne točke: ovaj određeni SDK ima marginalni trošak, ali moderne web stranice - posebno medijske stranice - često uključuju sličan kôd velikog broja trećih strana (ovaj primjer snimio sam od Gawkera prije nego što ga je milijarder-vampir ubio pokazuje koliko takvih zahtjeva može biti).
Čak i ako izostavimo utjecaj privatnosti slanjem nekih korisničkih podataka svakoj od tih trećih strana, trošak svih ovih značajki brzo se zbraja. Svaka skripta treće strane koju web mjesto doda ima svoju cijenu, kako u smislu izvedbe, tako i kasnije racionalizacije dodavanja sljedećeg "relativno bezopasnog" dijela koda treće strane. Osim trenutnog utjecaja aditivnih troškova cijelog ovog koda na učinak, to utječe i na moral programera: zamislite da danima radite kako biste obrijali 10% vremena učitavanja vlastitog koda, samo da biste vidjeli ogroman blok koda treće strane koji je dodao da patuljci utjecaj tog mukotrpnog napora. A onda (ako radite za medijsku stranicu), vidjevši da se isti obrazac ponavlja iznova i iznova svakih nekoliko mjeseci.
Trebate li ga uključiti?
Ako trebate koristiti značajku poput Facebook komentara, nema potrebe za učitavanjem Facebook SDK-a. No, ovisno o strukturi vašeg web mjesta, možda ćete moći ograničiti utjecaj SDK-a na izvedbu učitavanjem samo po potrebi (npr. Nakon što se korisnik pomakne do točke do koje bi komentari trebali postati vidljivi).
Ako želite koristiti gumb Sviđa mi se, zaustavite se i preispitajte. Facebook više ne prikazuje lajkove stranice istaknuto (ili, u većini slučajeva, uopće) na vremenskim trakama korisnika. Bolje je koristiti jednostavni prilagođeni gumb ili vezu za dijeljenje, a kao popratnu pogodnost to će spriječiti Facebook da prati sve posjete vašoj stranici i ometa privatnost vaših korisnika. Web mjesta koja su eliminirala gumb Sviđa mi se nisu uspjela prepoznati negativan utjecaj toga kada su u pitanju referalne prometnice na Facebooku.
ISPRAVAK za naslov: Prvotno sam ovo naslovio "Zašto 16% koda na prosječnoj web lokaciji pripada Facebooku i što to znači". Kao što su neki s pravom istaknuli, to implicira da se punih 16% Javascripta na svim web mjestima na Internetu (ili barem na svim najpopularnijim web mjestima) sastoji od Facebook Javascript SDK-a. To mi nije bila namjera i vidim kako je to naišlo na pretjerano senzacionalistički.
Nadamo se da će novi naslov učiniti jasnijim da Facebook SDK iznosi 16% veličine prosječnog Javascripta web stranice i više ne znači da predstavlja 16% ukupnog Javascripta web lokacije na internetu. Kao što ovdje primjećuje David Gilbertson, stvarni globalni broj bio bi mnogo manji - 0,96%. Također postavlja dobru točku u vezi s: predmemoriranjem: Facebook Javascript SDK uopće nije predmemoriran, već se na najidealniji način predmemorira do 20 minuta, nakon čega preglednik korisnika provjerava s Facebook-ovim poslužiteljima da provjeri je li već ima najnoviju verziju.