How to make asynchronous loading of the VKontakte widget?

Question

JavaScript

Использую виджеты голосований ВК, которые размещены на многих страницах сайта. Проблема в том, что вконтакт для корректной работы виджета требует вставлять скрипты в head, которые тормозят загрузку (в PageSpeed Insights только из-за этого отжирается почти 30 баллов). Если применяю к ним defer, то работает только в фаерфоксе, в хроме виджеты не отображаются. Гуглил проблему — там решения предлагаются для виджетов групп, у которых одинаковый код для всех страниц, у виджета голосований для каждого свой айди, поэтому так не получатся. Есть ли возможность перенести эти скрипты в body или сделать их загрузку асинхронной?

Answer 1

Here is how, using the VK documentation , I managed to implement asynchronous loading on the example of a widget for a group:

<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>

Where:
Your_Application_ID - you need to create an application here and go to the settings to get the same ID (it will not work asynchronously without it)
Your_Group_ID - the digital ID of your group, I personally looked here

Answer 2

In the same place in PSI it is written how to fix it - instead you deferadd an attribute asyncand that's it.

Answer 3

Everything is solved simply: make a delayed loading, after 10-20 seconds after loading the page. All scripts to a file on the hosting as a separate page, and run a link to it in the iframe through a timer. This is how I made their widget on my site, look at the end of the page https://aliprofi.ru/letyshops/
There is an empty space, after 30 seconds it loads.

Answer 4

What about perversions? Do you make an iframe at the bottom of the body tag, and put scripts inside the iframe in the head?

Answer 5

Нашел возможость, которую ВК крысит у себя в документации, но у меня почему-то не работает, хотя вроде все правильно делаю, свой айди вставляю, добавляю скрипт сразу после body. В чем еще может быть проблема?

Answer 6

К сожалению, ни async, ни defer работать не будут. Что я только не перепробовал уж. В итоге нашёл решение сразу для всех виджетов ВКонтакта, именно для асинхронной загрузки. Интересно, оно работает у вас? fishki-wordpress.ru/coding-wp/345