{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Встройки карт используются на большинстве сайтов.","type":"unstyled","key":"bc8pl"},{"data":{"image":{"id":"5fad2bd4ffb0f805855da136"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dvg7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ase0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"Но карта значимо замедляет скорость открытия страницы. Скорость влияет на значение конверсии, а также на ранжирование сайтов в поисковой выдаче.","type":"unstyled","key":"csskh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что делать? Как оптимизировать загрузку?","type":"unstyled","key":"9bmpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим трюк по ускорению загрузки карты, о котором мало кто знает.","type":"unstyled","key":"5qt4c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка карты по требованию","type":"header-two","key":"1u2li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f7o04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":74,"style":"BOLD"}],"text":"В комментариях пользователи спрашивали на тему оптимизации вставок карты. Разберемся с лайфхаком, который решает данную проблему.","type":"unstyled","key":"3tsj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычная встройка карты замедляет сайт. Описанный выше прием позволяет ускорить загрузку сайта.","type":"unstyled","key":"89t6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6lc8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберемся с такими вопросами:","type":"unstyled","key":"8s0qu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое загрузка карты по требованию на странице сайта?","type":"unordered-list-item","key":"966po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как внедрить возможность на своем сайте уже сейчас?","type":"unordered-list-item","key":"ftj0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9cg55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По умолчанию при открытии сайта браузер отрисовывает все элементы страницы. Если карты загружать в обычном порядке, то сайт открывается крайне долго.","type":"unstyled","key":"3al1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"64mj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучшие решения, которые позволяют ускорить загрузку страниц с встроенными картами Google Maps, Apple Maps, Яндекс.Карты, такие:","type":"unstyled","key":"c7nhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка встроенной карты;","type":"unordered-list-item","key":"97a7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронная загрузка;","type":"unordered-list-item","key":"9q4ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Загрузка по требованию.","type":"unordered-list-item","key":"49nli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3dni5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":33,"offset":56,"style":"BOLD"}],"text":"Ленивая загрузка позволяет организовать загрузку данных при прокрутке страницы к объекту.","type":"unstyled","key":"ejfil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aa9iu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"},{"length":5,"offset":146,"style":"BOLD"}],"text":"Асинхронная загрузка позволяет начать загрузку карты после открытия страницы. Асинхронная загрузка в картах от Яндекс активируется через параметр async, указываемый в коде вставки карты.","type":"unstyled","key":"a8jj7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если пользователь открывает страницу с контактами, то загрузка карты происходит в каждом случае, если карта попадает в область просмотра на экране. Но интерактивная карта нужна не в каждом случае.","type":"unstyled","key":"fmh6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но нет предела совершенству.","type":"unstyled","key":"9palf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3gnll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Что делать? Провести техническую оптимизацию вставки карты. Логика такая:","type":"unstyled","key":"3hln6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо карты выводим снимок карты, который не отличается от начального интерфейса карты;","type":"unordered-list-item","key":"6r9t9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При наведении мышки или тапу на картинку загружаем карту.","type":"unordered-list-item","key":"btbj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dhtnq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Какая польза от внедрения? Решение проблемы со скоростью загрузки страницы. Большинство пользователей используют мобильные устройства. Часто мобильный интернет медленный.","type":"unstyled","key":"97bfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"32jml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте ленивую загрузку карту уже сейчас. В результате:","type":"unstyled","key":"a00ag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":27,"style":"BOLD"}],"text":"Улучшение значения фактора Page Experience. Скорость загрузки влияет на поисковую оптимизацию;","type":"unordered-list-item","key":"9m07d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение значения конверсии через повышение скорости;","type":"unordered-list-item","key":"es0uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшение поведенческих факторов ранжирования;","type":"unordered-list-item","key":"c90ll"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Снижение объёма передаваемых данных, что позволяет экономить средства для больших сайтов;;","type":"unordered-list-item","key":"90gnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уменьшение расхода батареи устройства.","type":"unordered-list-item","key":"rjmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ускорение сайта положительно влияет на ранжирование.","type":"unstyled","key":"ebpf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ae3rh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Сначала получаем код карты из сервиса.","type":"unstyled","key":"ee6ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"aaen5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4kbd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"97bne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":13,"style":"BOLD"}],"text":"Шаг 2. Далее создаем контейнер для блока карты. Например так:","type":"unstyled","key":"rbcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n\n

","type":"blockquote","key":"ba1bd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5p4j1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Создаем стиль для статичной картинки карты. Например:","type":"unstyled","key":"210lj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1j3u3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"anquh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 4. Прописываем код JavaScript. Задача кода заключается в отслеживании событий. Например, наведение мыши на персональном компьютере или тап на мобильном устройстве. По событию код меняет статичную картинку на интерактивную карту.","type":"unstyled","key":"ea5c0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"cqu3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"9a6v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"22fh2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карта стала доступна по требованию.","type":"unstyled","key":"crk88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь страница с картой грузится быстрее.","type":"unstyled","key":"5srm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eitca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данный способ подходит как любых встраиваемых карт:","type":"unstyled","key":"84oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google Maps;","type":"unordered-list-item","key":"822id"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Apple Maps;","type":"unordered-list-item","key":"79a0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Яндекс.Карты;","type":"unordered-list-item","key":"fllta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"EEF6Acx9zaLjIXEQwU9A"}],"entityMap":{}},"mentions":[]}