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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также нужны стили для статичной картинки, подойдет скриншот.

Дальше надо добавить JavaScript-код, который будет отслеживать события — наведение курсора на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

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