Минификация контента

Что даёт минификация на самом деле

Цифры ориентировочные, но соотношение типичное: после сжатия разница — единицы процентов. Минифицировать стоит (это бесплатно на сборке), но искать ускорение нужно в другом месте.

Что даёт больше: четыре приёма

1. Критический CSS

Внешний CSS блокирует отрисовку: браузер не покажет ничего, пока не загрузит файл. Решение — встроить стили первого экрана в HTML, остальное подгрузить отложенно.

<style>/* критические стили первого экрана */</style>

<link rel="preload" href="/css/main.css" as="style"
      onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

2. Отложенные скрипты

<script src="/js/app.js" defer></script>

• defer — по умолчанию для всего: не блокирует разбор, порядок сохраняется.
• async — для независимых счётчиков, где порядок не важен.
• По требованию — чат, карта, видеоплеер грузятся по нажатию, а не при загрузке.
• Ничего в <head> без атрибутов: такой скрипт блокирует отрисовку.

3. Удаление неиспользуемого

Откройте DevTools → Coverage и перезагрузите страницу. Красная часть полосы — загруженный, но не использованный код. Типичные источники:

• CSS-фреймворк целиком ради десятка классов.
• Иконочный шрифт с тысячей символов ради пятнадцати.
• Библиотека дат ради одной функции форматирования.
• Стили плагинов, отключённых год назад.
• Слайдер на страницах, где слайдера нет.

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

Чаще всего именно они портят INP: чат, пиксели, виджеты отзывов, карты. Правило простое — подключать по необходимости и после взаимодействия.

// чат загружается только при первом действии пользователя
const load = () => {
  const s = document.createElement('script');
  s.src = 'https://chat.example.com/widget.js';
  document.body.appendChild(s);
};
['click','scroll','keydown'].forEach(e =>
  addEventListener(e, load, {once: true, passive: true}));

Порядок работ

1. Включить сжатие Brotli на сервере — самый большой эффект за наименьшие усилия.
2. Убрать блокирующие скрипты из <head>, проставить defer.
3. Вынести критический CSS в инлайн, остальное отложить.
4. Прогнать Coverage и удалить неиспользуемое.
5. Перевести сторонние виджеты на загрузку по требованию.
6. Включить минификацию на сборке — как гигиену.
7. Проверить полевые данные через месяц.

Итог

Минификация — последний по эффекту пункт списка, хотя исторически считался первым. Начинайте со сжатия и порядка загрузки ресурсов, продолжайте удалением неиспользуемого кода и отложенной загрузкой сторонних виджетов. Дальше — сжатие на стороне сервера.