Lazy-load Яндекс.Карт через IntersectionObserver

Проблема

Yandex Maps API вместе с инициализированным виджетом — это ~600KB JS + ~200KB CSS на каждой странице. На странице «Контакты» с одной встроенной картой PSI Mobile падает с 90+ до 30-40, TBT превышает 1500ms.

Решение: IntersectionObserver + ленивая инициализация

Не подгружаем api-maps.yandex.ru/2.1/?lang=ru_RU пока пользователь не подскроллил до карты. Используем IntersectionObserver с rootMargin: 200px для предзагрузки за экран до появления.

<!-- TODO: full HTML markup with placeholder -->
<div id="ymap-placeholder" data-coords="53.2415,50.2212" data-zoom="14"></div>

// TODO: real IntersectionObserver pattern from ozsm.ru
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadYandexMaps();
    observer.disconnect();
  }
}, { rootMargin: '200px' });

Результат на ozsm.ru

Mobile PSI на главной: 44 → 76 (после первого фикса) → 89 → 99. TBT: 1108ms → 89ms (-92%). Bootup time: 2.4s → 0.6s.