Оптимизировал тут я свой сайт в надежде получить 100 пингвинов по Google PageSpeed, и столкнулся конечно же с проблемой с загрузкой Яндекс Карты. Даже не беря во внимание PageSpeed, загрузка Яндекс карты нехило так забирает время загрузки страницы, поэтому давай сделаем lazy load для этого чуда.

Давай приступим.

Ловим событие, когда весь HTML будет загружен

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initYandexMap, 5000);
});

Первым делом мы слушаем событие DOMContentLoaded, которое сработает когда весь HTML будет загружен и пройден парсером.

Дальше, с помощью setTimeout мы ставим задержку в 5 секунд, прежде чем вызвать функцию initYandexMap() которую разберём дальше. Обрати внимание, задержка указывается в миллисекундах (5000 это 5 секунд).

Ловим события активности юзера

document.addEventListener('scroll', initYandexMapOnEvent);
document.addEventListener('mousemove', initYandexMapOnEvent);
document.addEventListener('touchstart', initYandexMapOnEvent);

function initYandexMapOnEvent (e) {
    initYandexMap();
    e.currentTarget.removeEventListener(e.type, initYandexMapOnEvent);
}

Если юзер начнёт скролить страницу, двигать мышкой или прикасаться к тач-экрану, то значит пора начинать рендерить карту не дожидаясь 5-ти секунд задержки. Первые три строчки кода позволяют нам это отследить.

Функция initYandexMapOnEvent довольно простая, она вызывает функцию initYandexMap, которая загружает карту, а так же удаляет слушателей события активности юзера, чтобы не было утечки памяти.

Загружаем карту

function initYandexMap () {
    if (window.yandexMapDidInit) {
        return false;
    }
    window.yandexMapDidInit = true;

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;

    script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5f15a6d762c404ba94d9d91392cd956bbb8798f5e10264eb3b8971442a6a1fa7&width=100%25&height=600&lang=ru_RU&scroll=true';

    document.getElementById("YandexMap").appendChild(script);
}

Тут уже всё несколько сложнее, хотя тоже довольно просто 🙂

На строке 2-4 мы первым делом проверяем существует ли переменная yandexMapDidInit, если существует, значит карта уже загружена и повторно загружать её не надо. На строке 5 мы собственно эту переменную и объявляем.

Строки 7-9 просто скопируй, их нет смысла объяснять. А вот дальше уже интереснее.

В строку 11 (script.src =) тебе необходимо скопировать код своей карты, который ты получил при генерации этой самой карты. Обрати внимание, что там есть параметры width и height, не пропусти их.

И самое последнее, это document.getElementById("YandexMap").appendChild(script);, тут мы указываем в какой блок вставлять нашу карту. В моём случае у меня есть на странице сайта блок <div id="YandexMap"></div>.

Полный код lazy load Яндекс карт

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(initYandexMap, 5000);
});

document.addEventListener('scroll', initYandexMapOnEvent);
document.addEventListener('mousemove', initYandexMapOnEvent);
document.addEventListener('touchstart', initYandexMapOnEvent);

function initYandexMapOnEvent (e) {
    initYandexMap();
    e.currentTarget.removeEventListener(e.type, initYandexMapOnEvent);
}

function initYandexMap () {
    if (window.yandexMapDidInit) {
        return false;
    }
    window.yandexMapDidInit = true;

    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;

    script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5f15a6d762c404ba94d9d91392cd956bbb8798f5e10264eb3b8971442a6a1fa7&width=100%25&height=600&lang=ru_RU&scroll=true';

    document.getElementById("YandexMap").appendChild(script);
}