How to place in the openapi.js code from Vkontakte?

A

Alexander Dio2016-09-10 19:32:25

JavaScript

Alexander Dio, 2016-09-10 19:32:25

Tell me, PS Insights swears at the openapi.js file and with it the speed of the site is noticeably reduced. How to correctly connect third-party libraries so that there is no message "Remove the JavaScript and CSS code that is blocking the display of the top of the page"?
www.prntscr.com/cgfkbc

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

D

Denis Bukreev, 2016-09-10
@denisbookreev

At the end, put the library connection, leave it at the top

A

amorphine, 2016-09-10
@amorphine

Make loading scripts from VK asynchronous.
defer
async

A

Alex, 2016-09-11
@Kozack

Make the download asynchronous:

<div id="vk_api_transport"></div>
<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ВАШ_APP_ID
    });
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "//vk.com/js/api/openapi.js";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

And place this code at the very bottom of the page.

A

Alexander Dio, 2016-09-11
@darkersoul

Does not work. Uncaught ReferenceError: VK is not defined
1.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>VK.Widgets.Like('vk_like', {type: 'button', height: 20});</script>
<div id="vk_api_transport"></div>
<script type="text/javascript">
    window.vkAsyncInit = function() {
        VK.init({
            apiId: 4127611
        });
    };

    setTimeout(function() {
        var el = document.createElement("script");
        el.type = "text/javascript";
        el.src = "//vk.com/js/api/openapi.js";
        el.async = true;
        document.getElementById("vk_api_transport").appendChild(el);
    }, 0);
</script>
</body>
</html>

2.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script defer async type="text/javascript" src="http://vk.com/js/api/openapi.js?105"></script>
    <script type='text/javascript'>VK.init({apiId: 4127611, onlyWidgets: true})</script>
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>VK.Widgets.Like('vk_like', {type: 'button', height: 20});</script>
</body>
</html>

3. And this example doesn't work. In all examples, the bible is loaded later than the counter method is called from it! And all because of defer! But it is needed to speed up the loading of content!

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script defer type="text/javascript" src="http://vk.com/js/api/openapi.js?105"></script>
    <script type='text/javascript'>VK.init({apiId: 4127611, onlyWidgets: true})</script>
</head>
<body>
<div id='vk_like'></div>
<script type='text/javascript'>
    $(document).ready(function(){
        VK.Widgets.Like('vk_like', {type: 'button', height: 20});
    })
</script>
</body>
</html>