Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Сервисы
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>

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

6
1 ответ на пост
3 комментария
","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"
\n\n
","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}},{"type":"code","cover":false,"hidden":false,"anchor":"","data":{"text":"","lang":""}},{"type":"text","cover":false,"hidden":false,"anchor":"","data":{"text":"

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

"}}],"summaryContent":null,"isExistSummaryContent":false,"warningFromEditor":null,"warningFromEditorTitle":null,"counters":{"comments":3,"favorites":1,"reposts":1,"views":515,"hits":857,"reads":null,"online":0},"dateFavorite":0,"hitsCount":857,"isCommentsEnabled":true,"isLikesEnabled":true,"isRemovedByUserRequest":false,"isFavorited":false,"isPinned":false,"repostId":null,"repostData":null,"subscribedToTreads":false,"isEditorial":false,"isAudioAvailable":false,"audioUrl":null,"isAudioAvailableToGenerate":false,"commentEditor":{"enabled":true,"who":null,"text":"","until":null,"reason":null,"type":"everybody"},"isBlur":false,"isPublished":true,"isDisabledAd":false,"withheld":[],"ogTitle":null,"ogDescription":null,"url":"https://vc.ru/seo/699910-kak-nastroit-otlozhennuyu-zagruzku-karty-na-saite","author":{"id":1147593,"name":"PR-CY блог","nickname":null,"description":"pr-cy.ru/analysis — сервисы для контроля SEO и аудита сайта. Мы в соцсетях: vk.com/prcyru, t.me/prcynews","uri":"","avatar":{"type":"image","data":{"uuid":"a259ea50-e923-525b-98b6-92a77cedf03b","width":240,"height":240,"size":295,"type":"png","color":"c0cce4","hash":"","external_service":[]}},"cover":{"cover":{"type":"image","data":{"uuid":"b12bd489-8553-5a77-830c-65577c380778","width":1965,"height":560,"size":234221,"type":"jpg","color":"f3f2f0","hash":"","external_service":[]}},"cover_y":0},"achievements":[{"title":"Год на vc.ru","code":"registration_1_year","description":"Первый год с vc.ru. Получена 24 июля 2025.","previewUuid":"0d11c244-49de-50e7-894e-b9b27945d42b","formats":{"glb":"https://static.vc.ru/achievements/fish.glb","usdz":"https://static.vc.ru/achievements/fish.usdz"},"viewData":{"contentColor":"#C67AA3","textMaxWidth":0.634765625,"textX":0.5888671875,"textY":0.54296875,"logoX":0.5859375,"logoY":0.6669921875,"logoXNoText":0.6044921875,"logoYNoText":0.5439453125},"id":4295022,"userId":1147593,"count":0,"shareImage":"https://api.vc.ru/achievements/share/4295022"},{"title":"3 года на vc.ru","code":"registration_3_years","description":"Провёл 3 года вместе с vc.ru. Получена 23 июля 2025.","previewUuid":"d9d72ac5-bcb5-55e0-8c72-b99251e5cdd9","formats":{"glb":"https://static.vc.ru/achievements/shark.glb","usdz":"https://static.vc.ru/achievements/shark.usdz"},"viewData":{"contentColor":"#8E6F09","textMaxWidth":0.66796875,"textX":0.5205078125,"textY":0.341796875,"logoX":0.5205078125,"logoY":0.4609375,"logoXNoText":0.5,"logoYNoText":0.3662109375},"id":671488,"userId":1147593,"count":0,"shareImage":"https://api.vc.ru/achievements/share/671488"}],"lastModificationDate":1764914223,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":true,"badgeId":null,"isDonationsEnabled":false,"isPlusGiftEnabled":true,"isUnverifiedBlogForCompanyWithoutPro":true,"isRemovedByUserRequest":false,"isFrozen":false,"isDisabledAd":false,"isPlus":false,"isVerified":false,"isPro":false,"yandexMetricaId":null,"badge":null,"isOnline":false,"tgChannelShortname":null,"isUnsubscribable":true,"type":1,"subtype":"personal_blog"},"subsite":{"id":199127,"name":"SEO","description":"Поисковая оптимизация, кейсы, советы, разборы.","uri":"/seo","avatar":{"type":"image","data":{"uuid":"3388e642-b8bf-52eb-92cd-78d66b7af6df","width":1200,"height":1200,"size":12502,"type":"png","color":"fbebeb","hash":"081c0e0e0e1b0d0c","external_service":[]}},"cover":{"type":"image","data":{"uuid":"3d49d868-858d-5587-b4d4-ebc7a947c8ae","width":960,"height":280,"size":177,"type":"png","color":"84a494","hash":"","external_service":[]}},"lastModificationDate":1613380334,"isSubscribed":false,"isSubscribedToNewPosts":false,"isMuted":false,"isAvailableForMessenger":false,"isDisabledAd":false,"nickname":"seo","isUnsubscribable":true,"badge":null,"badgeId":null,"isDonationsEnabled":false,"isOnline":false,"isPlus":false,"isUnverifiedBlogForCompanyWithoutPro":false,"isVerified":false,"isRemovedByUserRequest":false,"isFrozen":false,"isPro":false,"type":2,"subtype":"community"},"reactions":{"counters":[{"id":1,"count":6}],"reactionId":0},"isNews":false,"source":null,"clusters":[],"donations":{"amount":0,"isDonated":false},"commentsSeenCount":null,"keywords":[],"media":{"type":"image","data":{"uuid":"29ed03f7-b465-5023-8d2b-015cfda3a6d8","width":964,"height":653,"size":308541,"type":"jpg","color":"eef8e7","hash":"","external_service":[]}},"customCover":null,"robotsTag":"noindex","categories":[],"isAnonymized":true}};