Ленивая загрузка для карт

Если на странице есть интерактивная карта Яндекса или Google, то она может отнять несколько секунд в скорости загрузки, и здорово испортить отчет Google PageSpeed.

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

1. Сначала построим карту Яндекса (тут) и получим скрипт, примерно такой:

<script type="text/javascript"          charset="utf-8"          async          src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script> 

2. На своем сайте напишем контейнер для блока карты:

<div id="map_container" class="map container-fluid"> <script id="ymap_lazy"         async         data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script> </div> 

И стили для нашей статичной картинки (её легче сделать любым скриншотером):

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

3. Самое интересное, напишем 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> 

4. Profit! Теперь ваш сайт стал грузиться гораздо быстрее!

P.S.: Данный способ так же возможно адаптировать и для других объектов, не обязательных JS и CSS, благодаря чему скорость загрузки страницы может составить меньше секунды.