How to speed up the loading of Yandex maps?

Question

JavaScript

Hello, I use the site to display the address on the map.
1. Connected script

<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

2. The code displays the card

<div id="map"></div>

    <script>
        ymaps.ready(init);
        var flMap = false;
        var bigMap = false;

        function init() {

            flMap = new ymaps.Map('map', {
                center: [...],
                zoom: 16,
                controls: ['zoomControl', 'fullscreenControl']
            });
            <?php if($company['address']) { ?>
            ymaps.geocode('<?php echo $company['address']; ?>', {
                results: 1
            }).then(function (res) {

                var firstGeoObject = res.geoObjects.get(0),
                    coords = firstGeoObject.geometry.getCoordinates(),
                    bounds = firstGeoObject.properties.get('boundedBy');
                firstGeoObject.options.set('preset', 'islands#redDotIconWithCaption');
                // Получаем строку с адресом и выводим в иконке геообъекта.
                firstGeoObject.properties.set('iconCaption', firstGeoObject.getAddressLine());
                flMap.geoObjects.add(firstGeoObject);
                flMap.panTo(coords)

            });
            <?php } ?>
        }

    </script>

Can you please tell me how to speed up page loading? They take an incredibly long time to load. Thanks in advance for your replies.

Answer 1

1. speed up page or map loading? If pages, but it would be necessary to look at the page, and not at the map code. Perhaps the map has nothing to do with it and you have a bottleneck in a completely different place.
2. You can speed up the loading of the map either by getting on Yandex and optimizing their maps or using a static map, as an option. Besides it would be necessary to look as scripts are connected. Maybe the map script is just waiting for your other fat libraries to finish loading. But here again, you need to look at the page code, not the map.

Answer 2

In my opinion, the best option is described here
. Asynchronous loading
For asynchronous script loading, you need to add the async attribute and call the callback function in the onload parameter. ymaps.ready(init) will not be available.

<div id="map" style="width: 100%; height: 300px;"></div>

<script async src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU&onload=getYaMap"></script>
<script>
function getYaMap(){
  var myMap = new ymaps.Map("map",{center: [30.325,59.935],zoom: 13});
  ymaps.geocode("Санкт-Петербург, ул. Невский проспект, 28").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord);
    myMap.geoObjects.add(myPlacemark);
    myMap.setCenter(coord);					
  });
}
</script>

Delayed Loading
The best option is to delay script loading by 2-3 seconds using setTimeout().

<div id="map" style="width: 100%; height: 300px;"></div>

<script>
setTimeout(function(){
  var elem = document.createElement('script');
  elem.type = 'text/javascript';
  elem.src = '//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU&onload=getYaMap';
  document.getElementsByTagName('body')[0].appendChild(elem);
}, 2000);
function getYaMap(){
  var myMap = new ymaps.Map("map",{center: [30.325,59.935],zoom: 13});
  ymaps.geocode("Санкт-Петербург, ул. Невский проспект, 28").then(function (res) {
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var myPlacemark = new ymaps.Placemark(coord);
    myMap.geoObjects.add(myPlacemark);
    myMap.setCenter(coord);					
  });
}
</script>