В этой статье опишу пример оптимизации подключения Яндекс карты, где она будет подгружаться ленивым способом при наведении курсора мыши.
1. Сначала построим карту Яндекса (тут) и получим скрипт, примерно такой:
<script type="text/javascript" charset="utf-8" async src="http://personeltest.ru/aways/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="http://personeltest.ru/aways/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, благодаря чему скорость загрузки страницы может составить меньше секунды.
