Цена чужой кнопки на моём сайте
Социальная кнопка может требовать загрузки и выполнения чужого кода при каждом открытии статьи, даже если читатель ею не воспользуется. Для простой публикации ссылки это не всегда оправданно. Прежде чем ускорять загрузку виджета, я бы определил, какая его функция нужна на странице и можно ли получить её без подключения всего остального.
В статье об асинхронных социальных кнопках я собрал загрузку нескольких сервисов в небольшой скрипт. Хотелось, чтобы их подключение не останавливало загрузку страницы и читатель раньше увидел текст. С атрибутом async браузер продолжает разбирать HTML, пока загружает скрипт, а выполняет его при первой возможности после загрузки. Это может произойти ещё до появления текста на экране, а выполнение кода — задержать отрисовку и обработку действий читателя. Часть работы может прийтись уже на чтение и прокрутку. Появление статьи на экране ещё не означает, что подключённые скрипты перестали ей мешать.
Если задача кнопки состоит в том, чтобы помочь поделиться ссылкой, показывать знакомых читателя и считать реакции необязательно. Когда сервис предоставляет адрес страницы для публикации ссылки, на него можно вести обычным элементом a. По нажатию читатель перейдёт в выбранный сервис и продолжит публикацию там.
У такой ссылки тоже есть ограничения. Адрес и параметры зависят от сервиса, а их поддержку придётся проверять. Ссылка не воспроизводит всю функциональность виджета и не сообщает автоматически, состоялась ли публикация. Но если от кнопки ожидали именно перехода к публикации, это вполне законченный вариант. Чужой скрипт на странице статьи ему не нужен.
В следующей заметке я добавлял к кнопкам учёт действий в аналитике. Здесь тоже важно понимать, что именно мы посчитали. Нажатие на ссылку ещё не означает, что читатель опубликовал запись. Если ради более подробного события мы подключаем целый набор скриптов сервиса, полезно сначала понять, что собираемся решать по этим данным. Иначе сама возможность получить ещё один счётчик становится причиной загрузить ещё один скрипт.
С внешними комментариями выбор труднее. В старом сравнении я смотрел на перевод интерфейса, варианты входа и репутацию участников. Это понятные свойства: они непосредственно влияют на разговор под статьёй. Комментарии действительно могут быть самостоятельной частью страницы, которую ссылкой без потерь не заменишь.
Есть и другие вопросы. Можно ли получить копию обсуждений? Сохраняются ли связи между ответами? Получится ли прочитать уже написанное, когда внешний сервис недоступен? Не обязательно сразу писать собственную систему комментариев. Но до подключения полезно понять, что произойдёт с разговорами под статьями, если сервис закроется или мы решим от него отказаться.
Отложить до действия
Если встроенный интерфейс нужен не каждому посетителю, его можно загружать по запросу. Например, показать количество комментариев из собственной сохранённой копии и кнопку «Загрузить комментарии», а рядом назвать сервис, к которому она обратится. После нажатия подключить его скрипт. Теперь загрузка нужна для действия, которое читатель сам выбрал.
Здесь важно не замаскировать задержку. После нажатия кнопка сразу показывает, что загрузка началась. Повторное нажатие не создаёт вторую копию виджета, а ошибка не оставляет вечный индикатор. Если есть страница обсуждения у самого сервиса, на неё можно дать ссылку для продолжения. При недоступности комментариев статья остаётся читаемой.
Отложенная загрузка меняет и момент передачи данных. Пока страница не делает запросов к сервису, сам этот способ интеграции не сообщает ему о посещении. После запроса сервис увидит сетевое обращение и те данные, которые браузер передаст вместе с ним. Конкретный состав зависит от запроса, политики браузера и настроек страницы. Поэтому обещание полной приватности по одному лишь атрибуту async было бы неверным: этот атрибут определяет, когда скрипт загружается и запускается, а не то, что он собирается делать.
Проверять подключение стоит и с работающим сервисом, и с заблокированными запросами к нему. В первом случае видно, что браузер делает после загрузки скрипта; во втором понятно, какая часть страницы зависит от ответа. Выигрыш во времени можно назвать только после измерений. Само наличие async или небольшой размер загрузчика его не доказывают.
Для кнопки под статьёй я начал бы с обычной ссылки. Встроенные комментарии потребуют большего, но и их не обязательно загружать до того, как читатель захочет открыть обсуждение. Мне важно, чтобы каждая такая зависимость отвечала за нужное действие и её сбой не мешал читать саму статью.