Отложенная загрузка Яндекс карты и виджета ВК

Внешние скрипты, такие как карты, виджеты соц сетей, чаты, например JivoSite, или сторонние формы лучше подключать на страницу не сразу, а через определенное время и действие (в данном примере после прокрутки страницы).

В этой теме рассмотрено подключение таким образом Яндекс карты и виджета группы ВКонтакте

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

Если кто увлекается высоким показателем PageSpeed Insights от Google, то это тем более необходимо.

Для решения этой задачи можно использовать более профессиональный вариант с плагином jQuery.Lazy или добавить несколько строк кода под конкретный сторонний скрипт из примеров ниже.

Пример отложенной загрузки Яндекс Карты

Код, который дает конструктор карт Яндекса выглядит примерно так:

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A2467dfbbd414306f38c00aa9048346ada3bf2ae105b1d1c84eb6a671b54fc5cd&amp;width=100%25&amp;height=300&amp;lang=ru_RU&amp;scroll=false"></script>

Если карта на всю ширину страницы и находится не в самом ее низу, то лучше всегда указывать scroll=false, а не true, как предлагает Яндекс, чтобы отключить ее масштабирование при прокрутке.

Его заменяем на <div id="yamap"></div> и добавляем скрипт:

В итоге наша карта начнет грузиться через 1 секунду после того, как пользователь прокрутил страницу вниз и появится вместо блока <div id="yamap"></div>

На этой странице используется тот же код, но для наглядности (пока вы читаете и т.д.), карта начнет загружаться через 10 секунд.

Тут появится карта

Работает все просто, после изменения прокрутки мы ставим таймаут и создаем элемент script, который и есть наша карта. Переменная ok нужна для одного повторения действия.

Пример отложенной загрузки виджета группы ВК

По умолчанию мы имеем примерно такой код:

Вместо него ставим просто <div id="vk_groups"></div> и добавляем скрипт:

Как и в первом примере, виджет появится через 10 секунд..

Тут появится виджет группы ВК

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

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!