Loading...
Скачать расширение
Поддержка
Поддержка
Модификации
Промпты
ИИ-инструменты
База знаний
Профиль
Подписка
Партнерка
Блог
Шаблоны
....
NLM034 • Время настройки: 1 минута

Яндекс Карта на Тильде с Lazy Load и прелоудером

Модификация оптимизирует загрузку Яндекс карты при помощи отложенной загрузки, а прелоадер скроет «появление» карты.

Посмотрите, как будет выглядеть модификация на вашем сайте.

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

Смотрите, как быстро установить модификацию

Инструкция
Модификация ускоряет загрузку сайта и увеличивает показатели в Google PageSpeed

1. Создаем карту в конструкторе https://yandex.ru/map-constructor

2. Копируем код карты, вставляем в первое поле генератора

3. Настраиваем стиль прелоадера для карты

4. Копируем код и вставляем у себя на сайте в зеро блок в элемент html.
Размеры карты будут соответствовать размеру html элемента

  • Важно: При копировании кода из Яндекса, ничего в нем менять нельзя!

Сгенерируйте код для своего сайта

Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Копировать код
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Возобновите подписку
Шаг 1
Копировать код
Напишите в нашу поддержку — мы поможем с настройкой и внедрением.
Остались вопросы?
Шаг 3
Чтобы получить доступ к копированию кода и использовать его на сайте, выполните 3 простых шага:
Скопируйте код из генератора, вставьте его в блок T123 на вашем сайте в Тильде и опубликуйте страницу.
Настройте модификацию
Шаг 2
И получите доступ к библиотеке из более чем 200 модификаций.
Оплатите подписку
Шаг 1

Яндекс Карта на Тильде — как ускорить загрузку без лишних костылей

Яндекс Карта часто замедляет страницу, особенно если стоит внизу лендинга или на странице контактов. Пользователь может вообще не дойти до карты, но скрипты всё равно загружаются вместе со страницей и добавляют лишнюю нагрузку.

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

Как подготовить карту

Сначала создай карту в конструкторе Яндекс Карт. Добавь нужный адрес, метку, масштаб и другие параметры, которые нужны для страницы. После настройки скопируй код карты из конструктора.

Этот код нужно вставить в первое поле генератора Nolim. Важно не менять код Яндекса вручную: если удалить часть параметров или случайно сломать структуру вставки, карта может не загрузиться или начать работать нестабильно.

Что настраивается в генераторе

В генераторе можно настроить прелоадер для карты: размер, толщину бордера, цвет прелоадера, цвет фона и непрозрачность. Эти параметры помогают сделать загрузку карты визуально аккуратной и вписать её в дизайн страницы.

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

Куда вставлять готовый код

После настройки скопируй готовый HTML-код из генератора. На странице Tilda добавь Zero Block, внутри него создай HTML-элемент и вставь туда сгенерированный код.

Размер карты будет соответствовать размеру HTML-элемента. Поэтому сначала задай ему нужную ширину и высоту в Zero Block, а затем проверь, как карта выглядит на десктопе и мобильной версии.

Где использовать такую карту

Такая настройка особенно полезна на страницах контактов, блоках «Как нас найти», лендингах с офлайн-точкой, сайтах студий, клиник, школ, шоурумов, ресторанов и сервисных компаний.

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

Что проверить после публикации

После публикации открой страницу и проверь, что прелоадер появляется корректно, карта загружается без рывков, метка стоит в нужном месте, а размер блока совпадает с HTML-элементом в Zero Block.

Отдельно посмотри мобильную версию. Карта не должна быть слишком низкой, обрезать важную область или мешать скроллу страницы. Если блок выглядит тесно, увеличь высоту HTML-элемента на мобильном адаптиве.

Популярные решения для вашего сайта

Не нашли нужное решение?

Часто задаваемые вопросы

Используй модификацию Nolim для отложенной загрузки. Карта не загружается вместе со страницей — она подгружается только когда пользователь доскроллил до неё или нажал на блок. Это значительно ускоряет загрузку страницы, особенно на мобильных соединениях.

Не нашли свой вопрос?

Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.
Не нашли свой вопрос?
Напишите нам — мы поможем и подскажем оптимальное решение для вашего сайта.

Есть идеи по улучшению этой модификации или созданию новой?

Поделись своим предложением или проголосуй за понравившуюся идею. Наиболее популярные будем реализовывать.

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