Оптимизация FID (First Input Delay) для 1С-Битрикс

Оптимизация FID (First Input Delay) для 1С-Битрикс

FID (First Input Delay) — время от первого взаимодействия пользователя со страницей до момента, когда браузер начал обработку этого взаимодействия. С марта 2024 Google заменил FID на INP (Interaction to Next Paint), который мерит все взаимодействия, а не только первое. На практике оптимизация одинакова для обеих метрик.

Порог: FID < 100 мс, INP < 200 мс. На тяжёлых Битрикс-сайтах INP может достигать 500–1500 мс.

Почему браузер не реагирует на клик

Браузер однопоточный: пока главный поток занят выполнением JavaScript, он не может обрабатывать события ввода. Пользователь нажимает кнопку — клик ставится в очередь и ждёт, пока JS завершит текущую задачу.

Источники длинных задач (Long Tasks, > 50 мс) в Битрикс:

• Загрузка и парсинг больших JS-бандлов: jQuery + плагины + компоненты = 500 КБ — 1 МБ
• Инициализация слайдеров, маск-полей, карт, виджетов при DOMContentLoaded
• Тяжёлые обработчики событий: фильтр каталога, пересчёт корзины
• Синхронные AJAX-запросы (блокируют поток)

Диагностика Long Tasks

Chrome DevTools → Performance → запись при загрузке страницы. Красные полосы над Tasks — это Long Tasks > 50 мс. Кликните на задачу — DevTools покажет стек вызовов: какой скрипт занял главный поток.

Для INP: DevTools → Performance → включить «Web Vitals» → взаимодействовать со страницей → найти INP-события.

Консольный мониторинг:

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.duration > 50) {
            console.warn('Long task:', entry.duration.toFixed(1) + 'ms', entry);
        }
    }
});
observer.observe({ type: 'longtask', buffered: true });

Разбивка бандла и code splitting

Стандартный Битрикс загружает весь JS на каждой странице: jQuery, плагины каталога, скрипты корзины, слайдеры, карты — всё сразу. Страница с 1 МБ JS выполняет его целиком при загрузке.

Переход на code splitting: каждый компонент грузит только нужные скрипты:

// Загружать слайдер только если на странице есть слайдер
if (document.querySelector('.main-slider')) {
    import('./swiper.min.js').then(({ default: Swiper }) => {
        new Swiper('.main-slider', { /* ... */ });
    });
}

// Карта только на странице контактов
if (document.querySelector('#map')) {
    import('./ymaps-init.js');
}

В контексте Битрикс — через \Bitrix\Main\Page\Asset::addJs() в конкретных шаблонах компонентов, а не в header.php.

Defer и async для скриптов

<!-- Синхронный — блокирует парсинг HTML -->
<script src="/bitrix/js/plugin.js"></script>

<!-- defer — загружается параллельно, выполняется после парсинга HTML -->
<script src="/bitrix/js/plugin.js" defer></script>

<!-- async — загружается и выполняется как можно раньше -->
<script src="/bitrix/js/analytics.js" async></script>

defer — для скриптов, которым нужен DOM (инициализация компонентов). async — для независимых скриптов (аналитика, рекламные теги).

В Битрикс JS-файлы, добавленные через \Bitrix\Main\Page\Asset::addJs(), выводятся без defer. Для добавления атрибута — кастомная реализация через хук OnEndBufferContent или переопределение шаблона вывода скриптов.

Тяжёлые обработчики событий

Обработчик клика, который делает синхронный пересчёт DOM на 200 элементов, блокирует поток на время этого пересчёта. INP будет равен времени обработчика.

Паттерны улучшения:

Debounce для частых событий (ввод в поиске, изменение фильтра):

let debounceTimer;
searchInput.addEventListener('input', function() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        doSearch(this.value);
    }, 300);
});

Разбивка тяжёлых операций через setTimeout / scheduler.postTask:

async function processLargeList(items) {
    for (let i = 0; i < items.length; i += 50) {
        const chunk = items.slice(i, i + 50);
        processChunk(chunk);
        // Уступить управление браузеру между пакетами
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

Web Workers для вычислений: если в обработчике события нужны тяжёлые вычисления (сортировка, фильтрация большого массива данных) — вынесите в Web Worker. Работает в отдельном потоке, не блокирует UI.

Сторонние скрипты

JivoSite, MetrikaTag, Google Analytics, пиксели соцсетей — каждый добавляет JS, который выполняется в главном потоке. При 5–10 сторонних скриптах суммарная нагрузка на старт может составлять 200–500 мс Long Tasks.

Стратегия:

1. Загружать сторонние скрипты через async или после load-события
2. Использовать requestIdleCallback для некритичных скриптов
3. Проверить, нужны ли все подключённые виджеты — часто остаются неиспользуемые

// Загрузить аналитику после idle
window.addEventListener('load', () => {
    requestIdleCallback(() => {
        const script = document.createElement('script');
        script.src = 'https://analytics-provider.com/tag.js';
        script.async = true;
        document.head.appendChild(script);
    });
});

Сроки оптимизации

Хорошим результатом для Битрикс-магазина считается INP < 200 мс. Этого достигают при суммарном бандле JS < 200 КБ (after parse) и отсутствии Long Tasks > 100 мс при взаимодействии.