Как ускорить загрузку карты Яндекс?

Question

[Azami]

Здравствуйте, использую на сайте отображение адреса на карте.
1. В подключен скрипт

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

2. Карту выводит код

<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>

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

Answer 1

[Максим Тимофеев]

1. ускорить загрузку страницы или карты? Если страницы, но надо бы смотреть на страницу, а не на код карты. Возможно карта там вовсе не при чем и у Вас узкое место совсем в другом месте.
2. ускорить загрузку карты можно или устроившись на яндекс и оптимизировав их карты или использовать статическую карту, как вариант. Кроме этого надо бы посмотреть как подключены скрипты. Возможно скрипт карты просто ждет окончания загрузки других Ваших жирных библиотек. Но тут опять же надо смотреть на код страницы, а не карты.

Comments

[Azami]

Спасибо за ответ, скорее всего загрузку карты.
Без нее на 3 секунды страница грузится быстрее.
Скрипт в хеде стоит выше остальных.

Answer 2

[aleksandr-n]

На мой взгляд лучший вариант описан тут
Асинхронная загрузка
Для асинхронной загрузки скрипта потребуется добавить атрибут async и вызов callback-функции в параметре onload т.к. ymaps.ready(init) будет недоступен.

<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>

Отложенная загрузка
Самый лучший вариант – отложить загрузку скрипта на 2-3 секунды с помощью 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>

Comments

[khyzhniak]

Спасибо друг, выручил!!!!!
часа два потратил пока не нашел, а твой скрипт сразу на 20 единиц в тесте гугл повысил