{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}
SEO
PR-CY блог

Как настроить отложенную загрузку карты на сайте

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

Это может быть карта Google, Яндекс или 2ГИС с адресом компании. К тому же, если пользователи останутся на сайте, это увеличит время визита, что полезно для SEO.

С картами есть одна проблема — они тяжелые и могут замедлять загрузку страницы.

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:

Чтобы страница с картой не тормозила, можно использовать «ленивую загрузку» — Lazy-load. Есть несколько вариантов реализации, о них ниже.

Загрузка карты по доскроллу до нее

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

Пользователь Хабра iefedorov рассказывает, как изменить код карты от Google.

Пример исходного кода:

<iframe src="https://www.google.com/maps/embed?pb=!1m14..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Нужно поменять его таким образом:

<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Браузер будет получать src = "", когда читателю понадобится карта.

Загрузка карты после наведения курсора

Другой пользователь Хабра, Dionisvl, предлагает загружать карту Яндекса только при наведении на нее курсора.

Купить рекламу Отключить

Конструктор Яндекса выдает такой код:

<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>

В коде страницы нужно написать контейнер для блока с картой:

<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>

Дальше надо добавить 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>

Готово! Теперь карта не будет тормозить загрузку страницы.

498 показов
731 открытие
1 репост
0
3 комментария
Виктор Петров

Не надо lazy-load для важного контента. И время на странице не относится к полезным метрикам. Если юзверю приходится ждать там, где получают сразу - это либо в минус, либо в девиации.
Кроме того, вы проверяли, доступно ли это тому же гуглоботу? Он не будет ждать подгрузки ерунды, у него лимиты.

Ответить
Развернуть ветку
Михаил Воробьев

Интерактивная карта это не важный контент, если адрес есть текстом, удобно размещён и размечен

Ответить
Развернуть ветку
Евгений Сивоконь

Интересный прием для iframe. есть ли решение, если карта вставляется через <script>?

Ответить
Развернуть ветку
Написать комментарий...
0 комментариев
Раскрывать всегда