На главную

Рецепт ускорения сайта — карта + loading="lazy"

Используем loading="lazy" для ускорения скорости загрузки сайта

Часто на коммерческих сайтах есть веб-карта с пинами офисов или тороговых точек. Для юзера это, конечно, удобно и для бизнеса полезно. Но с точки зрения трафика и скорости загрузки — интерактивная карта это дорогое удовольствие.

пример яндекс-карты

Чтобы карта заработала нужно скачать css-стили, js-скрипты, тайлы отображаемой области, шрифты, которые карта использует. По сути нужно развернуть большое и сложное приложение на вашей странице.

Неудивительно, что Google Page Speed за такое наругается. Кстати Google Page Speed "под капотом" использует Lighthouse, который доступен в одноименной вкладке панели разработчика Chrome Dev Tools.

lighthouse ругается на яндекс карту

Ещё пара фактов про карты на сайтах:

  1. Не всем пользователям вашего сайта впринципе нужна карта.
  2. Как правило, карта располагается не в начале страницы и некоторая часть юзеров до нее даже не доскроливает, но вынуждена гонять по сети килобайты кода и гонять процессор устройства на отрисовку.

Значит можно загружать карту только тогда, когда юзер доскролил до тогда места, где она должна отображаться.

Стандартный подход к загрузке

Так выглядит подход из документации Яндекса.

<head>
    <script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU" type="text/javascript"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
  <script type="text/javascript">
      // Функция ymaps.ready() будет вызвана, когда
      // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
      ymaps.ready(init);
      function init(){
          // Создание карты.
          var myMap = new ymaps.Map("map", {
              // Координаты центра карты.
              // Порядок по умолчанию: «широта, долгота».
              // Чтобы не определять координаты центра карты вручную,
              // воспользуйтесь инструментом Определение координат.
              center: [55.76, 37.64],
              // Уровень масштабирования. Допустимые значения:
              // от 0 (весь мир) до 19.
              zoom: 7
          });
      }
  </script>
</body>

Чем подобный подход плох?

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

Улучшенный подход

Узнать, когда юзер доскроллит до места с картой можно использую атрибут нативный атрибут loading="lazy". Браузер начнет грузить картинку незадолго до того, как юзер должен будет долистать до неё.

  <!-- добавляем картинку с прозрачным пикселем, вешаем атрибуты loading и onload   -->
  <img width="1" height="1" loading="lazy" src="/images/1x1.png" onload="loadYMaps()">
  <div id="map" style="width: 600px; height: 400px"></div>
  <script>
    // функция которая инициализирует загрузку карты
    // вызовется когда загрузится наш пиксель
    function loadYMaps() {
        var ymapsScript = document.createElement('script');
        ymapsScript.src = 'https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU';
        ymapsScript.async = true;
        // вешаем событие на загрузку скрипта карты
        ymapsScript.onload = function() {
            // часть кода скопированная 1 в 1 код из доки яндекса
            ymaps.ready(init);
            function init(){
                // "map" это id элемента на странице в который отрисуется карта после загрузки
                var myMap = new ymaps.Map("map", {
                    center: [55.76, 37.64],
                    zoom: 7
                });
            }
        }
        document.head.append(ymapsScript);
    }
  </script>

Обратите внимание на браузерную поддержку loading="lazy". В некоторых браузерах он до сих пор не поддерживается. Но и в таком случае наш код сработает. Можно самостоятельно проверить наличие поддержки через проверку ниже и улучшить предлагаемую стратегию оптимизации загрузки.

var supportsLazyLoad = ('loading' in document.createElement('img'));

Комментарии