Как ускорить загрузку страниц, на которых размещены карты Google Maps и Яндекс? Ленивая загрузка карт по требованию

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

• Что такое загрузка карты по требованию на странице сайта?
• Как внедрить возможность на своем сайте уже сейчас?

• Ленивая загрузка встроенной карты;
• Асинхронная загрузка;
• Загрузка по требованию.

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

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

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

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

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

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

<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;
• Яндекс.Карты;

• Новый способ: Как ускорить загрузку сайта и улучшить поведенческие факторы? Ленивый рендеринг контента через content-visibility;
• Как проанализировать и увеличить скорость загрузки сайта.

Выводы