HTML/CSS

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

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

1

Подключение скрипта

Перенести подключение скрипта к закрывающему тегу </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>
2

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>

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

3

Пакеты

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

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

Асинхронная загрузка

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

Отложенная загрузка

Самый лучший вариант – отложить загрузку скрипта на 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>
26 января 2019
Такой эффект можно легко сделать через CSS свойство transition например для кнопок, меню и т.д.
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.