JavaScript оптимизация

Зачем оптимизировать JavaScript

Неоптимизированный JavaScript может блокировать отрисовку страницы, увеличивать время до интерактивности (TTI) и негативно влиять на INP. В современном вебе часто вес JS-бандлов превышает несколько мегабайт, что особенно критично для мобильных устройств и медленных соединений.

Основные техники оптимизации JavaScript

• Минификация — удаление пробелов, комментариев, переименование переменных (tools: Terser, UglifyJS).
• Code splitting — разделение кода на части, загружаемые по мере необходимости (Webpack, Rollup).
• Tree shaking — удаление неиспользуемого кода из бандла (требует модульную структуру).
• Defer / async — неблокирующая загрузка скриптов.
• Сжатие (gzip / brotli) — уменьшение объёма передаваемых данных.
• Кэширование — заголовки Cache-Control для повторных визитов.

Defer vs Async: в чём разница

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

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

• Без атрибута — блокирует парсинг HTML, выполняется немедленно (для критичных скриптов).
• defer — загружается параллельно, выполняется после полной загрузки HTML (для основного JS).
• async — загружается параллельно, выполняется сразу, как загрузится (для независимых скриптов вроде аналитики).

Оптимизация сторонних скриптов

Сторонние скрипты (чат-панели, трекеры, виджеты) — частая причина проблем с производительностью.

• Google Analytics / GTM — настройте отложенную загрузку через defer или по инициативе пользователя.
• Facebook Pixel — загружайте после взаимодействия (например, после скролла или клика).
• Чаты — показывайте статическую иконку, а скрипт подгружайте по клику.
• Карты (Google Maps) — вместо интерактивной карты показывайте статическое изображение-заглушку, подгружая JS по клику.