Вставить на сайт виджет ВК и не положить сайт

18.09.2016

Наверняка Вы знаете про такого типа ВК виджеты на сайт:

Дается код для вставки:

<script src="//vk.com/js/api/openapi.js?121" type="text/javascript"></script>
<div id="vk_groups"></div>
<script type="text/javascript">
    VK.Widgets.Group("vk_groups", {
        mode: 0,
        width: "282",
        height: "282",
        color1: 'FFFFFF',
        color2: '2B587A',
        color3: '5B7FA6'
    }, 121647295); 
</script>

Вконтакте не безгрешен и бывают критичные лаги, причем надолго. Уже на этапе подгрузки первого скрипта может произойти длительное ожидание, которое поломает вам сайт - html и js код ниже этого кода просто не будет выполнятся пока не восстановит работу вк.

Кроме этого, виджет скорее всего не играет основной роли на странице и то что остальная часть страницы будет ждать загрузки виджета это есть нехорошо. Поэтому, добавляем в тег script аттрибут async:

<script async="" src="//vk.com/js/api/openapi.js?121" type="text/javascript"></script>

и чтобы остальной код не перестал работать, добавим асинхронное ожидание подгрузки этого скрипта. Получается такой код:

<script async="" src="//vk.com/js/api/openapi.js?121" type="text/javascript"></script>
<div id="vk_groups"></div>
<script type="text/javascript">
    var intervalVK = setInterval(function () {
        if (window.VK) {
            clearInterval(intervalVK);
            VK.Widgets.Group("vk_groups", {
                mode: 0,
                width: "282",
                height: "282",
                color1: 'FFFFFF',
                color2: '2B587A',
                color3: '5B7FA6'
            }, 121647295);
        }
    }, 500);
</script>

Теперь страница будет готова быстрее и не будет зависеть от виджета.


Оставить комментарий