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

26.01.2019

28802

Несколько рекомендаций как увеличить скорость загрузки 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

Preconnect и dns-prefetch

<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