Как ускорить загрузку страниц, на которых размещены карты Google Maps и Яндекс? Ленивая загрузка карт по требованию
10 ноября 2020

Как ускорить загрузку страниц, на которых размещены карты Google Maps и Яндекс? Ленивая загрузка карт по требованию

Встройки карт используются на большинстве сайтов.

Но карта значимо замедляет скорость открытия страницы. Скорость влияет на значение конверсии, а также на ранжирование сайтов в поисковой выдаче.

Что делать? Как оптимизировать загрузку?

Рассмотрим трюк по ускорению загрузки карты, о котором мало кто знает.

Ленивая загрузка карты по требованию


В комментариях пользователи спрашивали на тему оптимизации вставок карты. Разберемся с лайфхаком, который решает данную проблему.

Ленивая загрузка карты

Разберемся с такими вопросами:

  • Что такое загрузка карты по требованию на странице сайта?
  • Как внедрить возможность на своем сайте уже сейчас?

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

Лучшие решения, которые позволяют ускорить загрузку страниц с встроенными картами Google Maps, Apple Maps, Яндекс.Карты, такие:

  • Ленивая загрузка встроенной карты;
  • Асинхронная загрузка;
  • Загрузка по требованию.

Ленивая загрузка позволяет организовать загрузку данных при прокрутке страницы к объекту.

Асинхронная загрузка позволяет начать загрузку карты после открытия страницы. Асинхронная загрузка в картах от Яндекс активируется через параметр async, указываемый в коде вставки карты.

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

Но нет предела совершенству.

Что делать? Провести техническую оптимизацию вставки карты. Логика такая:

  • Вместо карты выводим снимок карты, который не отличается от начального интерфейса карты;
  • При наведении мышки или тапу на картинку загружаем карту.

Ленивая загрузка карты на странице

Какая польза от внедрения? Решение проблемы со скоростью загрузки страницы. Большинство пользователей используют мобильные устройства. Часто мобильный интернет медленный.

Используйте ленивую загрузку карту уже сейчас. В результате:

  • Улучшение значения фактора Page Experience. Скорость загрузки влияет на поисковую оптимизацию;
  • Улучшение значения конверсии через повышение скорости;
  • Улучшение поведенческих факторов ранжирования;
  • Снижение объёма передаваемых данных, что позволяет экономить средства для больших сайтов;;
  • Уменьшение расхода батареи устройства.

Улучшается и значение в отчете Google PageSpeed, LightHouse.

Ускорение загрузки встроенной карты на сайте

Как внедрить?

Внедрение ленивой загрузки карты на своем сайте уже сейчас


Шаг 1. Сначала получаем код карты из сервиса.

Например:

<script type="text/javascript" 
        charset="utf-8" 
        async 
        src="ссылка"></script>

Шаг 2. Далее создаем контейнер для блока карты. Например так:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy"
        async
        data-src="ссылка"></script>
</div>

Шаг 3. Создаем стиль для статичной картинки карты. Например:

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/map.jpg);
        background-position: center center;
    }
</style>

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

Например:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

Карта стала доступна по требованию.

Оптимизация скорости загрузки карты

Теперь страница с картой грузится быстрее.

Данный способ подходит для любых встраиваемых карт:

  • Google Maps;
  • Apple Maps;
  • Яндекс.Карты;

Рекомендованные материалы в блоге MegaIndex на тему ускорения сайта по ссылкам далее:


Оптимизация загрузки карты минимально, но влияет на ранжирование в поисковых системах. Значимым сигналом в ранжировании являются ссылки. Используйте инструмент анализа внешних ссылок, чтобы начать работы по размещению внешних ссылок на сайт.

Ссылка на сервис — Внешние ссылки.

Рекомендованный материал в блоге MegaIndex на тему внешних ссылок — SEO продвижение ссылками в 2020. Практическое руководство.

Выводы


Обычная встройка карты замедляет сайт. Описанный выше прием позволяет ускорить загрузку сайта.

Ускорение сайта положительно влияет на ранжирование.

Влияние скорости загрузки страниц сайта на ранжирование в поисковой выдаче

Остались вопросы, замечания или комментарии по теме использования ленивой загрузки карт по требованию? Напишите в комментариях.

Обсуждение

Den Letnij
15:59 12 ноября 2020
"подходит как любых" оЧепятка
deafnet
16:43 12 ноября 2020
А если карта в iframe?
Макаронный монстр
17:18 16 ноября 2020
Тdeafnet, то же самое. Меняем в самом iframe src на data-src, затем присваиваем фрейму ID "ymap_lazy".
???
PROFIT
semkov
19:47 12 ноября 2020
Не совсем про карты. Про картинки.
Недавно смотрел сайт Икеа, там все картинки с атрибутом lazy
Вот лентяи))
semkov
19:49 12 ноября 2020
Тьфу.. не атрибут, а свойство атрибута loading.
loading=“lazy”
Helenartist
11:46 16 ноября 2020
Извините за вопрос, но куда вставить коды с шага 3 и шага 4? Не в основной же index.php?
Макаронный монстр
17:22 16 ноября 2020
Зависит от вашей CMS. Обычно вставляют не в index.php, а (если это Wordpress) - в
/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/header.php - сюда вставить из шага 3.
/wp-content/themes/НАЗВАНИЕ_ТЕМЫ/footer.php - сюда вставить из шага 4 (можно и в header, но рекомендуется JS НЕпервостепенной важности выносить в footer).
Если у вас "еБитрикс", то - тоже в header и footer текущего дизайна. Обычно это /bitrix/templates/НАЗВАНИЕ_ДИЗАЙНА_ИЛИ_ЕГО_ИЗДАТЕЛЯ/header.php и footer.php соответственно.
Константин По
13:45 17 ноября 2020
Плохой рецепт, не работает:(
Uncaught TypeError: Cannot read property 'addEventListener' of null...
hpcmir
11:46 22 ноября 2020
Ребята, все работает - можете глянуть как по ссылке - https://hpc.by/. Перед подвалом реализована карта описанным методом. Все работает как заявлено.
Для добавления комментария, пожалуйста, авторизуйтесь