Ресурс интерфейса

HTML-документ — лишь каркас. Чтобы показать страницу целиком, браузер отправляет десятки отдельных запросов за картинками, файлами CSS и JS, шрифтами. Суммарный вес этих файлов и порядок их загрузки во многом определяют, как быстро страница станет видимой и отзывчивой. Поэтому в сборке фронтенда ассеты выделяют в отдельную категорию: их сжимают, объединяют, переименовывают с хешем и раздают с долгим кешем.

В исходниках проекта ассеты обычно лежат в папке вроде assets/ или src/, а сборщик кладёт готовые версии в каталог для публикации. В теме WordPress это подпапки темы, в 1С-Битрикс — каталог шаблона сайта.

Что делают с ассетами

• Сжимают. Изображения переводят в WebP или AVIF, CSS и JS минифицируют, сервер отдаёт текст с gzip или Brotli.
• Кешируют. Файлам с хешем в имени (app.3f9a1c.js) ставят долгий срок хранения: при изменении меняется имя, и браузер скачает новую версию.
• Откладывают. Картинки ниже первого экрана подгружают по мере прокрутки — это ленивая загрузка.
• Раздают ближе к пользователю. Статику выносят на CDN.

Пример подключения в WordPress

В теме WordPress стили и скрипты регистрируют через хук, а не вписывают в шапку руками. Номер версии добавляется к адресу и сбрасывает кеш после обновления:

add_action( 'wp_enqueue_scripts', function () {
  $ver = wp_get_theme()->get( 'Version' );
  wp_enqueue_style( 'theme-main', get_stylesheet_directory_uri() . '/assets/main.css', [], $ver );
  wp_enqueue_script( 'theme-app', get_stylesheet_directory_uri() . '/assets/app.js', [], $ver, true );
} );

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

Как проверить вес

Во вкладке Network инструментов разработчика можно отфильтровать запросы по типу и отсортировать по размеру. Частые находки — фото по 3–5 МБ из фотоаппарата, четыре начертания шрифта вместо двух и библиотека слайдера, подключённая на всех страницах ради одной. Разбор таких проблем входит в ускорение сайта.