JavaScript (JS)

Что такое JavaScript?

JavaScript (JS) — это мультипарадигменный язык программирования, который выполняется в браузере пользователя, динамически изменяет DOM и обеспечивает полную интерактивность веб-страниц без обязательной перезагрузки документа.

Ключевой индустриальный ориентир (2026): объём JavaScript-кода, передаваемого на клиент, не должен превышать 350 КБ (в сжатом виде) для страницы любого типа. Превышение этого порога в среднестатистическом проекте увеличивает Total Blocking Time на 300–700 мс на мобильных устройствах и напрямую выводит метрику INP за пределы целевого значения «хорошо» (<200 мс).

Как это работает?

Браузер получает JS-файлы, парсит, компилирует и исполняет их в главном потоке, что блокирует взаимодействие пользователя с интерфейсом на время обработки.
Современный JavaScript использует асинхронные операции (AJAX, Fetch API, async/await), позволяя подгружать данные с сервера и изменять отдельные блоки интерфейса без перерисовки всей страницы.

Манипуляции с DOM, обработка событий и вычисление стилей, инициируемые JS-скриптами, напрямую влияют на скорость реакции интерфейса и метрики Core Web Vitals.

Метрики и стандарты

• БюджетJavaScript: ≤350 КБ сжатого кода на страницу. Каждые дополнительные 100 КБ увеличивают TBT на мобильных устройствах на 300–500 мс и ухудшают INP на 80–150 мс.
• Доля неиспользуемогоJS: по данным HTTP Archive 2026, средний сайт загружает 400–600 КБ сжатого JS, из которых 40–55 % не выполняется и задерживает парсинг. Удаление неиспользуемого кода снижает TBT в 1,5–2 раза.
• Влияние наINP (Interaction to Next Paint): целевой показатель — ≤200 мс. Каждые 100 мс задержки выполнения JS увеличивают INP на 50–70 мс. Сайты с тяжёлыми скриптами отслеживания и чат-ботами часто фиксируют INP >500 мс, теряя мобильный трафик.
• Время парсинга и компиляции: на типичном мобильном процессоре разбор 200 КБ JS-кода занимает 130–180 мс, к которым добавляется время выполнения. Оптимизация bundle-файлов через разделение кода сокращает этот этап на 25–40 %.

Почему это важно для бизнеса?

Задержка интерактивности на 300 мс снижает конверсию на 1,5–2,5 % в e-commerce. JavaScript напрямую влияет на INP — метрику, которая с 2024 года является сигналом ранжирования Google. Плохой INP означает понижение позиций, снижение CTR из выдачи и потерю мобильного трафика, доля которого превышает 60 %.

Тяжёлые скрипты маркетинговых сервисов (чаты, трекеры, виджеты соцсетей) — самая частая причина разрушения пользовательского опыта, незаметная в настольных тестах, но критичная для реальных посетителей.

Пример применения

Страница оформления заказа интернет-магазина бытовой техники загружала 720 КБ JS-кода (сжатый размер). INP составлял 480 мс, TBT — 1,2 с, а доля брошенных корзин достигала 74 %.

После аудита через Lighthouse и Coverage в DevTools были удалены неиспользуемые библиотеки jQuery UI, отложена загрузка чат-виджета до события взаимодействия, а основной скрипт корзины разбит на чанки с динамическим импортом. Итоговый JS снизился до 290 КБ, INP упал до 155 мс. Брошенные корзины сократились до 61 %, конверсия в завершённый заказ выросла на 13,5 %.

Как это реализуется в WordPress?

• Управление скриптами: темы и плагины обязаны подключать JavaScript строго через механизм wp_enqueue_script() с указанием зависимостей. Через хуки wp_dequeue_script и wp_deregister_script в файле functions.php отключаются ненужные библиотеки на конкретных страницах.
• Атрибуты загрузки: при регистрации скриптов указываются атрибуты defer или async. Плагин Perfmatters предоставляет интерфейс для массового включения этих атрибутов и отключения скриптов на основе условий (например, не загружать Contact Form 7 на всех страницах, кроме контактов).
• Минификация и объединение: WP Rocket, LiteSpeed Cache и FlyingPress выполняют минификацию, конкатенацию JS-файлов и генерируют отложенную загрузку. Важно не просто объединять всё в один файл, а делить на критические и некритические чанки, что контролируется настройкой «Delay JavaScript».
• Удаление неиспользуемогоJS: плагины вроде Asset CleanUp или Clearfy сканируют страницы и позволяют точечно отключать JS-файлы плагинов на тех URL, где их код не требуется. Это удаляет 200–400 КБ в типовом интернет-магазине на WooCommerce.
• Серверная оптимизация: при использовании NGINX или LiteSpeed активируется сжатие Brotli для JS-файлов (экономия 15–25 % относительно Gzip) и устанавливаются длительные заголовки кеширования. Кеширование статических ресурсов на уровне CDN ещё больше снижает время загрузки.

Связанные понятия

• ECMAScript — спецификация языка, на которой основан JavaScript (ES6, ES2024 и далее), определяющая синтаксис и API.
• DOM — объектная модель документа, с которой JavaScript взаимодействует, обеспечивая динамическое изменение контента и стилей.
• AJAX (Asynchronous JavaScript and XML) — технология асинхронной передачи данных между браузером и сервером без перезагрузки страницы.
• Core Web Vitals (INP,LCP,TBT) — метрики пользовательского опыта, напрямую зависящие от объёма и времени выполнения JavaScript.
• Webpack /Vite — современные сборщики модулей для JS, реализующие tree shaking, разделение кода и оптимизацию бандлов.
• async /defer — атрибуты тега <script>, управляющие временем загрузки и выполнения JavaScript относительно парсинга HTML.