Главная » Инструменты » Как ускорить сайт с установленными внешними скриптами: Яндекс.Метрика, JivoSite, ВКонтакте, Marquiz и другие
|

Как ускорить сайт с установленными внешними скриптами: Яндекс.Метрика, JivoSite, ВКонтакте, Marquiz и другие

В 2025 году требования к скорости загрузки сайта становятся всё жёстче: Core Web Vitals от Google остаются важным фактором ранжирования, а пользователи не готовы ждать дольше 2–3 секунд.

Внедрение внешних сервисов, таких как Яндекс.Метрика, Google Analytics, reCAPTCHA, чат-виджеты (JivoChat, Drift), аналитика ВКонтакте, Marquiz и myTarget, может замедлить загрузку сайта. Это негативно влияет на SEO, поведенческие факторы и конверсию.

Почему внешние скрипты тормозят сайт

Все перечисленные инструменты:

  • Загружаются с удалённых серверов (чаще всего без async или defer);
  • Блокируют рендеринг (особенно если находятся в <head>);
  • Загружают дополнительные ресурсы (CSS, шрифты, иконки, iframe);
  • В некоторых случаях инициируют собственные сетевые запросы, которые мешают основному контенту загрузиться быстро.

Итог: увеличивается TBT (Total Blocking Time), FCP (First Contentful Paint) и LCP (Largest Contentful Paint), из-за чего PageSpeed снижает оценку.

Какие внешние скрипты чаще всего тормозят сайт

Вот список часто встречающихся в рунете внешних сервисов, которые негативно влияют на скорость:

  • Яндекс.Метрика (метка + вебвизор)
  • JivoSite (виджет онлайн-чата)
  • VK Pixel / MyTarget
  • Marquiz / Calltouch / Envybox
  • reCAPTCHA (Google v2 или v3)
  • VK / Telegram виджеты
  • Tilda, Bitrix24, AmoCRM формы

Чем больше таких скриптов — тем выше риск «провалить» Core Web Vitals.

Как оптимизировать загрузку внешних скриптов

Перенесите скрипты в нижнюю часть <body>

Если нет технической необходимости подключать скрипт в <head> — переместите его перед закрывающим тегом </body>.

Это особенно важно для:

  • JivoSite;
  • Виджетов соцсетей;
  • Форм обратной связи;
  • Чат-ботов.

Асинхронная загрузка (async, defer)

Чтобы скрипты не блокировали отображение страницы, используйте:

  • async – загружает скрипт параллельно и выполняет сразу после загрузки.
  • defer – загружает скрипт в фоне и выполняет после полной загрузки DOM.

Отложенная загрузка (Lazy Load)

Загружайте скрипты только когда они нужны:

  • При скролле (например, чат-виджет).
  • При взаимодействии (например, reCAPTCHA только при открытии формы).

Локальное кеширование скриптов

Если возможно, загружайте скрипты через CDN или сохраняйте их локально, чтобы избежать лишних запросов к сторонним серверам

Оптимизация myTarget и других рекламных скриптов

Рекламные скрипты (myTarget, Google Ads) часто тяжелые. Используйте:

  • Ограничение частоты запросов, если это возможно..
  • <script async> для тегов.
  • Динамическую загрузку после основного контента.

Используйте условную загрузку скриптов

Не загружайте скрипты на всех страницах без необходимости.

Примеры:

  • Не подключайте Marquiz на страницах без квизов;
  • Не грузите чат JivoSite на лендингах без поддержки;
  • Не активируйте пиксели MyTarget и VK на внутренних страницах, если они не участвуют в рекламной аналитике.

Для WordPress это можно настроить через функции темы, Code Snippets или плагины типа Asset CleanUp.

Загружайте iframe виджеты (VK, Telegram) через click-to-load

Виджеты социальных сетей можно загружать только после клика пользователя, а до этого показывать заглушку.

Примеры внедрения

Как вставить Яндекс.Метрику без потери скорости сайта 

Вариант 1: Чистый async + отложенная инициализация

<!-- 1. Загружаем скрипт асинхронно -->
<script async src="https://mc.yandex.ru/metrika/tag.js"></script>

<!-- 2. Инициализируем метрику после загрузки скрипта -->
<script>
  window.addEventListener('load', function() {
    if (typeof ym !== 'undefined') {
      ym(XXXXXX, 'init', { /* настройки */ });
    }
  });
</script>

<!-- 3. Noscript для отключённого JS -->
<noscript>
  <div><img src="https://mc.yandex.ru/watch/XXXXXX" style="position:absolute; left:-9999px;" alt="" /></div>
</noscript>

Вариант 2: defer + проверка загрузки (если нужен контроль)

