How to optimize the operation of the map on the site when loading the site page?

Question

JavaScript

Greetings
There is a page of the site, on the page there is a map from maps.yandex.ru or from maps.google.com or from some other service. The map is located almost at the bottom of the page, three or four screens from the top of the page. The map is used mainly as a decoration, but sometimes people use it for its intended purpose - they look, move, enlarge, etc., and therefore an interactive map is needed. As many of you probably know, the use of such maps on sites creates many unnecessary requests, they "weigh" a lot, etc. I decided to analyze the number of requests for various default maps and was horrified, horrified for a long time and did nothing about it, but now I decided to compare the created "load":



Thoughts like:

• instead of a map, place an image, when hovering over the map via jQuery, load the map script
  
• instead of a map, place an image, when you click on the image, open a modal window with a map
  
• implement delayed loading of the map, for example, a few seconds after the full load
  
• use some script, but I don’t know which one, maybe there is something useful on the net
  
• use the openstreetmaps map, as creating the most minimal load of all the above maps, but I don’t like its default design, I like the design of yandex.map
  

Gentlemen, what exactly are the possible ways to optimize this whole "miracle" to reduce the load when loading the page, and what can you advise?

Answer 1

A good option that has already been written: load the map on an event / request.
You can implement the download:
I would recommend loading on scroll. when hovering, the map will probably load for a noticeable time for the user, which then may cause inconvenience.

Answer 2

There was such a problem - the coordinates of objects on a real-estate site were pulled in real time, after generating the same coordinates from the address. The site sagged just not in a Christian way. As a result, I did it - when creating the next object, when saving, the address was converted into coordinates, and the coordinates were recorded in the object parameter. In this scenario, about 400 objects on the Yandex map are loaded imperceptibly to the eye and the site no longer slows down. For comparison, in the old version, the site was loaded for about 4 minutes.