Создать URL
Генератор Правила транслитерации Как сделать ЧПУ Блог Вопросы и ответы Создать URL
Практика

Влияние сторонних скриптов на загрузку

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

Откуда берётся проблема

Со временем на странице скапливаются скрипты, которые подключил не разработчик, а маркетолог или менеджер: счётчики, системы аналитики, онлайн-чаты, обратный звонок, карты, виджеты отзывов, рекламные пиксели. Каждый такой скрипт — это дополнительный запрос к чужому серверу, чужой код в основном потоке страницы и потенциальный источник смещений макета.

Страницана телефонеСобственный кодсайтаАналитикаи рекламаВиджетыи чаты
Страницана телефонеСобственный кодсайтаАналитикаи рекламаВиджетыи чаты
Откуда приходит код на страницу

Как провести аудит

  1. Откройте вкладку сети в инструментах разработчика и отфильтруйте запросы к чужим доменам.
  2. Составьте список: что это за скрипт, кто его подключил, зачем он нужен.
  3. Замерьте вес и время выполнения каждого, отметьте самые тяжёлые.
  4. Проверьте, какие из них работают на всех страницах, а какие нужны только на некоторых.
  5. Для каждого решите: убрать, отложить или оставить как есть.

Что делать с разными типами скриптов

Типы сторонних скриптов и способы снижения вреда
Тип скриптаОсновной рискСпособ снизить вред
Счётчики и аналитикаЗапросы и вычисления на каждой страницеПодключать асинхронно, не дублировать несколько систем с одной задачей
Онлайн-чатТяжёлый код, который нужен не каждомуЗагружать после первого взаимодействия или через облегчённую заглушку
Карты и видеоБольшие вложенные окнаПоказывать картинку-заглушку, загружать при нажатии
РекламаСмещения макета и лишние запросыРезервировать место под блок заранее
Виджеты отзывов и соцсетейЧужие шрифты, стили и скриптыЗаменить лёгкой статичной версией

Как подключать

Скрипт, не влияющий на первый экран, не должен блокировать разбор страницы. Для этого используют атрибуты defer или async, а для вложенных окон — отложенную загрузку:

<script src='/js/widget.js' defer></script>

<iframe src='https://example.ru/map/' loading='lazy'
        width='600' height='400' title='Карта'></iframe>

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

Когда проще отказаться

  • Скрипт подключён давно, а вопрос «кто им пользуется?» остаётся без ответа.
  • Две системы собирают одни и те же данные.
  • Функция используется редко, а вес скрипта — заметный.

Связь с отзывчивостью. Чужой код занимает основной поток и ухудшает показатель INP. А если робот не может выполнить скрипт, от него может зависеть и попадание контента в индекс: об этом — в статье про индексацию страниц, созданных JavaScript.

Частые вопросы

Почему сторонние скрипты так сильно замедляют страницу?

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

Чем отличаются атрибуты defer и async?

Оба не блокируют разбор страницы; defer выполняет скрипт после разбора документа в порядке подключения, async — как только скрипт загрузился, независимо от порядка.

Как понять, какие скрипты убрать?

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

Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.

Читайте также