Небольшое отступление: в моем примере будет показана отложенная загрузка компонента "Элементы раздела", т.к. на самом сайте группа с блоком ВК определяется внешним фильтром arrFilter, а сами группы загружены в инфоблоках.
1. С помощью jQuery плагина isInViewport.min.js (1,71 КБ) определяем, что пользователь долистал страницу, до блока с группой ВК; 2. Отправляем AJAX запрос на подгрузку передавая необходимые данные; 3. Подгружаем openapi.js для обработки служебного скрипта; 4. Вставляем данные из результата AJAX-запроса в тело страницы.
Код
В теле страницы (например, footer.php шаблона сайта) располагаем такой код:
Все это ради того, что бы посетитель увидел сайт раньше. В моем случае до 2 секунд быстрее! Конечно, пролистав страницу загрузится и виджет ВК и суммарный объем данных станет даже чуть больше на несколько КБ, но первое впечатление сайт произведет раньше, посетитель может раньше взаимодействовать с интерфейсом и т.д.
UPD1: Обновил код. Теперь ошибки последовательности запросов исключены.
Все это ради того, что бы посетитель увидел сайт раньше. В моем случае до 2 секунд быстрее!
может быть суммарное время, а не показ раньше? Т.е. посетитель уже видит сайт и только после этого выполняются скрипты?
а вообще вопрос философский ровно настолько, как и замедление сайта благодаря метрикам и аналитикам и прочим синхронностям. Когда канал узкий,да, чуствительно.
Коваленко Алексей, да, суммарно время - более точное понятие в нашем случае, т.к. загрузка идет в асинхронном режиме. После проделанных манипуляций скрипты для блока с ВК загрузятся, если пользователь долистает до этого блока, не раньше.
Вопрос замедления, скорее, актуален не столько в скорости загрузки сторонних библиотек, сколько в создании отдельных 20 запросов. То есть - это сами запросы, парсинг HTML, CSS, JS - это может занять компьютер на сотни мс, а смартфон еще больше. Вы правы - вопрос философский и стоит ли так извращаться решать разработчику.
Кстати, в процессе теста заметил - иногда бывает ситуация, когда openapi.js загружается позже инлайнового скрипта и он (скрипт) выдает ошибку VK is not defined... надо будет второй ajax повесить на success первого... так будет лучше. Перепишу и обновлю заметку!
Я не понял, страница загрузится - то есть сервер отдаст html, потом браузер делает запросы для получения ресурсов, скрипты выполняются после получения бразуреом ответа от сервера (на первый хит) - как это скажется на увеличении скорости отгрузки страницы?
Микулич Евгений, 1) скрипт openapi.js загрузится только тогда, когда он реально понадобится, 2) компонент bitrix:catalog.section с шаблоном vk не будет отрабатывать при загрузке страницы.
Постоев Олег, а ошибки, если ajax-запрос к странице отработает быстрее, чем загрузка скрипта openapi не возникнет? Возможно, имеет смысл воспользоваться промисами (это, правда, задержит ajax-хит) или, например, обернуть скрипт VK.Widgets.Group в setInterval и проверять наличие переменной VK - если она есть, то сбрасывать интервал и инициализировать группы.
Микулич Евгений, здесь задача в том, чтобы, если пользователь вообще не долистает до группы, вообще ничего не грузилось. Это оптимизация больше трафика клиента, чем скорости.
Алексей Уколов, да, такая проблема на данный момент есть, о ней я писал в конце второго комментария. Поправлю код и обновлю заметку. Надо будет второй запрос повесить на success первого.
Микулич Евгений, композит все равно заставит браузер грузить скрипты с контакта. То есть композит нужен для быстрой отдачи шаблонов и последующим их обновлением до актуального состояния. А моё решение отложит саму загрузку виджета, до момента когда это вообще понадобится. Впрочем, Алексей достаточно подробно вам ответил
я могу в динамическую область положить весь компонент - и эффект будет тот же - по сути тоже самое только в вашем случае это будет по скролу до этого места
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».