Чому Facebook SDK займає близько 16 % JavaScript-коду на сайтах і що це означає?


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Згідно з даними, зібраними компанією BuiltWith.com, близько 6% з 10 000 сайтів з великою кількістю трафіку завантажують контент з Facebook. Більшість з них використовують Facebook Javascript SDK, який потрібний для відображення, наприклад, кнопки “Like” або віджетів коментарів. Цей код настільки великий, що займає близько 16% від загального розміру усього Javascript на веб-сторінках.

 

Ось вони, винуватці довгого завантаження сучасних веб-сайтів.

Оскільки Facebook SDK – значна і широковикористовувана бібліотека програмного забезпечення, вона послужить відмінним прикладом для отримання відповідей на наступні питання: чому середньостатистичний сайт сьогодні такий великий, і наскільки розмір дійсно має значення.

Чому сайти такі великі?

Варто відмітити, що Facebook SDK має великий функціонал, який дублює багато вже використовуваних на веб-сайтах інструментів, такі як витягання даних з інших сайтів або визначення браузерів користувачів для відображення елементів призначеного для користувача інтерфейсу (наприклад, діалогових вікон підтвердження і кнопок). Якщо завантажити і класифікувати усі частини SDK, то розбиття виглядатиме таким чином:

З цих функцій можна виділити три найзначиміші:

Canvas – це рекламна мережа Facebook, що дозволяє створювати інтерактивну рекламу. Вона використовується в мобільних застосуваннях. Варто відмітити, що на среднестатестических веб-сайтах Canvas не використовується. Його розмір складає 1,5% від загального розміру SDK.

Окрім цього, в SDK також міститься підтримка застарілих функцій. У коді додані декілька функцій інтерфейсів, які виконують одні йті ж завдання. Наприклад, можна викликати функцію авторизації FB.getLoginStatus () (застарілий метод)або Auth.getLoginStatus () (новий рекомендований метод). Обхід включення обох методів у бібліотеку полягає у випуску окремих версій SDK, але Facebook вирішив не робити цього, щоб збільшити кількість сайтів, що використовують один і той же файл (тобто для збільшення вірогідності того, що користувачі вже завантажили потрібний файл у свої браузери). Виходить, що ця частина SDK, позначена як “спадкоємство”, займає приблизно 3,5% усього коду. Цілком можливо, що існує ще багато “успадкованих” функцій, які просто не позначені такими.

Найбільшу частину SDK займають поліфіли і поліфілоподібні утиліти, які складають приблизно 15% від усього розміру коду. Поліфіли використовуються для надання нових або не включених функцій в старі або нові браузери. Більшість поліфілів, включених в Facebook SDK, призначені для функцій, які вже є у браузерах, використовуваних переважною більшістю користувачів інтернету. Вони використовуються тільки для того, щоб підтримувати менше 1% користувачів інтернету, які використовують старі браузери, наприклад, Internet Explorer 8 (більшість сайтів відмовилися підтримувати його).

Інші 80% SDK настільки заплутані, що стає складно зрозуміти, які функції там використовуються і для чого. Це пов’язано з тим, що, наприклад, використання такої функції як кнопка “Like” задіює код, який використовується для коментування, виведення відеороликів, кнопок входу і інших незв’язаних з нею функцій. У Facebook могли б розбити код на дрібніші частини, але вони налаштовані на заохочення сайтів до використання якомога більше своїх функцій.

Чому розмір має значення?

Із-за широко поширеного використання Facebook SDK, а також того факту, що він змінюється відносно рідко, у багатьох користувачів він вже завантажений в кеш браузеру. Цей факт і є головною причиною того, що компанія поширює саме великий файл SDK, а не дрібніші частини коду для конкретних функцій, наприклад, кнопки “Like”. Та і завантаження такого великого файлу (принаймні, в розвинених країнах) не займає багато часу.

Але незалежно від того, чи завантажений SDK від Facebook у браузер користувача, завжди існує ризик великих витрат потужності пристрої, які пов’язані із запуском великого блоку коду Javascript, особливо на мобільних пристроях. На відносно новому MacBook Pro запуск SDK займає близько 50 мс (1/20 в секунду) на сайті, такому як Buzzfeed. Це дуже непоганий результат, особливо якщо узяти до уваги увесь контент сайту (включаючи завантаження коментарів внизу сторінки), а також код, пов’язаний з рекламними оголошеннями, який займає значно більше часу для виконання.

Швидкість запуску скриптів на сайті на відносно новому MacBook Pro.

На абсолютно новому смартфоні (Google Pixel) час виконання JS подвоюється, і тепер воно займає 1/10 секунд:

Швидкість запуску скриптів на сайті на Google Pixel.

Якщо подивитися в загальному контексті, то ця невелика кількість часу, витрачена на виконання коду на сторінці. Але це також впливає на взаємодію з ресурсом під час виконання скрипта, що може бути неприємним “сюрпризом” для користувачів. Одним з важливих моментів є те, що цей конкретний SDK має граничні витрати. Окрім цього, сучасні веб-сайти, особливо медіа-сайти, часто включають аналогічний код від великого числа сторонніх розробників.

Навіть якщо відкласти убік питання конфіденційності відвідувачів до кожної з цих третіх осіб, плата за використання усіх цих функцій збільшується. Кожен сторонній скрипт, який додається на сайт, обходиться дорого, як з точки зору продуктивності, так і в цілях подальшої раціоналізації додавання нового “відносно нешкідливого” фрагмента стороннього коду. Окрім безпосередньої дії на швидкість роботи ресурсу, це також впливає на моральний дух розробників, які можуть витратити декілька днів, щоб заощадити 10% часу завантаження веб-сайту тільки для того, щоб додати велетенський блок стороннього коду. І потім (якщо ви працюєте на медіа-сайті) ця ж модель повторюється знову і знову кожні декілька місяців.

Чи варто використати цю SDK?

Якщо вам треба встановити систему коментарів від Facebook, то це не означає, що вам треба відразу завантажувати їх SDK. Залежно від того, як структурований сайт, можна підвантажувати систему коментарів тільки при необхідності, наприклад, під час переходу користувача вниз сторінки.

Якщо вам треба встановити кнопку “Like”, то подумайте двічі, чи треба вам це взагалі. Facebook більше не відображає лайку сторінок в стрінці користувачів. У такому разі краще використати просту призначену для користувача кнопку “Share” або посилання. В якості побічної переваги це запобіжить відстежуванню Facebook усіх відвідувань вашої сторінки і втручання в конфіденційність користувачів. Варто відмітити, що сайти, які видалили кнопку “Like”, не змогли виявити яких-небудь негативних наслідків від своїх дій.

Переклад статті “Why 16% of the code on the average site belongs to Facebook, and what that means”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *