Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит

Согласно данным, собранным компанией 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»