Если на странице есть интерактивная карта Яндекса или Google, то она может отнять несколько секунд в скорости загрузки, и здорово испортить отчет Google PageSpeed.
В этой статье опишу пример оптимизации подключения Яндекс карты, где она будет подгружаться ленивым способом при наведении курсора мыши.
1. Сначала построим карту Яндекса (тут) и получим скрипт, примерно такой:
2. На своем сайте напишем контейнер для блока карты:
И стили для нашей статичной картинки (её легче сделать любым скриншотером):
3. Самое интересное, напишем JavaScript код, который будет отслеживать события наведения мыши или нажатия на тач экран телефона, и подменять статичную картинку на интерактивную карту:
4. Profit! Теперь ваш сайт стал грузиться гораздо быстрее!
P.S.: Данный способ так же возможно адаптировать и для других объектов, не обязательных JS и CSS, благодаря чему скорость загрузки страницы может составить меньше секунды.
В этой статье опишу пример оптимизации подключения Яндекс карты, где она будет подгружаться ленивым способом при наведении курсора мыши.
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, благодаря чему скорость загрузки страницы может составить меньше секунды.
trir
кто то ещё использует этот треш?
remzalp
Вы сослались на Google треш, осуждая статью про ЯндексКарты?
Не треш — openstreetmap?