Как оптимизировать работу карты на сайте при загрузке страницы сайта?

Question

[weranda]

Приветствую
Есть страница сайта, на странице карта из maps.yandex.ru или из maps.google.com или из какого-нибудь другого сервиса. Карта расположена почти внизу страницы в трех или четырех экранах от начала страницы. Карта используется в основном как украшательство, но иногда ее люди используют по прямому назначению – смотрят, двигают, увеличивают и пр. и поэтому интерактивная карта нужна. Как многие из вас, наверное, знают, что использование подобных карт карт на сайтах создает многи лишних запросов, они много "весят" и пр. Решил проанализировать количесво запросов различных карт по умолчанию и ужаснулся, ужаснулся давно и ничего с этим не делал, но сейчас решил сравнить создаваемую "нагрузку":



В голову приходят мысли типа:

• вместо карты разместить картинку, при наведении на карту через jQuery подгрузить скрипт карты
  
• вместо карты разместить картинку, при нажатии на картинку открыть модальное окно с картой
  
• реализовать отложенную загрузку карты, к примеру, через несколько чекунд после полной загрузки
  
• использовать какой-то скрипт, но какой не знаю, возможно что-то да есть в сети полезное
  
• использовать карту openstreetmaps, как создающиу самую минимальную нагрузку из всез вышеперечисленных карт, но ее дизайн по умолчанию не нравится, нравится дизайн yandex.map
  

Господа, какие конкретно имеются возможные пути оптимизации всего этого "чуда" для снижения нагрузки при загрузке страницы и что дельного посоветуете?

Comments

[OVK2015]

Для последнего пункта: подсуньте через leaflet тайлы того дизайна, какой вам нравится

Answer 1

[Максим Е]

Хороший вариант, который уже написали: загружать карту по событию/запросу.
Можно реализовать загрузку:

• при наведении на изображение
  
• при клике на ссылку/элемент
  
• открыв в модальном окне
  
• проскролив до карты -100 пикселей
  
• по таймеру
  

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

Comments

[Владислав]

проскролив до карты -100 пикселей

Как сделать такое?

Answer 2

[NeuroPastor]

Была такая проблема-тянулись координаты объектов на сайте недвижимости в реальном времени, предварительно генерируя эти же координаты из адреса. Сайт провисал просто не по христиански. В итоге сделал-при создании очередного объекта при сохранении адрес конвертировался в координаты, и координаты записывались в параметр объекта. При таком раскладе около 400 объектов на яндекс карте подгружаются незаметно глазу и сайт уже не тормозят. Для сравнения-в старом варианте сайт подгружался около 4-х минут.