Популярное
Свежее
Моя лента
Сообщения
Обзор
Курсы
Темы
Маркетинг
Деньги
Сервисы
Личный опыт
Крипто
Маркетплейсы
Образование
AI
Карьера
Путешествия
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
PR-CY блог
SEO

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

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

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

Это может быть карта 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>

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

66
3 комментария
Виктор Петров

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

Ответить
Михаил Воробьев

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

1
Ответить
Евгений Сивоконь

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

Ответить