Ленивая загрузка карт по требованию

Ленивая загрузка позволяет организовать загрузку данных при прокрутке страницы к объекту.

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

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

Но нет предела совершенству.

Что делать? Провести техническую оптимизацию вставки карты. Логика такая:

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

Какая польза от внедрения? Решение проблемы со скоростью загрузки страницы. Большинство пользователей используют мобильные устройства. Часто мобильный интернет медленный.

Используйте ленивую загрузку карту уже сейчас. В результате:

• Улучшение значения фактора Page Experience. Скорость загрузки влияет на поисковую оптимизацию;
• Улучшение значения конверсии через повышение скорости;
• Улучшение поведенческих факторов ранжирования;
• Снижение объёма передаваемых данных, что позволяет экономить средства для больших сайтов;;
• Уменьшение расхода батареи устройства.

Улучшается и значение в отчете Google PageSpeed, LightHouse.



Как внедрить?

Внедрение ленивой загрузки карты на своем сайте уже сейчас

Шаг 1. Сначала получаем код карты из сервиса.

Например:

<script type="text/javascript" 
        charset="utf-8" 
        async 
        src="ссылка"></script>

Шаг 2. Далее создаем контейнер для блока карты. Например так:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="ссылка"></script>
</div>

Шаг 3. Создаем стиль для статичной картинки карты. Например:

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/map.jpg);
        background-position: center center;
    }
</style>

Шаг 4. Прописываем код JavaScript. Задача кода заключается в отслеживании событий. Например, наведение мыши на персональном компьютере или тап на мобильном устройстве. По событию код меняет статичную картинку на интерактивную карту.

Например:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

Карта стала доступна по требованию.



Теперь страница с картой грузится быстрее.

Данный способ подходит для любых встраиваемых карт:

• Google Maps;
• Apple Maps;
• Яндекс.Карты;

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

Ленивая загрузка карт по требованию