оптимизация загрузки виджета vk like

04 марта 2022, 23:30

Использую в верстке виджет вконтакте, проверил страницу на google page speed результат снизился значительно.

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?165"></script>
<script type="text/javascript">
  VK.init({apiId: 7284722, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

Подскажите, как можно осуществить его загрузку отложенно, после загрузки страницы или до прокрутки до кнопки вк.

Answer 1

Переместите тэг скрипта в футер сайта, а js код оберните в $(document).ready().

Тогда скрипт не будет блокировать отрисовку html и при этом не будет ошибок из-за позднего подключения кода.

Для работы требуется jQuery

<script type="text/javascript"> 
$(document).ready(function(){
  VK.init({apiId: 7284722, onlyWidgets: true}); 
});
</script> 
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div> 
<script type="text/javascript">
$(document).ready(function(){
VK.Widgets.Like("vk_like", {type: "button"});
}); 
</script>

Полный рабочий код:

<div id="vk_like"></div>
<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script> // вам может быть не нужен jQuery 
<script type="text/javascript">
    $(document).ready(function(){
        VK.init({apiId: 7289751, onlyWidgets: true}); /* проверьте appid, я поставил свой для своего сайта. */
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        VK.Widgets.Like("vk_like", {type: "button"});
    });
</script>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?165"></script>

Рабочий пример на моём сайте: https://adudnik.ru/vk_example.html

Результат pageSpeed