Обновление 01.01.2021: этот пост был написан несколько лет назад, и различные детали больше не актуальны. Размер Facebook SDK теперь значительно меньше, особенно когда он поставляется в современные браузеры. Это хорошая разработка, особенно в свете того факта, что браузеры начали запрещать межсайтовое кэширование ресурсов, требуя загрузки новой копии SDK на каждый сайт.
Согласно данным, собранным BuiltWith.com, 6% из 10 000 самых посещаемых сайтов загружают контент с серверов Facebook. Для подавляющего большинства из них этот контент, вероятно, представляет собой Javascript SDK Facebook, огромный блок кода, необходимый для отображения таких функций, как кнопка Like (как показано на многих медиа-сайтах) и виджеты комментариев Facebook (также используемые во многих крупных медиа). сайты, в том числе Buzzfeed).
Этот код SDK настолько велик, что составляет около 16% от общего размера всего JavaScript на средней веб-странице.
Facebook SDK представляет собой обширную и широко используемую программную библиотеку, которая является прекрасным способом проиллюстрировать некоторые ответы на вопросы: почему средний сайт сегодня такой большой? И насколько на самом деле имеет значение размер?
Почему такой большой?
Facebook SDK является очень полнофункциональным, дублируя многие инструменты, которые средний сайт, вероятно, уже включает для использования его собственными разработчиками: методы для получения данных с других сайтов, для определения того, какой браузер и устройство использует пользователь, чтобы нацеливать на них определенные функции и отображать элементы пользовательского интерфейса (например, диалоговые окна и кнопки подтверждения). Если мы классифицируем все части SDK, разбивка будет выглядеть так:
Из набора функций больше всего выделяются три:
«Canvas» - это система Facebook для приложений, которые предназначены для загрузки в Facebook (Facebook в прошлом сильно подтолкнул разработчиков к созданию приложений, которые жили в Facebook; я не совсем уверен, насколько широко такие приложения используются сегодня, но в любом случае обычный веб-сайт не использует никаких функций, связанных с Canvas.) Стоимость их включения в SDK довольно незначительна: всего 1,5% от общего размера.
После этого у нас есть поддержка устаревших функций. Это отражает тот факт, что API со временем накапливает несколько интерфейсов для обработки одних и тех же функций. Например, разработчики могут написать код, который вызывает либо FB.getLoginStatus () (устаревший подход к запросу текущего статуса входа пользователя в Facebook), либо Auth.getLoginStatus () (метод новый, поощряемый подход). Способ обойти необходимость включения обоих наборов методов - выпустить их в отдельных версиях SDK, но Facebook решил этого не делать, вероятно, чтобы упростить работу для разработчиков и максимально увеличить количество сайтов, использующих один и тот же файл ( для увеличения вероятности того, что обычный пользователь уже скачал его). Это решение связано с небольшими затратами: примерно 3,5% кода SDK предназначено для обработки функций, которые явно помечены как «устаревшие» (и вполне возможно, что есть еще много «устаревших» функций, которые явно не отмечены как таковые. ).
Что наиболее важно, SDK включает в себя ряд полифиллов и утилит, подобных полифиллам, которые составляют более 15% его кода. Полифиллы используются для предоставления функций, которые есть в новых браузерах, в старые браузеры, а иногда также для предоставления новых функций, которые появятся в ближайшее время, но еще не были добавлены ни в один из браузеров. Большинство полифилов, включенных в SDK Facebook, предназначены для функций, которые уже включены в браузеры, используемые подавляющим большинством пользователей Интернета. Они служат только для того, чтобы заставить SDK работать для ‹ 1% глобальных пользователей Интернета, которые используют старые браузеры, такие как Internet Explorer 8, от поддержки которых отказались многие (если не подавляющее большинство) крупных сайтов.
Из оставшихся ~ 80% SDK немного сложнее распутать, какие функции и для каких целей необходимы. Это связано с тем, что он написан так, что для использования такой простой функции, как кнопка «Нравится», необходимо также включить код, который используется только для комментариев, встраивания видео, кнопок входа в систему и других несвязанных функций. Facebook мог бы решить распространять файлы гораздо меньшего размера для включения только отдельных функций, таких как кнопки «Мне нравится», но имеет бизнес-цель побудить сайты использовать как можно больше функций, предоставляемых FB.
Размер имеет значение?
Из-за широкого использования SDK Facebook и того факта, что он меняется относительно редко, многие пользователи, вероятно, уже скачали его до того, как загрузят сайт. Фактически, это большая часть объяснения того, почему Facebook будет распространять такой огромный файл, а не файлы меньшего размера для определенных функций, таких как кнопки Мне нравится. И для большинства сетевых подключений пользователей - по крайней мере, в развитых странах - время, необходимое для загрузки файла, минимально.
Но независимо от того, загружен ли уже SDK в браузер пользователя, выполнение большого блока Javascript, особенно на мобильных устройствах, связано с накладными расходами. На относительно новом MacBook Pro, на котором я пишу об этом, SDK Facebook запускается примерно за 50 мс (1/20 секунды) на таком сайте, как Buzzfeed. Неплохо - особенно в контексте с остальной частью JS-кода, включая связанный с рекламой код, выполнение которого занимает гораздо больше времени, но все же нетривиальные затраты на то, что используется только для отображения комментариев в самом низу страницы. страница.
На очень новом смартфоне (Google Pixel) время выполнения JS удваивается и теперь составляет более 1/10 секунды:
Если смотреть в контексте, это крошечная часть от общего времени выполнения кода на странице. Но это увеличивает количество времени, в течение которого прокрутка или иное взаимодействие со страницей может быть прерывистым и неприятным. И это становится важным моментом: этот конкретный SDK имеет предельную стоимость, но современные веб-сайты - особенно сайты СМИ - часто включают аналогичный код от большого количества третьих лиц (этот пример, который я захватил у Gawker до того, как он был убит миллиардером вампир показывает, сколько может быть таких запросов).
Даже если не учитывать влияние на конфиденциальность отправки некоторой пользовательской информации каждой из этих третьих сторон, стоимость всех этих функций быстро увеличивается. За каждый сторонний скрипт, добавляемый сайтом, приходится платить как с точки зрения производительности, так и с точки зрения рационализации добавления следующего «относительно безвредного» фрагмента стороннего кода позже. Помимо непосредственного воздействия на производительность аддитивной стоимости всего этого кода, это влияет на моральный дух разработчиков: представьте, что вы работаете в течение нескольких дней, чтобы сократить время загрузки вашего собственного кода на 10%, только чтобы увидеть добавленный гигантский блок стороннего кода, который карликов влияние этих кропотливых усилий. А затем (если вы работаете на медиа-сайте), наблюдая, как один и тот же шаблон повторяется снова и снова каждые несколько месяцев.
Стоит ли его включать?
Если вам нужно использовать такую функцию, как Facebook Comments, не обойтись без загрузки Facebook SDK. Но в зависимости от того, как структурирован ваш сайт, вы можете ограничить влияние SDK на производительность, загружая его только при необходимости (например, после того, как пользователь прокрутил страницу вниз до точки, где комментарии должны стать видимыми).
Если вы хотите использовать кнопку Нравится, остановитесь и подумайте еще раз. Facebook больше не отображает лайки страницы на видном месте (или, в большинстве случаев, вообще) на шкале времени пользователя. Лучше использовать простую настраиваемую кнопку или ссылку Поделиться, и в качестве дополнительного преимущества это предотвратит отслеживание Facebook всех посещений вашей страницы и нарушение конфиденциальности ваших пользователей. Сайты, на которых была удалена кнопка Нравится, не смогли выявить каких-либо негативных последствий этого, когда речь идет о переходах трафика Facebook.
ИСПРАВЛЕНИЕ к заголовку: Первоначально я озаглавил это «Почему 16% кода на среднем сайте принадлежит Facebook и что это означает». Как справедливо отметили некоторые, это означает, что 16% Javascript на всех сайтах в Интернете (или, по крайней мере, на всех ведущих сайтах) состоит из Facebook Javascript SDK. Это не входило в мои намерения, и я понимаю, что это выглядело слишком сенсационным.
Надеюсь, новое название проясняет, что размер пакета SDK Facebook составляет 16% от размера Javascript среднего сайта, и больше не подразумевается, что он составляет 16% от общего объема Javascript сайта в Интернете. Как отмечает Дэвид Гилбертсон, реальное глобальное число было бы намного меньше - 0,96%. Он также поднимает хороший вопрос относительно кеширования: SDK Facebook Javascript вообще не кэшируется оптимальным образом, он кэшируется только самым идеальным образом на срок до 20 минут, после чего браузер пользователя проверяет серверы Facebook, чтобы убедиться, что он уже установлена последняя версия.
