Как сделать асинхронной загрузку виджета вконтакте?

Использую виджеты голосований ВК, которые размещены на многих страницах сайта. Проблема в том, что вконтакт для корректной работы виджета требует вставлять скрипты в head, которые тормозят загрузку (в PageSpeed Insights только из-за этого отжирается почти 30 баллов). Если применяю к ним defer, то работает только в фаерфоксе, в хроме виджеты не отображаются. Гуглил проблему — там решения предлагаются для виджетов групп, у которых одинаковый код для всех страниц, у виджета голосований для каждого свой айди, поэтому так не получатся. Есть ли возможность перенести эти скрипты в body или сделать их загрузку асинхронной?
  • Вопрос задан
  • 4982 просмотра
Пригласить эксперта
Ответы на вопрос 6
@Vor_tex
Вот как используя документацию VK мне удалось реализовать асинхронную загрузку на примере виджета для группы:
<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ID_Вашего_Приложения,
      onlyWidgets: true
    });
    VK.Widgets.Group("vk_groups", {mode: 1, no_cover: 1, width: "250"},  ID_Вашей_Группы); //указывается ID группы лишь потому что это пример
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?156";
    el.async = true;
    document.getElementById("vk_groups").appendChild(el);
  }, 0);
</script>
<!-- VK Widget -->
<div id="vk_groups"></div>


Где:
ID_Вашего_Приложения - необходимо создать приложение тут и перейдя в настройки получить тот самый ИД (без него работать асинхронно не будет)

ID_Вашей_Группы - цифровой ID вашей группы лично я смотрел тут
Ответ написан
Комментировать
nazarpc
@nazarpc
Open Source enthusiast
Там же в PSI пишется как исправить - вместо defer добавляете атрибут async и всё.
Ответ написан
zmoe
@zmoe
Добрый, умный и главное скромный.
Решается все просто: сделайте отложенную загрузку, секунд так через 10-20 после загрузки страницы. Все скрипты в файл на хостинге отдельной страницей, а ссылку на нее в iframe через таймер запускайте. Я так сделал у себя на сайта их виджет, посмотрите в конце страницы https://aliprofi.ru/letyshops/

Там пустое место, через 30 секунд подгружается.
Ответ написан
Комментировать
miraage
@miraage
Старый прогер
А как насчет извращений? Делаете iframe внизу тэга body, а внутри iframe в head засунуть скрипты?
Ответ написан
@toyvo_glumov Автор вопроса
Нашел возможость, которую ВК крысит у себя в документации, но у меня почему-то не работает, хотя вроде все правильно делаю, свой айди вставляю, добавляю скрипт сразу после body. В чем еще может быть проблема?
Ответ написан
germakis
@germakis
К сожалению, ни async, ни defer работать не будут. Что я только не перепробовал уж. В итоге нашёл решение сразу для всех виджетов ВКонтакта, именно для асинхронной загрузки. Интересно, оно работает у вас? fishki-wordpress.ru/coding-wp/345
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы