Зачем минифицировать CSS и JavaScript
Минификация — это удаление из кода всего, что нужно разработчику, но не нужно браузеру: пробелы, переносы строк, комментарии, длинные имена переменных. Файл весом 120 КБ после минификации может сжаться до 80-90 КБ, а после Gzip/Brotli — до 20-25 КБ. Умножьте это на 5-10 файлов стилей и скриптов — экономия ощутима.
Для Core Web Vitals минификация влияет на несколько метрик. LCP (Largest Contentful Paint) зависит от скорости загрузки CSS, потому что браузер не рендерит страницу, пока не скачает и не распарсит все стили из head. FCP (First Contentful Paint) тоже блокируется ненужным CSS. А тяжёлый JavaScript замедляет INP, потому что занимает основной поток парсингом и компиляцией.
Но минификация — только часть задачи. Гораздо больше даёт удаление неиспользуемого CSS и JavaScript, а также правильная стратегия загрузки скриптов. На типичном WordPress-сайте 60-70% CSS-кода не используется на конкретной странице, потому что один файл style.css обслуживает все шаблоны.
Пошаговая инструкция
Шаг 1. Измерьте текущий объём CSS и JS
Откройте DevTools (F12), вкладка Network. Перезагрузите страницу с очищенным кешем (Ctrl+Shift+R). Отфильтруйте по типу CSS и JS. Посмотрите колонку Size — это размер после сжатия (transfer size). Колонка «Размер ресурса» показывает реальный размер файла. Запишите общий объём CSS и JS — это отправная точка.
Дополнительно откройте вкладку Coverage (Ctrl+Shift+P, наберите «Coverage»). Нажмите Record, перезагрузите страницу, прокрутите до конца, кликните по основным элементам. Красным показан неиспользуемый код. Если 70% CSS подсвечено красным — есть серьёзный потенциал для оптимизации.
Шаг 2. Минифицируйте CSS
Для WordPress самый простой путь — плагины:
- Autoptimize (бесплатный) — минифицирует и объединяет CSS-файлы. Включите опцию «Optimize CSS Code» в настройках. Autoptimize также умеет инлайнить критический CSS, но эту функцию лучше настраивать отдельно.
- WP Rocket (платный) — раздел «Оптимизация файлов». Включает минификацию CSS одной галочкой. Работает стабильнее Autoptimize, потому что не объединяет файлы по умолчанию — только минифицирует.
- Asset CleanUp (Perfmatters) — позволяет отключать конкретные CSS-файлы на определённых страницах. Если плагин Contact Form 7 подключает свой CSS на всех страницах, но форма только на странице контактов — отключите его стили везде, кроме этой страницы.
Для сборки без WordPress: используйте cssnano (PostCSS-плагин), clean-css или встроенную минификацию в Vite/Webpack.
Шаг 3. Удалите неиспользуемый CSS
Это даёт в разы больший эффект, чем простая минификация. Инструменты:
- PurgeCSS — анализирует HTML и оставляет только используемые селекторы. Интегрируется в Webpack, PostCSS, как CLI-утилита. Осторожно с динамическими классами (слайдеры, модальные окна) — добавляйте их в safelist.
- WP Rocket — функция «Remove Unused CSS» (появилась в версии 3.11). Работает через облачный сервис: анализирует каждую страницу и генерирует индивидуальный CSS. Требует проверки — иногда удаляет нужные стили.
- Perfmatters — аналогичная функция удаления неиспользуемого CSS с локальной генерацией.
После удаления неиспользуемого CSS обязательно проверьте сайт визуально: пройдитесь по всем типам страниц, откройте мобильную версию, проверьте интерактивные элементы (выпадающие меню, аккордеоны, слайдеры).
Шаг 4. Минифицируйте и оптимизируйте JavaScript
Минификация JS — это не только удаление пробелов. Минификаторы (Terser, UglifyJS) сокращают имена переменных, удаляют мёртвый код (dead code elimination), упрощают выражения. Файл может уменьшиться на 30-50%.
В WordPress:
- Autoptimize — опция «Optimize JavaScript Code». Можно объединять файлы, но я не рекомендую: объединение ломает порядок загрузки и часто вызывает ошибки. Минификации без объединения достаточно.
- WP Rocket — минификация JS + опция «Delay JavaScript execution», которая откладывает загрузку скриптов до первого пользовательского взаимодействия. Это радикально ускоряет начальную загрузку.
Шаг 5. Настройте defer и async для скриптов
По умолчанию тег <script> блокирует парсинг HTML: браузер останавливается, скачивает скрипт, выполняет его и только потом продолжает рендерить страницу. Атрибуты defer и async решают эту проблему:
- defer — скрипт скачивается параллельно с парсингом HTML, но выполняется только после полного парсинга документа. Порядок выполнения сохраняется. Используйте для большинства скриптов.
- async — скрипт скачивается параллельно и выполняется сразу после загрузки, не дожидаясь парсинга HTML. Порядок не гарантирован. Подходит для независимых скриптов: аналитика, виджеты чатов.
В WordPress добавить defer/async можно через фильтр script_loader_tag в functions.php или через плагины WP Rocket, Perfmatters, Async JavaScript.
Шаг 6. Выделите и инлайните критический CSS
Critical CSS — это минимальный набор стилей, необходимый для рендеринга видимой части страницы (above the fold). Идея: инлайнить критический CSS прямо в <head>, а остальные стили загружать асинхронно. Это ускоряет FCP и LCP.
Инструменты для генерации Critical CSS:
- Critical (npm-пакет от Addy Osmani) — генерирует критический CSS автоматически
- WP Rocket — встроенная генерация Critical CSS для каждого типа страницы
- Autoptimize + отдельный сервис — через API criticalcss.com
Остальной CSS загружайте через <link rel="preload" as="style" onload="this.rel='stylesheet'"> — это обеспечивает асинхронную загрузку без блокировки рендеринга.
Шаг 7. Проверьте результат
После всех оптимизаций снова откройте DevTools → Network. Сравните общий объём CSS и JS с начальными значениями. Проверьте Coverage — процент неиспользуемого кода должен снизиться. Запустите PageSpeed Insights и убедитесь, что рекомендации «Minify CSS», «Minify JavaScript», «Reduce unused CSS», «Reduce unused JavaScript» исчезли или показывают минимальный потенциал экономии.
Типичные ошибки
- Объединять все JS-файлы в один. Это было актуально в эпоху HTTP/1.1, когда каждый файл требовал отдельного соединения. С HTTP/2 и HTTP/3 множественные мелкие файлы загружаются параллельно. Объединение часто ломает порядок зависимостей и создаёт один огромный файл, который нельзя кешировать частями.
- Минифицировать без тестирования. Агрессивная минификация может сломать JavaScript: удалить «ненужные» переменные, которые используются динамически, нарушить порядок выполнения. Всегда проверяйте сайт после минификации — формы, слайдеры, модальные окна, меню.
- Добавлять async на скрипты с зависимостями. Если скрипт зависит от jQuery, а jQuery загружается с async — порядок выполнения не гарантирован, и скрипт упадёт с ошибкой «jQuery is not defined». Для зависимых скриптов используйте defer.
- Удалять неиспользуемый CSS без safelist. PurgeCSS не видит классы, добавляемые JavaScript динамически: .active, .open, .is-visible. Если не добавить их в safelist — стили выпадающих меню, аккордеонов и модальных окон будут удалены.
- Инлайнить слишком много Critical CSS. Если критический CSS занимает 50 КБ — вы замедляете загрузку HTML вместо ускорения. Оптимальный размер инлайн-CSS — до 15-20 КБ.
Что проверить в итоге
- Все CSS-файлы минифицированы (нет пробелов и комментариев в production-версиях).
- Все JS-файлы минифицированы и имеют атрибут defer или async.
- Неиспользуемый CSS удалён или составляет менее 20% от общего объёма (проверить через Coverage в DevTools).
- Critical CSS инлайнен в head для основных типов страниц.
- Общий объём CSS на странице не превышает 100 КБ (transfer size), JS — не более 300 КБ.
- PageSpeed Insights не показывает рекомендации Minify CSS, Minify JavaScript, Reduce unused CSS.
- Визуальная проверка пройдена: все страницы отображаются корректно, интерактивные элементы работают.
- Нет ошибок в консоли DevTools (особенно «is not defined», «cannot read property of null»).
