Загружаем сторонние скрипты асинхронно

Только вчера заметил, что виджет вконтакте для групп сильно тормозит при загрузке. И мало того, что он тормозит, так из-за него не грузятся и остальные рабочие скрипты.

А ведь загрузка идет строго по документации. Так зачем, спрашивается, надеяться на сторонние второстепенные сервисы, которые рано или поздно вас подведут.

Раз сервисы сторонние — давайте научим их не лезть в основную загрузку сайта и загружаться второстепенно.

Думаете, что «контакт отвалился только вчера, и то из-за каких-то проблем с датацентром сегодня уже все починили...». Но это же может случиться снова и снова и узнаете вы об этом только от пользователей ваших сервисов. Не проще ли перестраховаться заранее... подумайте об этом...

Делается это очень легко.

Если мы используем JQUERY, в нем есть замечательная функция, которая выполнится после загрузки страницы. Также в нем есть замечательная функция загрузки скриптов$.getScript

Проблема в том, что данная функция вызывает скрипт принудительно, а нам надо научить ее брать данные из кэша, если они есть.

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

В общем в итоговом виде — функция загрузки будет выглядеть следующим образом

$(function(){
    setTimeout(function(){
        $.ajax({
            url: url,
            dataType: "script",
            cache: true,
            success: function(){
                function_after_script_loaded();
            }
        });
    },1000)
})

Рядом же мы можем аналогично запихнуть все оставшиеся второстепенные сервисы, которые могут вызвать задержку. Виджеты от фейсбука, кнопки лайков, аналитика, метрика, логинза и прочее, что от нас не зависит и может привести к задержкам в загрузке сайта

Мы использовали задержку в 1000 миллисекунд, чтобы успели начать выполняться скрипты, которые запланированы на запуск сразу после загрузки страницы. Чтобы данные не брались из кэша — указываем дополнительно cache: true.

Не забывайте также, скрипт срабатывает после прорисовки DOM структуры страницы и визуально страница грузится быстрее за счет отложенных второстепенных скриптов.

Желаю успехов и надежной работы сайта.