Ускорение загрузки Яндекс Карт

Несколько рекомендаций как увеличить скорость загрузки API Яндекс.Карт 2.0.

Перенести подключение скрипта к закрывающему тегу </body>.

<html lang="ru">
<head>
	...
</head>
<body>
	<div id="map" style="width: 100%; height: 300px;"></div>
	...

	<script async src="//api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
	<script>
	ymaps.ready(init); 
	function init(){
		var myMap = new ymaps.Map("map",{center: [30.325,59.935],zoom: 13});
	}
	</script>
</body>
</html>
HTML
<html lang="ru">
<head>
	<link rel="preconnect" href="//api-maps.yandex.ru">
	<link rel="dns-prefetch" href="//api-maps.yandex.ru">
	...
</head>
<body>
	...
</body>
</html>
HTML

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

Исходя из нужных функций карт, нужно выбрать оптимальный пакет, список на tech.yandex.ru.
Для простой карты с меткой и геокодированием подойдет package.standard.

<script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU"></script>
HTML

Для асинхронной загрузки скрипта потребуется добавить атрибут 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>
HTML

Самый лучший вариант – отложить загрузку скрипта на 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>
HTML
26.01.2019, обновлено 16.10.2019
18269

Комментарии

, чтобы добавить комментарий.

Другие публикации

Автомасштаб Яндекс карты
При выводе нескольких меток на Яндекс карте, желательно вместить их все в область просмотра.
8318
+1
Яндекс Карты: перетаскивание метки по карте
Функция перетаскивания метки по карте и получение адреса и координат будет весьма удобна на сайтах недвижимости,...
6366
+1
Верстка блока контактов с картой
Пример, как вывести Яндекс карту на всю ширину сайта + плавающий блок с контактной информацией.
10551
-2
Поиск ближайших объектов в БД по координатам
Рассмотрим пример как найти в базе данных соседние объекты по координатам и вывести их на карте Яндекс.
5842
+1
Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
115893
+16
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
9185
+3