<script defer src="https://mc.yandex.ru/metrika/tag.js" onload="initYandexMetrika()"></script>
<script>
  function initYandexMetrika() {
    ym(XXXXXX, 'init', { /* настройки */ });
  }
</script>

Эти способы не теряют посетителей и обеспечивают полную аналитику, не снижая скорости загрузки сайта.

Как вставить JivoSite (JivoChat) без потери скорости сайта

Вариант 1: Асинхронная загрузка с отложенной инициализацией

<script>
window.addEventListener('load', function() {
  var script = document.createElement('script');
  script.src = '//code.jivosite.com/widget/XXXXXX';
  script.async = true;
  document.body.appendChild(script);
});
</script>

Загрузка при взаимодействии пользователя

document.addEventListener('DOMContentLoaded', function() {
  var jivoLoaded = false;
  
  // Загрузка при скролле
  window.addEventListener('scroll', function() {
    if (!jivoLoaded) {
      loadJivoChat();
      jivoLoaded = true;
    }
  }, { once: true, passive: true });

  // Или при наведении на область чата
  var chatTrigger = document.createElement('div');
  chatTrigger.style.position = 'fixed';
  chatTrigger.style.right = '0';
  chatTrigger.style.bottom = '0';
  chatTrigger.style.width = '100px';
  chatTrigger.style.height = '50px';
  chatTrigger.style.zIndex = '9998';
  document.body.appendChild(chatTrigger);
  
  chatTrigger.addEventListener('mouseenter', function() {
    if (!jivoLoaded) {
      loadJivoChat();
      jivoLoaded = true;
    }
  }, { once: true });
});

function loadJivoChat() {
  var script = document.createElement('script');
  script.src = '//code.jivosite.com/widget/XXXXXX';
  script.async = true;
  document.body.appendChild(script);
}

Как подключить VK Pixel без потери скорости сайта

Вариант 1: Асинхронная загрузка с отложенной инициализацией

<script>
window.addEventListener('load', function() {
  var script = document.createElement('script');
  script.src = 'https://vk.com/js/api/openapi.js?169';
  script.async = true;
  script.onload = function() {
    VK.Retargeting.Init("XXXXXX");
    VK.Retargeting.Hit();
  };
  document.head.appendChild(script);
});
</script>
<noscript><img src="https://vk.com/rtrg?p=XXXXXX" style="position:fixed; left:-999px;" alt=""/></noscript>

Вариант 2: Загрузка при взаимодействии пользователя

document.addEventListener('DOMContentLoaded', function() {
  var vkPixelLoaded = false;
  
  // Загрузка при скролле
  window.addEventListener('scroll', function() {
    if (!vkPixelLoaded) {
      loadVKPixel();
      vkPixelLoaded = true;
    }
  }, { once: true, passive: true });

  // Или при любом клике
  document.addEventListener('click', function() {
    if (!vkPixelLoaded) {
      loadVKPixel();
      vkPixelLoaded = true;
    }
  }, { once: true });
});

function loadVKPixel() {
  var script = document.createElement('script');
  script.src = 'https://vk.com/js/api/openapi.js?169';
  script.async = true;
  script.onload = function() {
    VK.Retargeting.Init("XXXXXX");
    VK.Retargeting.Hit();
  };
  document.head.appendChild(script);
  
  // Добавляем noscript для случаев с отключенным JS
  var noscript = document.createElement('noscript');
  var img = document.createElement('img');
  img.src = 'https://vk.com/rtrg?p=XXXXXX';
  img.style.position = 'fixed';
  img.style.left = '-999px';
  img.alt = '';
  noscript.appendChild(img);
  document.body.appendChild(noscript);
}

Такая реализация сохранит все функции ретаргетинга, минимизировав влияние на скорость загрузки страницы.

Дополнительная оптимизация (предварительная загрузка)

Используйте предварительную загрузку для сторонних доменов. Атрибут preconnect сообщает браузеру заранее установить соединение с нужным доменом: это снижает задержки при загрузке JS, CSS, изображений и iframe от сторонних сервисов.

Если не хотите тратить ресурсы на соединение сразу, можно использовать dns-prefetch, он лишь кэширует DNS-запрос.

<link rel="preload" href="https://mc.yandex.ru/metrika/tag.js" as="script">
<link rel="dns-prefetch" href="//mc.yandex.ru">
<link rel="preconnect" href="//code.jivosite.com">
<link rel="dns-prefetch" href="//code.jivosite.com">
<link rel="preconnect" href="https://vk.com">
<link rel="dns-prefetch" href="https://vk.com">

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

Похожие записи

Задайте вопрос

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