Автоматический анализатор и оптимизатор CSS для удаления неиспользуемых селекторов с вашего веб-сайта. Инструмент помогает значительно уменьшить размер CSS файлов и улучшить производительность сайта.
- Автоматический анализ: Сканирует все CSS файлы на странице в реальном времени
- Интеллектуальное отслеживание: Отслеживает использование селекторов при динамических изменениях DOM
- Кросс-доменная поддержка: Работает с локальными CSS файлами любого происхождения
- Генерация оптимизированных файлов: Создает очищенные версии CSS без неиспользуемых правил
- Подробная статистика: Показывает точную экономию байтов и количество удаленных селекторов
- Удобный интерфейс: Плавающая кнопка с интуитивным меню действий
- Largest Contentful Paint (LCP): Уменьшение размера CSS файлов ускоряет загрузку критических ресурсов
- First Input Delay (FID): Меньший объем CSS означает быстрее парсинг и меньше блокировки основного потока
- Cumulative Layout Shift (CLS): Оптимизированный CSS загружается быстрее, предотвращая сдвиги макета
- Reduce unused CSS: Прямое решение одной из главных рекомендаций PageSpeed Insights
- Minimize main-thread work: Уменьшение времени парсинга CSS
- Reduce resource transfer sizes: Экономия трафика за счет меньших файлов
- Improve Time to Interactive (TTI): Быстрее время до интерактивности страницы
- Экономия от 30% до 80% размера CSS файлов в зависимости от проекта
- Улучшение скорости загрузки на 10-40% для CSS-тяжелых сайтов
- Повышение общего балла PageSpeed Insights на 5-20 пунктов
Существует несколько подходов к удалению “мертвого” CSS из вашего проекта. В этом разделе сравним два популярных способа:
- Chrome DevTools + Coverpage
- Remove-Unused-CSS
Плюсы:
- Интерактивность. Позволяет визуально увидеть, какие строки CSS реально используются, благодаря Coverage-вкладке DevTools.
- Семплинг состояний. Можно вручную прокликать страницу, авторизоваться, пройти пути пользователя и собрать покрытие для разных сценариев.
- Быстрый прототип. Не требует интеграции в сборку — достаточно браузера и Node.js.
Минусы:
- Потеря метаданных. При экспорте неиспользуемых правил через Coverpage могут выпасть:
- vendor-префиксы (
-webkit-,-moz-,-ms-и т. д.) - некоторые
@-правила(например,@supports,@import) - динамически подгружаемые шрифты и ключевые кадры
- vendor-префиксы (
- Ограниченность одного состояния. DevTools фиксирует покрытие только в момент сбора. Если на странице есть скрытые модули или динамика через JS, их стили могут неправомерно считаться “мертвыми”.
- Ручная доработка. Нужно сверять список неиспользуемых селекторов вручную и вносить коррективы, чтобы не поломать динамические компоненты.
- Нет бэкапов. Экспорт всегда затирает предыдущую версию, если вы не позаботились о резервной копии.
Преимущества нашего инструмента:
-
Глубокий анализ
— Статичный парсинг через Sabberworm PHP-парсер + динамическая проверка через DevTools-подобный JS на клиенте.
— Учитываются все@media,@supports,@keyframes,@font-faceи даже вложенные@layer. -
Конфигурируемая гибкость
— Можно включать/отключать отдельные типы правил (псевдоклассы, функциональные селекторы, проценты, трансформации и пр.).
— Предусмотрены “чёрные списки” и “белые списки” селекторов и безопасные шаблоны для базовых тегов, классов и ID. -
Полная автоматизация
— В одно действие “Сохранить → Генерировать” вы получаете и JSON-отчет, и новые минифицированные CSS-файлы.
— При каждом обновлении сохраняется бэкап предыдущих исходных файлов с таймстампом, чтобы всегда можно было откатиться. -
Сохранение префиксов и правил
— В отличие от Coverpage, Remove-Unused-CSS не удаляет-webkit-,-moz-и другие vendor-префиксы.
— Учитываются правила@counter-styleи ряд других критичных at-rule-блоков. -
Динамическая проверка
— JS-модуль на странице непрерывно отслеживает изменения DOM и повторно помечает селекторы как “использованные”, если они появились после загрузки (MutationObserver).
— Это решает проблему “скрытых” или лениво загружаемых компонентов, которые DevTools мог пропустить. -
Отчёты и статистика
— После генерации инструмент выводит подробную статистику:- сколько байт и селекторов удалено
- сколько файлов пересоздано
- общий размер до и после
— JSON-отчёт легко интегрируется в CI/CD и показывает изменения в виде метрик.
| Особенность | DevTools + Coverpage | Remove-Unused-CSS |
|---|---|---|
| Учёт vendor-префиксов | Нет | Да |
Сохранение всех @-правил |
Частично | Полностью |
| Динамические изменения DOM | Только при ручной перезагрузке | Автоматически (MutationObserver) |
| Резервное копирование (бэкап) | Нет | Есть (таймстамп / папки backup/) |
| Гибкость настроек | Ручная | Конфиг через JSON + UI в браузере |
| Интеграция в сборку | Через npm-скрипты | PHP-скрипт + JS-модуль, легко встраивается |
| Отчёты и метрики | Ограниченно (Coverage UI) | Детализированный JSON и UI-уведомления |
Remove-Unused-CSS — более надёжное и гибкое решение для автоматизированной очистки, особенно в больших и динамических проектах. Оно сочетает в себе преимущества DevTools-анализа и глубокого статического парсинга, при этом сохраняет все важные CSS-правила и сохраняет резервные копии ваших файлов.
-
Ручной QA-обход страниц
- Инструмент встраивается в браузер и предоставляет плавающую кнопку для сбора статистики CSS-селекторов.
- QA-инженер последовательно проходит по всем ключевым страницам сайта (включая всплывающие окна, слайдеры, аккордеоны, меню, hover-элементы и др.).
- Для каждой страницы переключается режим отображения (десктоп, планшет, мобильный) через DevTools, чтобы учесть все медиазапросы и адаптивные стили.
Подробнее: QA Чек-лист для обнаружения слепых зон CSS анализатора
-
Сбор используемых селекторов
- При каждой активности (клик, ховер, появление динамических блоков) скрипт фиксирует все CSS-правила, к которым обращается браузер.
- Фильтрация «критических» паттернов (медиазапросы, псевдоклассы, ключевые правила и т.д.) настраивается через GUI: можно гибко включать или отключать проверку по любому типу селекторов.
-
Сохранение данных
- По окончании обхода страницы нажимается кнопка «Сохранить» — все обнаруженные селекторы отправляются на сервер и записываются в JSON.
- Собранная статистика аккумулируется по файлам CSS: для каждого файла хранится карта «селектор → статус (used/unused)».
-
Генерация очищенных CSS
-
После обхода всех страниц запускается действие «Сгенерировать», которое:
- Создаёт резервную копию оригинальных стилей.
- Парсит каждый CSS-файл и удаляет все селекторы, не помеченные как «используемые» хотя бы на одной из страниц.
- Собирает и минимизирует результат в несколько файлов .css
-
-
Гибкая настройка глубины очистки
- В настройках можно задать уровень агрессивности: от щадящего (сохранять все медиазапросы, ключевые правила, vendor-префиксы и т.д.) до максимально «чистой» версии.
- При изменении настроек автоматически сбрасываются старые данные и запуск анализа происходит заново.
-
Цель и подход
- Поддерживать безопасность и стабильность: ни один важный селектор не удаляется, пока он хотя бы раз не помечен как «unused».
- Поддерживать разные CMS и шаблонизаторы (WordPress, MODX, OpenCart, статические лендинги и др.), где набор библиотек и структура стилей может сильно различаться.
- Исключить работу с инлайновыми стилями — весь фокус только на внешних CSS-файлах.
-
Автоматизация при смене настроек
- Любое изменение в конфигурации (глубина очистки, типы селекторов, которые нужно сохранять) приводит к автоматическому сбросу накопленных данных и повторному обходу страниц для свежей выборки.
Данный подход позволяет безопасно и последовательно очистить стили проекта от «мёртвого» CSS, снизить общий объём загружаемых ресурсов и обеспечить высокую гибкость под различные требования разработки и дизайна.
1. Мгновенный старт и сбор данных
- Автозапуск скрипта при загрузке страницы — не требует ручных правок шаблонов.
- Собирает список всех локальных CSS-файлов (), игнорируя внешние CDN.
- Фиксирует каждый селектор на странице вместе с контекстом медиа-запросов.
2. Универсальный разбор стилей
- Работает со всеми типами правил: обычные селекторы,
@media,@supports,@import. - Обходит ограничения браузера на кросс-доменные стили: при необходимости загружает файл повторно и парсит «внутри» страницы.
- Группирует селекторы по исходному файлу и сохраняет информацию о медиа-условиях.
3. Интеллектуальный мониторинг использования
- Постоянно проверяет, какие селекторы действительно применяются (
document.querySelector). - Отслеживает динамику: появление/удаление элементов, изменение классов и ID через
MutationObserver. - Помечает селекторы как «используемые» при первом совпадении и исключает их из дальнейшего учёта.
- Ведёт в реальном времени счётчик «живых» и «мертвых» селекторов.
4. Удобный интерфейс для веб-мастера
- Плавающая кнопка показывает количество неиспользуемых селекторов и недоступных файлов.
- Единственное меню с девятью кнопками:
- Мгновенные уведомления о ходе операций и итогах экономии места.
Единая точка входа
- Один файл-эндпоинт обрабатывает все запросы: сохранение, генерацию и изменение настроек.
- Проверка и валидация входящих данных, защита от некорректных и CORS-запросов.
Накопление статистики
- Все селекторы хранятся между запусками в
data/selectors.json. - Каждый селектор имеет статус «used» или «unused» и не теряет своей метки при обновлении данных.
- Новые файлы автоматически инициализируются как «unknown» и добавляются в учёт.
Безопасная очистка CSS
-
Создаётся резервная копия оригинальных стилей перед любыми изменениями.
-
Для каждого CSS-файла:
- Парсинг в дерево (AST) при помощи Sabberworm.
- Удаление всех «мертвых» селекторов и опциональных пустых блоков (
@media,@supports). - Сохранение структуры каталогов, генерация индивидуальных очищенных файлов.
Минификация и сборка
- По желанию создаётся единый файл
remove-unused-css.min.css. - Удаление комментариев, избыточных пробелов и точек с запятой — готово к продакшену.
- Итоговая статистика экономии трафика и числа удалённых селекторов возвращается в UI.
Этот инструмент даёт веб-мастерам полностью автоматизированный и настраиваемый процесс выявления и удаления неиспользуемого CSS, сокращая объём стилей и ускоряя загрузку сайтов, при этом сохраняя ключевые медиа- и функциональные правила.
-
Консервативный подход Инструмент по умолчанию бережёт всё, что может быть важно — лучше оставить пару лишних правил, чем случайно сломать интерфейс.
-
Белый список «простых» селекторов Автоматически сохраняются все базовые селекторы по тегам, классам и идентификаторам без каких-либо псевдоклассов или сложных выражений.
-
Чёрный список «особых» паттернов Никогда не удаляются:
- Псевдоклассы и псевдоэлементы (
:hover,:focus,::before,::afterи т. д.) - Анимации и ключевые кадры (
@keyframes,%,from/to,animation-*) - Браузерные префиксы (
-webkit-,-moz-,-ms-,-o-) - CSS-переменные (
--*) и функцииcalc(),var() - Градиенты, фильтры, трансформации, переходы (
transform,transition,filter,backdrop-filter,mask,clip-path) - Nth-селекторы и логические конструкции (
:nth-child,:nth-of-type,:not(),:is(),:where(),:has())
- Псевдоклассы и псевдоэлементы (
-
Сохранение всех @-правил Сохраняются в оригинальном порядке и структуре:
@media(включая@media print)@supports@importи@charset(кодировка импортов выносится в начало)@font-face,@page,@namespace@layer(CSS Cascade Layers)
-
Безопасная проверка селекторов Перед удалением каждый селектор прогоняется по детальным белым и чёрным спискам — опасные или нестандартные конструкции автоматически исключаются из чистки.
-
Защита ключевых элементов Никогда не затронутся селекторы
html,body, универсальный*и основные теги (head,title,meta,link,script,style,base). -
Path traversal и проверка доступа При поиске CSS-файлов учитываются символические ссылки и проверяется, что путь остаётся в пределах корневой папки сайта. Любые попытки выйти «за границы» автоматически блокируются.
-
Резервное копирование перед изменениями До удаления «мертвых» селекторов все оригинальные файлы копируются в timestamp-папку
backup/— можно в любой момент вернуть предыдущую версию.
Эти механизмы обеспечивают максимально безопасную и гибкую очистку CSS: вы контролируете глубину и логику удаления, а важные правила и настройки всегда остаются под защитой.
В выпадающем меню доступны девять ключевых действий для управления процессом сбора и очистки CSS. Вот как их использовать:
-
Что делает: Отправляет на сервер текущую карту неиспользуемых селекторов, сгруппированную по CSS-файлам и медиа-контекстам.
-
Когда применять: После ручного обхода очередной страницы или набора интерактивных сценариев (мобильный/десктоп/hover/аккордеоны и т.п.).
-
Результат:
- JSON-файл
data/selectors.jsonпополняется отмеченными селекторами; - На сервере обновляется статус «used» для тех, что встретились;
- В интерфейсе вы получите уведомление о количестве сохранённых селекторов и файлов.
- JSON-файл
-
Что делает: Запускает очистку всех ваших CSS-файлов на основе накопленных данных и создаёт оптимизированные стили.
-
Под капотом:
- Делаются резервные копии всех оригинальных CSS в папку
backup/YYYY-MM-DD_HH-MM-SS/. - Парсятся все внешние CSS (Sabberworm), удаляются «мертвые» селекторы, чистятся пустые
@media/@supports. - Сохраняются новые минимизированные файлы в
css/…с сохранением структуры каталогов. - Если включено, собирается объединённый
remove-unused-css.min.css.
- Делаются резервные копии всех оригинальных CSS в папку
-
Результат:
- На экране появляется сводная статистика: число обработанных и сгенерированных файлов, удалённые селекторы, байты экономии, размер «до» и «после».
- В директории проекта сразу можно применять новые
.cssв продакшене.
-
Что делает: Формирует детальный отчёт по всем неиспользуемым селекторам на основе текущих настроек.
-
В отчёте вы увидите:
- Список каждого CSS-файла и число «мертвых» селекторов в нём;
- Пример первых 10 селекторов из каждого файла (с указанием медиа-контекста, если есть).
- Итоговое число неиспользуемых селекторов и задействованных файлов.
-
Когда полезно: Перед очисткой или чтобы оценить, насколько «грязен» ваш CSS и какие участки требуют наибольшего внимания.
В файле README.md секция с настройками может выглядеть так:
В меню Настройки вы можете включить или отключить флаги, которые определяют, какие типы CSS‑правил и селекторов считаются «критическими» и не удаляются, даже если они не были найдены на страницах.
Управляют сохранением глобальных блоков CSS.
-
@media запросы Защищает все медиа‑правила (
@media {…}), включая вложенные селекторы. Гарантирует корректную адаптивность на разных устройствах и разрешениях.Система полностью защищает все медиа-правила, включая адаптивные стили для различных размеров экрана, устройств и условий отображения. Это гарантирует, что сайт сохранит корректный вид на мобильных устройствах, планшетах и различных разрешениях экрана, даже если определенные медиа-условия не были активированы во время тестирования.
-
@media print запросы Сохраняет стили для печати (
@media print {…}), которые редко тестируются в обычном режиме.Специальная защита стилей для печати обеспечивает сохранность всех правил, предназначенных для корректного отображения страниц при печати. Поскольку режим печати редко тестируется в процессе обычного QA, эта защита критически важна для поддержания функциональности печатных версий страниц.
-
@supports проверки Оставляет блоки проверки возможностей браузера (
@supports {…}) для fallback‑стилей и кроссбраузерной совместимости.Правила проверки возможностей браузера сохраняются для обеспечения кроссбраузерной совместимости. Эти блоки содержат fallback-стили для браузеров с различным уровнем поддержки CSS-свойств.
-
@keyframes анимации Сохраняет все ключевые кадры (
@keyframes) и связанные свойстваanimation-*, чтобы анимации работали при любых условиях.Все ключевые кадры анимаций защищены от удаления, поскольку анимации могут срабатывать в специфических условиях или с задержкой. Система также сохраняет связанные свойства animation-*, обеспечивая целостность всех анимационных эффектов на сайте.
-
@font-face шрифты Никогда не удаляет подключения шрифтов через
@font-face, чтобы избежать проблем с типографикой при асинхронной загрузке.Подключения пользовательских шрифтов никогда не удаляются, так как они могут загружаться асинхронно или использоваться в специфических условиях. Удаление @font-face правил может привести к серьезным проблемам с типографикой сайта.
-
@page правила Сохраняет блоки
@pageдля форматирования страниц при печати.Специальные правила форматирования для печати защищены, так как они применяются только в контексте подготовки документа к печати и не могут быть протестированы в обычном режиме просмотра.
-
@counter-style счётчики Защищает пользовательские схемы нумерации (
@counter-style), которые могут использоваться в разных контекстах.Пользовательские стили счетчиков для списков и нумерации защищены, поскольку они могут использоваться в различных контекстах и не всегда активны во время тестирования.
-
@layer слои Оставляет правила CSS Cascade Layers (
@layer) для правильного порядка применения стилей.Современные правила CSS Cascade Layers сохраняются для поддержания правильного порядка каскадирования стилей, что критически важно для архитектуры современных CSS-фреймворков.
Определяют, какие селекторы оставить по-разному сложным критериям.
-
Псевдо‑классы (
:hover,:focus,:activeи др.) Защищает интерактивные состояния, которые не всегда попадают в автоматический анализ.Все интерактивные состояния элементов защищены от удаления. Это включает эффекты наведения, фокуса, активации и другие состояния, которые могут не срабатывать во время автоматического тестирования, но критически важны для пользовательского опыта.
-
Псевдо‑элементы (
::before,::after,::markerи др.) Оставляет генерируемый контент, важный для декоративных и структурных целей.Генерируемый контент через псевдо-элементы полностью защищен, поскольку эти элементы часто используются для декоративных целей и могут не попадать в обычные селекторы при автоматическом анализе.
-
Атрибутные селекторы (
[attr=value],[data-*]и др.) Сохраняет селекторы по атрибутам, часто используемые в динамическом контенте и JS‑компонентах.Селекторы по атрибутам сохраняются, так как они часто используются для динамического контента, состояний приложений и интеграции с JavaScript-компонентами, которые могут активироваться не во всех сценариях тестирования.
-
nth‑селекторы (
:nth-child(),:nth-of-type()) Оставляет сложные выражения, зависящие от структуры DOM.Сложные nth-выражения для выборки элементов по позиции сохраняются, так как их активация зависит от динамического содержимого и структуры DOM, которая может изменяться.
-
Логические селекторы (
:not(),:is(),:has()и др.) Сохраняет современные конструкции для сложных условий.Современные логические конструкции селекторов полностью защищены для поддержания совместимости с современными стандартами CSS и обеспечения корректной работы сложных селекторных выражений.
-
Соседние селекторы (
E + F) Защищает правила «adjacent sibling», зависящие от порядка элементов.Селекторы смежных элементов защищены, поскольку их активация зависит от специфической структуры DOM, которая может изменяться динамически или не покрываться стандартными сценариями тестирования.
-
Дочерние селекторы (
E > F) Оставляет прямые отношения «parent > child», важные для вложенных компонентов.Прямые селекторы потомков сохраняются для поддержания иерархических стилей, особенно важных в компонентных архитектурах и вложенных структурах интерфейса.
-
Общие братские селекторы (
E ~ F) Сохраняет «general sibling»‑конструкции, активируемые при динамическом изменении DOM.Селекторы общих соседних элементов защищены, поскольку они могут активироваться при изменении порядка элементов или добавлении нового контента через JavaScript.
Позволяют оставлять вычисления и динамические свойства.
-
CSS‑переменные (
--custom-var) Защищает пользовательские свойства, используемые в runtime или через JS.Все пользовательские свойства (CSS Custom Properties) защищены, поскольку они могут использоваться через JavaScript или в условиях, не покрытых тестированием. Удаление переменных может привести к каскадным ошибкам в дизайне.
-
Вендорные префиксы (
-webkit-,-moz-,-ms-и др.) Сохраняет префиксные свойства для кроссбраузерной поддержки.Свойства с вендорными префиксами сохраняются для обеспечения кроссбраузерной совместимости. Эти правила обеспечивают корректную работу сайта в различных браузерах и их версиях.
-
CSS‑функции (
calc(),var(),url(),min(),max()и др.) Оставляет все функциональные выражения, критически важные для динамики макета и ресурсов.Все функциональные выражения CSS сохраняются, поскольку они могут содержать динамические вычисления и ссылки на ресурсы, критически важные для правильного отображения контента.
-
Процентные значения (
50%,100%) Оставляет макетные и селекторные правила, зависящие от относительных величин.Селекторы и свойства с процентными значениями сохраняются, поскольку они обеспечивают адаптивность макета и могут проявляться при различных размерах экрана или контейнеров.
-
Экранированные символы (
\00a0,\#idи др.) Сохраняет специальные конструкции для compatibility‑селекторов.Конструкции со специальными символами защищены для сохранения совместимости с различными кодировками и специфическими селекторами, которые могут использоваться в legacy-коде.
-
Цветовые функции (
rgb(),rgba(),hsl(),hsla()) Защищает цветовые определения и прозрачность.Все цветовые функции сохраняются для поддержания цветовой схемы сайта, включая прозрачность и альтернативные цветовые модели, которые могут использоваться в различных контекстах.
Группа параметров для графических и анимационных эффектов.
-
Анимации и переходы (
animation,transition) Защищает свойства анимаций и связанные ключевые кадры для плавности интерфейса.Свойства анимаций и переходов полностью защищены, поскольку они обеспечивают плавность интерфейса и могут срабатывать в различных условиях взаимодействия с пользователем.
-
Переходы (
transition) Защищает правила, отвечающие за плавные переходы между состояниями.Правила плавных переходов между состояниями защищены для сохранения микроанимаций и улучшения пользовательского опыта при взаимодействии с интерфейсом.
-
Трансформации (
transform) Сохраняет 2D/3D‑преобразования для визуальных эффектов и адаптивных изменений.Все трансформации элементов сохраняются для поддержания визуальных эффектов, 3D-преобразований и адаптивных изменений макета, которые могут активироваться в специфических условиях.
-
Градиенты (
linear-gradient,radial-gradient) Оставляет фоны‑градиенты и маски, часто используемые как изображения.Градиентные заливки защищены от удаления, поскольку они часто используются как фоновые изображения и могут не попадать в стандартные селекторы при анализе.
-
Фильтры (
filter,backdrop-filter) Сохраняет CSS‑фильтры для размытия, контраста и других визуальных эффектов.CSS-фильтры и эффекты размытия сохраняются для поддержания визуальных эффектов, которые могут применяться условно или активироваться через JavaScript.
-
Маски и обрезка (
mask,clip-path) Оставляет правила для сложных декоративных и функциональных масок.Свойства масок и путей обрезки защищены, поскольку они создают сложные визуальные эффекты, которые могут не учитываться при стандартном анализе использования селекторов.
Каждый из этих флажков позволяет вам адаптировать инструмент под специфику проекта: от максимально «агрессивной» очистки (оставить только базовые теги, классы и ID) до щадящего режима, при котором сохраняются все нюансы современных CSS-возможностей.
Рекомендации по приоритету
-
Критические (нельзя убрать) Ат‑правила и ключевые селекторы:
media,keyframes,pseudo_classes,pseudo_elements,attribute_selectors. -
Важные (рекомендовано включать)
css_variables,css_functions,animations,vendor_prefixes,logical_selectors. -
Дополнительные (можно опционально отключать)
gradients,filters,masks,escapes,percentages.
Поле для перечисления CSS‑правил, которые никогда не удаляются, даже если они не задействованы на страницах во время проверки. Используйте для защиты динамических или редко встречающихся элементов (модальные окна, всплывающие подсказки, скрытые вкладки и т. п.).
-
Wildcard‑символы:
-
*— 0 или более любых символовПример:
button-*найдетbutton-primary,button-large -
?— ровно один любой символПример:
nav-?найдетnav-1,nav-a(но неnav-10)
-
Поле для перечисления через запятую CSS‑правил, которые всегда удаляются, даже если они обнаружены на страницах. Применяйте для жёсткого удаления устаревших, экспериментальных или отладочных стилей. Синтаксис wildcard тот же, что и в белом списке.
-
Пример:
legacy-*— удалит всё, что начинается с.legacy-debug-?— удалит.debug-a,.debug-1и т. п.
Обработка любых CSS‑блоков Белый и чёрный списки распространяются не только на обычные селекторы, но и на конструкции типа
@keyframes,@font-face,@counter-styleи другие «@»‑блоки.
Формат списков:
- Каждый паттерн на отдельной строке
- Пустые строки игнорируются
- Автоматическая обрезка пробелов
- Игнорирование пустых строк
Порядок приоритизации
- Чёрный список
- Белый список
- Критические настройки (
@media,@supports,@keyframes,@font-faceи т. д.) - Режим генерации
На этапе генерации каждое CSS‑правило классифицируется движком как одно из трёх состояний:
- used — правило реально применялось на проверенных страницах
- unused — правило явно не применялось
- unknown — правило не попадало под анализ (динамический или редко встречающийся элемент)
В зависимости от выбранного режима фильтруется набор правил:
-
Убираем все неиспользуемые (remove_unused)
- Сохраняет все правила со статусом used и unknown.
- Удаляет только правила со статусом unused.
- При этом автоматическая проверка не затрагивает приоритеты белого списка и критических
@‑блоков — они уже включены в категории used или unknown.
-
Убираем всё кроме используемых (keep_used)
- Сохраняет только правила со статусом used.
- Удаляет все правила со статусом unused и unknown.
- Незадействованные или не проверенные селекторы и
@‑блоки в этот режим не попадут.
Dynamic Content Detector - Автоматически обходи́т все интерактивные и динамические элементы на странице, чтобы максимально выявить используемые CSS-селекторы. Полезно при анализе “мертвого” CSS и тестировании UI-компонентов.
-
Симуляция пользовательских действий
- Наведение (hover), клики, двойные клики
- Фокусировка и ввод в формы
- Прокрутка страницы (включая горизонтальную)
- Клавиатурная навигация (Tab, Enter, Arrow Keys и др.)
- Изменение размеров (мобайл → десктоп)
- Триггер кастомных событий (load, resize, touch и др.)
-
Обнаружение динамически подгружаемых элементов
MutationObserverследит за изменениями DOM- Периодические проверки новых элементов после действий
- Включает скрытые (display: none; visibility: hidden) и лениво загружаемые блоки
-
Гибкие настройки
- Задержки между действиями (mouseDelay, clickDelay, scrollDelay и т. д.)
- Включение/отключение разных типов взаимодействий (hover, click, focus, scroll, keyboard)
- Глубина сканирования (
maxDepth) и общее время ожидания (maxWaitTime) - Симуляция разных размеров экрана
- Возможность запускать собственные колбэки
onProgress,onComplete,onError
-
Статистика и отчёты
- Количество обработанных и обнаруженных элементов
- Логирование каждого шага с метками
ℹ️,✅,❌,🐛 - Доступ к итоговым результатам через
getResults()
🚀 Запуск автоматического обхода элементов...
Прогресс: 0% — Подготовка к сканированию
ℹ️ [DynamicContentDetector] 📊 Подготовка к сканированию (0%)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (12 новых узлов)
Прогресс: 9% — Симуляция изменения размеров экрана
ℹ️ [DynamicContentDetector] 📊 Симуляция изменения размеров экрана (9%)
ℹ️ [DynamicContentDetector] 📱 Симуляция Mobile Portrait (320×568)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (15 новых узлов)
ℹ️ [DynamicContentDetector] 📢 Обнаружены новые элементы DOM (+1)
ℹ️ [DynamicContentDetector] 📱 Симуляция Tablet Portrait (768×1024)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (15 новых узлов)
ℹ️ [DynamicContentDetector] 📢 Обнаружены новые элементы DOM (+1)
ℹ️ [DynamicContentDetector] 📱 Симуляция Tablet Landscape (1024×768)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (16 новых узлов)
ℹ️ [DynamicContentDetector] 📱 Симуляция Desktop HD (1920×1080)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (25 новых узлов)
Прогресс: 18% — Активация hover-эффектов
ℹ️ [DynamicContentDetector] 📊 Активация hover-эффектов (18%)
ℹ️ [DynamicContentDetector] 🖱️ Обработка 7 hover-элементов
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (19 новых узлов)
Прогресс: 27% — Взаимодействие с кликабельными элементами
ℹ️ [DynamicContentDetector] 📊 Взаимодействие с кликабельными элементами (27%)
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (10 новых узлов)
Прогресс: 36% — Работа с формами
ℹ️ [DynamicContentDetector] 📊 Работа с формами (36%)
ℹ️ [DynamicContentDetector] 📝 Обработка 0 элементов форм
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (10 новых узлов)
Прогресс: 45% — Прокрутка и ленивая загрузка
ℹ️ [DynamicContentDetector] 📊 Прокрутка и ленивая загрузка (45%)
ℹ️ [DynamicContentDetector] 📜 Выполнение прокрутки страницы
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (27 новых узлов)
Прогресс: 55% — Симуляция клавиатурной навигации
ℹ️ [DynamicContentDetector] 📊 Симуляция клавиатурной навигации (55%)
ℹ️ [DynamicContentDetector] ⌨️ Симуляция клавиатурной навигации
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (18 новых узлов)
Прогресс: 64% — Активация медиа-элементов
ℹ️ [DynamicContentDetector] 📊 Активация медиа-элементов (64%)
ℹ️ [DynamicContentDetector] 🎬 Обработка 0 медиа-элементов
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (2 новых узла)
Прогресс: 73% — Поиск скрытых элементов
ℹ️ [DynamicContentDetector] 📊 Поиск скрытых элементов (73%)
ℹ️ [DynamicContentDetector] 🔍 Поиск скрытых элементов
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (42 новых узла)
Прогресс: 82% — Триггер кастомных событий
ℹ️ [DynamicContentDetector] 📊 Триггер кастомных событий (82%)
ℹ️ [DynamicContentDetector] ⚡ Триггер кастомных событий
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (2 новых узла)
Прогресс: 91% — Финальная проверка
ℹ️ [DynamicContentDetector] 📊 Финальная проверка (91%)
ℹ️ [DynamicContentDetector] 🏁 Финальная проверка
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (2 новых узла)
ℹ️ [DynamicContentDetector] 📈 Обработано элементов: 6
ℹ️ [DynamicContentDetector] 🔍 Обнаружено скрытых: 20
✅ [DynamicContentDetector] ✅ Автоматический обход завершен успешно
🎉 Обход завершен!
Результаты: {
processedElements: 6,
discoveredElements: 20,
errors: [],
finalElementCount: 139,
newElementsFound: 0
}
После завершения работы Dynamic Content Detector формируется детальный отчёт в консоли браузера, который помогает понять, как именно скрипт обошёл страницу и какие элементы он «увидел». Ниже — пояснение ключевых секций этого отчёта:
-
Запуск и финал
🚀 Запуск автоматического обхода элементов…— старт процесса.✅ Автоматический обход завершен успешно— конец работы без критических ошибок.
-
Прогресс-бар Для каждого шага выводится строка вида
Прогресс: XX% — Название этапа ℹ️ [DynamicContentDetector] 📊 Название этапа (XX%)Это позволяет в реальном времени визуализировать, на каком этапе сканирования находится скрипт и сколько процентов общего процесса уже выполнено.
-
Шаги взаимодействия
- Симуляция размеров экрана (
📱 Симуляция Mobile Portrait (320×568)и т. д.) - Hover-эффекты (
🖱️ Обработка N hover-элементов) - Клики (
👆 Взаимодействие с кликабельными элементами) - Формы (
📝 Обработка N элементов форм) - Прокрутка (
📜 Выполнение прокрутки страницы) - Клавиатура (
⌨️ Симуляция клавиатурной навигации) - Медиа (
🎬 Обработка N медиа-элементов) - Скрытые (
🔍 Поиск скрытых элементов) - Кастомные события (
⚡ Триггер кастомных событий) - Финальная проверка (
🏁 Финальная проверка)
- Симуляция размеров экрана (
-
Обнаруженные изменения DOM Каждое появление новых узлов после действий логируется строкой
🐛 [DynamicContentDetector] 🔄 Обнаружены изменения DOM (+M новых узлов)Это означает, что интерактивные или лениво загружаемые компоненты были загружены или раскрыты, и скрипт учёл их селекторы.
-
Итоговая статистика В конце выводятся
📈 Обработано элементов: X 🔍 Обнаружено скрытых: Yгде
X— число элементов, с которыми скрипт взаимодействовал (hover, click, фокус и т. д.)Y— количество скрытых элементов, временно показанных и проанализированных.
-
Результаты метода
getResults()После текста отчёта JavaScript-объект выводится в консоль:{ processedElements: 6, discoveredElements: 20, errors: [], finalElementCount: 139, newElementsFound: 0 }
processedElements— сколько уникальных элементов было «затронуто» действиями.discoveredElements— сколько скрытых или динамических узлов было найдено.errors— список ошибок, возникших в процессе (пусто, если всё гладко).finalElementCount— итоговое число узлов DOM после всех действий.newElementsFound— разница между первоначальным и итоговым количеством узлов.
Такой отчёт даёт полную картину работы детектора: от пошагового выполнения до количественных результатов и помогает быстро выявить, какие части интерфейса требуют дополнительного внимания при очистке CSS.
Краулер (SiteCrawler) автоматически проходит по всем внутренним страницам вашего сайта, собирает все ссылки, проверяет их доступность и запускает Детектор на каждой странице сайта.
-
Инициализация
- Открывает локальную базу (IndexedDB) и создаёт в ней хранилище ссылок.
- Считывает из IndexedDB флаг «краулер запущен/остановлен», чтобы при перезагрузке страницы продолжить с того же места.
-
Запуск обхода
- Пользователь кликает «Краулер». Краулер отмечает начало сессии, сбрасывает счётчики и сохраняет статус.
- Обрабатывает первую страницу (например, главную): собирает все внутренние ссылки, очищает их от трекинг-параметров, сохраняет в базу как «ожидающие обработки».
-
Рекурсивный обход
- Берёт из базы следующую ссылку «pending», проверяет её доступность (быстрый HEAD-запрос с 10-секундным таймаутом).
- Если страница доступна — переходит на неё, повторяет сбор ссылок и (при включённом детекторе динамики) эмулирует клики и hover-эффекты.
- Если есть перенаправление (редирект), сохраняет новый адрес, а исходный помечает как «redirect_processed».
- После обработки помечает URL как «completed» и берёт следующую.
- Для многостраничных сайтов можно запустить обход в нескольких вкладках, при открытии вкладки краулер запустится автоматически.
-
Остановка и возобновление
- Пользователь может в любой момент нажать «Краулер» — краулер корректно сохранит текущий прогресс.
- При повторном нажатии «Краулер» продолжит обход только по необработанным ссылкам.
-
Финальная статистика
-
После обработки всех ссылок выводится сводка:
- Всего найдено URL
- Обработано страниц
- Ожидают обработки
- Количество ошибок
-
Ниже — пример сообщений из консоли, которые выводит Crawler при работе. Они сгруппированы по ключевым этапам:
🕷️ [SiteCrawler] 🔄 Продолжение работы краулера после перезагрузки
🕷️ [SiteCrawler] 🕷️ Crawler инициализирован
🕷️ SiteCrawler готов к работе
🕷️ [SiteCrawler] 🔍 Обработка текущей страницы...
🕷️ [SiteCrawler] 🔗 Найдено 1 ссылок на странице
🐛 [SiteCrawler] 🔄 Пропуск текущей страницы: https://site.ru/
🕷️ [SiteCrawler] 🔍 Проверка доступности 0 новых URL
🕷️ [SiteCrawler] 🔗 Найдено 0 уникальных ссылок
🕷️ [SiteCrawler] ✅ Проверено на доступность: 0
🕷️ [SiteCrawler] 💾 Сохранено в базу: 0 новых URL
🕷️ [SiteCrawler] 🤖 Запуск динамического детектора...
🕷️ [SiteCrawler] ✅ Детектор завершил работу
🕷️ [SiteCrawler] 📊 Текущий статус: обработано 3 страниц
🕷️ [SiteCrawler] ✅ Краулинг завершен - все доступные страницы обработаны
🕷️ [SiteCrawler] 🛑 Остановка краулера...
🕷️ [SiteCrawler]
🕷️ СТАТИСТИКА КРАУЛЕРА:
━━━━━━━━━━━━━━━━━━━━━━
📊 Всего найдено URL: 3
✅ Обработано страниц: 2
⏳ Ожидают обработки: 0
🚫 Ошибок: 0
⏱️ Сессия завершена
-
Продолжение после перезагрузки
🕷️ [SiteCrawler] 🔄 Продолжение работы краулера после перезагрузки 🕷️ [SiteCrawler] 🕷️ Crawler инициализирован SiteCrawler готов к работе- Появляется, если плагин перезагрузился во время активной сессии.
- Краулер восстанавливает флаги (isRunning, crawledCount и т. д.) и подготавливается к дальнейшему обходу.
-
Обработка стартовой страницы
🕷️ [SiteCrawler] 🔍 Обработка текущей страницы... 🕷️ [SiteCrawler] 🔗 Найдено 1 ссылок на странице 🐛 [SiteCrawler] 🔄 Пропуск текущей страницы: https://…/- Сбор всех
<a>-ссылок на текущей странице. - Фильтрация: пропускаются уже посещённые или некорректные URL.
- Сбор всех
-
Проверка доступности и сохранение
🕷️ [SiteCrawler] 🔍 Проверка доступности 0 новых URL 🕷️ [SiteCrawler] 🔗 Найдено 0 уникальных ссылок 🕷️ [SiteCrawler] ✅ Проверено на доступность: 0 🕷️ [SiteCrawler] 💾 Сохранено в базу: 0 новых URL- HEAD-запросы к новым ссылкам (таймаут 10 с).
- Сохранение только тех, которые успешно ответили и прошли фильтры.
-
Интеграция с детектором динамики
🕷️ [SiteCrawler] 🤖 Запуск динамического детектора... 🕷️ [SiteCrawler] ✅ Детектор завершил работу- По окончании сбора ссылок краулер запускает
DynamicContentDetector(если включён). - Детектор эмулирует hover/клики и возвращает новые узлы DOM для последующей обработки.
- По окончании сбора ссылок краулер запускает
-
Промежуточный статус
🕷️ [SiteCrawler] 📊 Текущий статус: обработано 3 страниц- Регулярный отчёт о количестве уже обработанных страниц из сессии.
- Помогает отслеживать прогресс без выхода из консоли.
-
Завершение и остановка
🕷️ [SiteCrawler] ✅ Краулинг завершен - все доступные страницы обработаны 🕷️ [SiteCrawler] 🛑 Остановка краулера...- Появляется, когда в базе нет больше «pending» URL.
- Краулер корректно завершает сессию и переводит флаг
isRunningвfalse.
-
Финальная статистика
🕷️ СТАТИСТИКА КРАУЛЕРА: 📊 Всего найдено URL: 3 ✅ Обработано страниц: 2 ⏳ Ожидают обработки: 0 🚫 Ошибок: 0 ⏱️ Сессия завершена- Общее число найденных ссылок.
- Количество успешно обработанных страниц.
- Оставшиеся в очереди и количество ошибок.
- Выгруженные данные можно экспортировать для генерации sitemap или анализа «мертвого» CSS.
Такой отчёт в консоли даёт веб-мастерам и QA-инженерам полное представление о ходе работы краулера, его успехах и возможных проблемах, без необходимости читать исходный код.
• Останавливает работу краулера (если он запущен).
• Удаляет всю базу IndexedDB (CRAWLER_DB_NAME).
• Очищает ключ состояния (CRAWLER_STATUS_KEY) в localStorage.
• Сбрасывает внутренние счётчики (количество обработанных страниц, очередь ссылок и т. д.).
• Возвращает краулер к чистому состоянию, как при первом запуске плагина.
При выборе этой команды сервер запускает процедуру замены текущих CSS файлов на сгенерированные файлы.
- Подтверждение операции: перед отправкой запроса пользователь видит браузерное окно подтверждения, которое предупреждает о безвозвратности действия.
- Уведомления о статусе: в UI появляется информационное сообщение («Выполняется замена…»), затем — либо сообщение об успешной замене, либо текст ошибки, полученной от сервера.
- Обработка ответов: после получения ответа приложение проверяет код статуса. Детали обработанных файлов и предупреждения о некритичных ошибках выводятся в консоль для дальнейшего анализа.
Этот пункт инициирует запрос чтобы получить список доступных резервных архивов. После успешного ответа — пользователь видит модальное окно со списком бэкапов:
- Выбор и фильтрация: резервные копии можно искать по имени или дате, после чего список динамически фильтруется.
- Детализация: для каждой копии отображаются имя, метка времени создания и число файлов в архиве.
- Восстановление: при клике на кнопку «Восстановить» для выбранного бэкапа показывается подтверждающее окно с информацией о том, что текущие файлы будут перезаписаны. По итогу пользователю показывается уведомление об успехе или ошибке, а подробности (список восстановленных файлов и возможные сбои) логируются в консоль.
Обе команды интегрированы в единый интерфейс через динамический выпадающий список и используют унифицированный механизм уведомлений и обработки ошибок, что обеспечивает консистентность UX и удобство мониторинга операций.
- PHP: версия 7.4 или выше
- Composer: для установки зависимостей
- sabberworm/php-css-parser: библиотека для парсинга CSS
- Веб-сервер: с поддержкой PHP (Apache, Nginx)
- Права доступа: запись в директорию проекта для создания файлов
После анализа вашего сайта инструмент предоставляет:
- Индивидуальные очищенные CSS файлы - готовые к замене оригинальных файлов
- Объединенный минифицированный файл - для максимальной производительности
- Подробный отчет - с точными цифрами экономии и оптимизации
- Файл конфигурации - для повторного анализа и обновления данных
Использование этого инструмента поможет вам достичь высоких показателей в Google PageSpeed Insights и существенно улучшить пользовательский опыт вашего веб-сайта за счет более быстрой загрузки страниц.
- PHP 7.4+ с поддержкой JSON
- Composer для установки зависимостей
- Веб-сервер с поддержкой PHP
composer require sabberworm/php-css-parser- Скачайте файлы
remove-unused-css.php,remove-unused-css.js,composer.json - Поместите в корень вашего проекта или создайте отдельную директорию
- Установите зависимость sabberworm/php-css-parser
Для ограничения доступа в подкаталоге можно воспользоваться средствами .htaccess
Order Deny,Allow
Deny from all
Allow from 123.123.123.123
Добавьте скрипт перед закрывающим тегом </body>:
<script src="/remove-unused-css/remove-unused-css.js"></script>Для ограничения доступа в подкаталоге можно воспользоваться средствами PHP
if ($_SERVER['REMOTE_ADDR'] == '123.123.123.123') {
echo '<script src="/remove-unused-css/remove-unused-css.js"></script>';
}Убедитесь, что PHP-скрипт имеет права на:
- Чтение CSS-файлов вашего сайта
- Создание директории
data/для сохранения данных - Создание директории
css/для выходных файлов
ваш-проект/
├── remove-unused-css/
│ ├── remove-unused-css.php # Серверный обработчик
│ ├── remove-unused-css.js # Клиентский скрипт
│ ├── data/
│ │ └── selectors.json # База данных селекторов
│ │ └── settings.json # Настройки
│ ├── css/ # Очищенные CSS-файлы
│ │ ├── styles/
│ │ │ └── main.css # Очищенная версия
│ │ ├── bootstrap/
│ │ │ └── bootstrap.min.css # Очищенная версия
│ │ └── remove-unused-css.min.css # Объединенный файл
│ ├── backup # Резервные копии
Содержит мастер-список всех селекторов:
"assets\/components\/ajaxform\/css\/default.css": {
"selectors": {
".af-message-success": "unused",
".af-message-error": "unused",
".af-message-info": "unused",
},
"keyframes": [],
"font_faces": [],
"counter_styles": []
},JSON-файл выступает как мастер-хранилище для всех найденных селекторов CSS, сгруппированных по исходным файлам. Для каждого CSS-файла хранится карта селектор → статус (used/unused/unknown), а также списки найденных ключевых правил (keyframes, font-faces, counter-styles).
- Сохранять результаты сканирования: какие селекторы встречены при обходе страниц, а какие не были задействованы.
- Обеспечивать накопление статистики между сессиями: новые запуски анализатора дополняют или обновляют текущие статусы, не теряя уже полученные данные.
- Служить основой для последующей обработки:
- В режиме
Убираем все неиспользуемыепри генерации очищенных CSS удаляются только те селекторы, которые в JSON имеют статусunused, при этом учитываются исключения по настройкам. - В режиме
Убираем всё кроме используемыхпри генерации очищенных CSS остаются только те селекторы, которые в JSON имеют статусused, при этом учитываются исключения по настройкам.
- В режиме
- При каждом обходе страницы (клиентский скрипт) собирает применяемые селекторы и отправляет на сервер обновлённые данные.
- На сервере происходит объединение: для каждого файла в
selectors.jsonотмечаются селекторы, которые встретились (меняют статус наused), а отсутствующие после прежних запусках остаются или помечаются какunusedилиunknown. - JSON-структура позволяет легко расширять информацию (например, добавлять метаданные или новые категории правил), сохраняя обратную совместимость.
- От этого файла зависит, какие селекторы будут удалены при генерации: корректность и полнота данных в JSON напрямую влияют на безопасность очистки.
- При повреждении или некорректном формате JSON возможны сбои генерации; важно резервировать и валидировать файл перед изменениями.
- Гибкая структура позволяет добавлять новые поля (например, метки времени последнего использования) без изменения основного механизма.
// Интервал (в миллисекундах) между проверками/сканированием страницы
CHECK_INTERVAL: 1000,
// Путь до серверного скрипта, обрабатывающего запросы по сохранению и генерации CSS
SERVER_ENDPOINT: '/remove-unused-css/remove-unused-css.php',
// HTML-ID кнопки, по клику на которую начинается процесс поиска неиспользуемых селекторов
BUTTON_ID: 'unused-css-button',
// HTML-ID контейнера, в котором отображается меню с результатами и дополнительными действиями
MENU_ID: 'unused-css-menu',
// HTML-ID блока настроек фильтрации (какие правила/селекторы сохранять)
SETTINGS_ID: 'unused-css-settings',
CRAWLER_DB_NAME: 'SiteCrawlerDB', // Имя базы данных для хранения информации о сканировании
CRAWLER_DB_VERSION: 1, // Версия базы данных для IndexedDB
CRAWLER_STORE_NAME: 'crawled_urls', // Имя хранилища для сохранения информации о сканированных URL
CRAWLER_STATUS_KEY: 'crawler_status', // Ключ для хранения статуса сканирования в IndexedDB
MAX_CRAWL_DEPTH: 5, // Максимальная глубина сканирования ссылок на сайте
CRAWL_DELAY: 3000, // Задержка между запросами при сканировании сайта (в миллисекундах)
MAX_URLS_PER_SESSION: 1000, // Максимальное количество URL для обработки за одну сессию сканирования
TAB_HEARTBEAT_INTERVAL: 5000, // Интервал (в миллисекундах) для heartbeat-сообщений между вкладками
URL_LEASE_TIMEOUT: 30000, // Таймаут (в миллисекундах) для блокировки URL (если вкладка не отвечает)
MAX_RETRY_COUNT: 3, // Максимальное количество попыток повторной обработки URL при ошибках
BATCH_SIZE: 5, // Размер батча для обработки URL (количество URL за один запрос)
SYNC_CHANNEL: 'sitecrawler_sync', // Канал для синхронизации между вкладками
TAB_STORE_NAME: 'active_tabs', // Имя хранилища для активных вкладок в IndexedDB
LOCK_STORE_NAME: 'url_locks' // Имя хранилища для блокировок URL в IndexedDB
PARSE_CSS_IMPORTS: true, // Включить парсинг @import директив
MAX_IMPORT_DEPTH: 10 // Максимальная глубина вложенности импортов Набор констант, определяющих поведение клиентской части (скриптов в браузере). Включают адрес сервера, идентификаторы DOM-элементов для UI и параметры краулера (SiteCrawler) для обхода страниц.
- CHECK_INTERVAL: как часто (в миллисекундах) проверять состояние страницы и запускать анализатор селекторов.
- SERVER_ENDPOINT: конечная точка для отправки данных сканирования и запроса на генерацию очищенных CSS.
- BUTTON_ID, MENU_ID, SETTINGS_ID: привязка к элементам интерфейса управления анализатором и настройками.
- CRAWLER_ и связанные*: конфигурация IndexedDB и логики многовкладочного краулинга: глубина обхода, задержки, таймауты блокировок URL, максимальное количество URL за сессию, синхронизация между вкладками.
- При загрузке страницы скрипт подхватывает
CHECK_INTERVALдля периодической проверки новых элементов или динамических изменений (MutationObserver и т. п.). - Взаимодействие с сервером осуществляется через
SERVER_ENDPOINT: при сохранении селекторов и при запуске генерации CSS. - Краулер использует IndexedDB (имена из констант) для хранения очереди URL: контролирует глубину (
MAX_CRAWL_DEPTH), задержки (CRAWL_DELAY), количество одновременно обрабатываемых адресов (BATCH_SIZE), механизмы блокировки URL между вкладками (URL_LEASE_TIMEOUT,SYNC_CHANNELи т. д.).
- Неправильно настроенный
CHECK_INTERVALможет либо увеличить нагрузку на страницу (слишком частые проверки), либо пропускать динамические события (слишком редкие). - Ошибки в
SERVER_ENDPOINTприведут к невозможности сохранения данных или генерации CSS. - Параметры краулера влияют на скорость и полноту обхода сайта: слишком большая глубина или слишком короткие задержки могут вызвать нагрузку на сервер или блокировки со стороны сайта; слишком консервативные — приведут к неполному сбору ссылок.
- Корректное именование и согласованность ключей IndexedDB важны для восстановления состояния при перезагрузке вкладки.
// Задержки между действиями (мс)
mouseDelay: 150, // пауза после hover-эффекта
clickDelay: 300, // пауза после клика
inputDelay: 200, // пауза после ввода в поля
scrollDelay: 500, // пауза после прокрутки страницы
observerDelay: 1000, // пауза между срабатываниями MutationObserver
// Глубина вложенности для поиска новых элементов
maxDepth: 10, // сколько уровней вложенности проверяем
// Максимальное время ожидания динамического контента
maxWaitTime: 5000, // максимально ждём появления контентаНабор констант, регулирующих временные параметры эмуляции действий и ожидания динамики на странице.
- mouseDelay, clickDelay, inputDelay, scrollDelay: задают интервалы между последовательными эмуляциями пользовательских действий, чтобы дать DOM-взаимодействиям завершиться и потенциально загрузить новые элементы.
- observerDelay: определяет частоту проверок через MutationObserver, чтобы фиксировать добавленные или изменённые узлы.
- maxDepth: ограничивает глубину рекурсивного поиска вложенных элементов при обходе дерева DOM.
- maxWaitTime: ограничивает общее время ожидания появления динамического контента, чтобы не застревать на страницах с долгой загрузкой.
- При активации эмуляции скрипт последовательно выполняет hover, клики, ввод и прокрутку, дожидаясь завершения соответствующих задержек.
- MutationObserver запускается с интервалом
observerDelay, отслеживая добавление новых узлов. - Если в процессе появляются новые элементы, обход продолжается до достижения
maxDepthили пока не выйдетmaxWaitTime. - Если контент не появился за
maxWaitTime, скрипт переходит к следующему этапу или завершает обход.
- Меньшие значения задержек ускоряют процесс, но могут не давать странице достаточно времени на загрузку динамики, что приведёт к пропуску селекторов.
- Слишком большие задержки замедляют сканирование и могут привести к таймаутам или блокировкам сервера.
- Неправильный
maxDepthможет ограничить обнаружение вложенных динамических компонентов или, наоборот, вызвать чрезмерную глубину обхода без необходимости. maxWaitTimeдолжен соответствовать реалиям приложения: при долгих AJAX-запросах его можно увеличить, но нужно учитывать общую производительность.
// Включить/отключить типы взаимодействий
enableHover: false, // эмулировать наведение курсора
enableClick: false, // эмулировать клики (false — без кликов)
enableFocus: true, // эмулировать фокус на элементах
enableScroll: true, // эмулировать прокрутку
enableResize: true, // эмулировать изменение размеров окна
enableKeyboard: true, // эмулировать клавиатурные события
disableNavigation: true, // блокировать реальные переходы по ссылкам
// Дополнительные настройки
simulateDeviceResize: true, // менять viewport для разных устройств
triggerCustomEvents: true, // триггерить события load, scroll, resize и др.
checkInvisibleElements: true, // проверять скрытые элементы (display:none)
// Колбэки для отслеживания прогресса
onProgress: null, // вызывается при каждом шаге сканирования
onComplete: null, // вызывается по завершении всего обхода
onError: null, // вызывается при ошибках во время сканирования
autoSave: true, // сохранять автоматически неиспользуемые правила по завершении всего обхода
Флаги и колбэки, управляющие тем, какие типы взаимодействий эмулировать, и как реагировать на этапы процесса.
- enableHover, enableClick, enableFocus, enableScroll, enableResize, enableKeyboard: включают или отключают соответствующие эмуляции (hover, клики, фокусировка, прокрутка, изменение размеров, клавиатурная навигация).
- disableNavigation: запрещает переходы по реальным ссылкам при эмуляции, чтобы оставаться на текущей странице.
- simulateDeviceResize: включает эмуляцию разных размеров экрана (mobile/desktop) для учёта медиа-запросов.
- triggerCustomEvents: генерирует события (
load,resize,scrollи др.) для правильной работы скриптов на странице. - checkInvisibleElements: проверяет скрытые элементы (display:none и т. п.), временно показывая их для фиксации селекторов.
- onProgress, onComplete, onError: колбэки для отслеживания состояния сканирования извне (например, для UI-индикации прогресса).
- autoSave: автоматически сохранять обнаруженные селекторы в
selectors.jsonпосле завершения обхода.
- В настройках включаются только нужные виды эмуляции; скрипт выполняет действия в заданном порядке, проверяя задержки и отслеживая новые узлы.
- Если
disableNavigation=true, при клике на ссылки скрипт эмулирует вызов, но не переходит по адресу; это важно для «безопасного» тестирования. - Эмуляция разных устройств (
simulateDeviceResize) переключает размеры viewport и инициирует повторные проверки селекторов под разными медиа-условиями. - При каждом важном событии вызываются соответствующие колбэки, если они заданы, что позволяет UI или внешним модулям реагировать на прогресс или ошибки.
- Некорректное сочетание флагов может пропустить важные сценарии (например, если
enableClick=false, некоторые динамические компоненты не откроются). - Если
disableNavigation=false, возможны нежелательные переходы по внешним ссылкам, что нарушит контроль над сессией сканирования. autoSaveупрощает работу, но в некоторых случаях может приводить к частым записям в файл данных; при большом объёме данных стоит предусмотреть буферизацию или ручное сохранение.
interactive: [ // Элементы, с которыми можно взаимодействовать
'button', 'input', 'textarea', 'select', 'a[href]', // основные интерактивные элементы
'[onclick]', '[onmouseover]', '[onmouseenter]', '[onmouseleave]', // события клика и наведения
'[onfocus]', '[onblur]', '[onchange]', '[onsubmit]', // события фокуса и изменения
'[tabindex]:not([tabindex="-1"])', '[role="button"]', // элементы с tabindex и ролью кнопки
'[role="tab"]', '[role="menuitem"]', '[role="link"]', // дополнительные роли
'.btn', '.button', '.link', '.clickable' // популярные классы для кнопок и ссылок
],
stateful: [ // Элементы с изменяемым состоянием
'.active', '.selected', '.expanded', '.collapsed', '.open', '.closed',
'.visible', '.hidden', '.show', '.hide', '.current', '.disabled',
'.focus', '.hover', '.pressed', '.checked', '.loading'
],
components: [ // Компоненты и виджеты
'.modal', '.popup', '.dropdown', '.tooltip', '.accordion', '.tab',
'.slider', '.carousel', '.gallery', '.menu', '.navbar', '.sidebar',
'.overlay', '.dialog', '.panel', '.card', '.widget', '.component',
'.swiper', '.slick', '.owl-carousel', '.splide'
],
hoverable: [ // Элементы, на которые можно навести курсор
'a[href]', 'button', '.btn', '.button', '.link', '.hover',
'[title]', '.menu-item', '.nav-item', '.card', '.thumbnail',
'img[src]', '.image', '.photo', '.gallery-item',
'.product', '.service', '.feature'
],
forms: [ // Элементы форм и ввода данных
'input[type="text"]', 'input[type="email"]', 'input[type="password"]',
'input[type="number"]', 'input[type="tel"]', 'input[type="url"]',
'input[type="search"]', 'input[type="checkbox"]', 'input[type="radio"]',
'input[type="range"]', 'input[type="date"]', 'input[type="time"]',
'textarea', 'select', 'form', '[contenteditable="true"]'
],
media: [ // Медиа элементы
'video', 'audio', 'iframe', 'object', 'embed',
'.video-player', '.audio-player', '.media-container',
'.youtube-player', '.vimeo-player', '.video-wrapper'
]
Категории CSS-селекторов, определяющие, какие элементы считать «интересными» для эмуляции взаимодействия и динамического анализа.
- interactive: базовые элементы, с которыми обычно взаимодействуют (кнопки, ссылки, поля ввода).
- stateful: элементы с меняющимся состоянием (active, expanded, hidden и т. п.), требующие проверки изменения стилей при переходах состояния.
- components: часто используемые UI-компоненты (модалки, dropdown, tooltip и др.), которые могут загружаться динамически или требовать особой обработки.
- hoverable: элементы, на которые имеет смысл наводить курсор для проверки псевдо-классов hover/focus и динамики появления потомков.
- forms: поля и формы, которые при вводе могут показывать подсказки, валидацию и прочую динамику.
- media: мультимедийные элементы, которые могут загружать ресурсы или влиять на DOM (video, audio, iframe).
- Скрипт находит элементы по этим селекторам и последовательно эмулирует взаимодействия: hover для
hoverable, клик дляinteractive, фокус/ввод дляformsи т. д. - При обнаружении новых элементов (через MutationObserver) аналогично проверяет их по этим спискам.
- Эти группы упрощают конфигурацию: разработчик может расширять или сокращать список селекторов для оптимизации скорости или глубины анализа.
- Неполный или избыточный список приведёт либо к пропуску важных сценариев (селекторы не включены), либо к избыточной нагрузке (слишком много элементов обрабатывается).
- Грамотное разделение на категории облегчает отладку и тонкую настройку: если некоторые элементы система не охватывает, их можно добавить в соответствующую группу.
- Взаимосвязь с параметрами эмуляции: даже если селектор есть в списке, но соответствующий
enableClick=false, эмуляция не произойдёт.
// Формы и кнопки отправки
'[type="submit"]',
'input[type="submit"]',
'button[type="submit"]',
'form button:not([type])', // кнопки в формах без типа (по умолчанию submit)
// Деструктивные действия
'.delete', '.remove', '.destroy', '.clear',
'.logout', '.signout', '.sign-out', '.exit',
'.cancel', '.close', '.dismiss', '.reject',
'.unsubscribe', '.disable', '.deactivate',
// Ссылки с деструктивными действиями
'a[href*="delete"]', 'a[href*="remove"]',
'a[href*="logout"]', 'a[href*="signout"]',
'a[href*="exit"]', 'a[href*="unsubscribe"]',
'a[href*="cancel"]', 'a[href*="destroy"]',
// JavaScript обработчики
'[onclick*="delete"]', '[onclick*="remove"]',
'[onclick*="destroy"]', '[onclick*="logout"]',
'[onclick*="submit"]', '[onclick*="window.open"]',
// Дата-атрибуты
'[data-action*="delete"]', '[data-action*="remove"]',
'[data-action*="destroy"]', '[data-action*="logout"]',
'[data-action*="submit"]', '[data-method="delete"]',
// Специальные роли
'[role="button"][aria-label*="delete"]',
'[role="button"][aria-label*="remove"]'
Расширенный список деструктивных селекторов
// Формы и кнопки отправки
'[type="submit"]',
'input[type="submit"]',
'button[type="submit"]',
'form button:not([type])', // кнопки в формах без типа (по умолчанию submit)
// Деструктивные действия
'.delete', '.remove', '.destroy', '.clear',
'.logout', '.signout', '.sign-out', '.exit',
'.cancel', '.close', '.dismiss', '.reject',
'.unsubscribe', '.disable', '.deactivate',
// Ссылки с деструктивными действиями
'a[href*="delete"]', 'a[href*="remove"]',
'a[href*="logout"]', 'a[href*="signout"]',
'a[href*="exit"]', 'a[href*="unsubscribe"]',
'a[href*="cancel"]', 'a[href*="destroy"]',
// JavaScript обработчики
'[onclick*="delete"]', '[onclick*="remove"]',
'[onclick*="destroy"]', '[onclick*="logout"]',
'[onclick*="submit"]', '[onclick*="window.open"]',
// Дата-атрибуты
'[data-action*="delete"]', '[data-action*="remove"]',
'[data-action*="destroy"]', '[data-action*="logout"]',
'[data-action*="submit"]', '[data-method="delete"]',
// Специальные роли
'[role="button"][aria-label*="delete"]',
'[role="button"][aria-label*="remove"]'
расширенный список
'delete', 'remove', 'destroy', 'clear', 'reset',
'logout', 'log out', 'sign out', 'signout', 'exit',
'cancel', 'close', 'dismiss', 'reject', 'decline',
'unsubscribe', 'disable', 'deactivate', 'suspend',
'submit', 'send', 'post', 'save', 'update',
'buy', 'purchase', 'order', 'checkout', 'pay',
'download', 'install', 'upgrade'
Наборы CSS-селекторов и ключевых слов, относящихся к действиям, которые потенциально могут приводить к деструктивным операциям на сайте (удаление, выход, сброс, отправка и т. д.). Используются для предотвращения эмуляции кликов или других взаимодействий с такими элементами.
- Обнаруживать и исключать из автоматического эмулятора элементы, ведущие к нежелательным изменениям (удаление данных, выход из сессии, отправка форм, переходы).
- Повышать безопасность при сканировании: если элемент совпадает с деструктивным паттерном, скрипт пропускает его или обрабатывает только частично (например, предотвращая реальный клик).
- Предотвращать случайное срабатывание операций, которые изменяют данные на сервере, логаут пользователя или другие критические действия.
- Перед эмуляцией клика или другого действия скрипт проверяет, соответствует ли селектор или содержимое элемента одному из паттернов из списка.
- Если совпадение найдено, эмуляция либо пропускается, либо выполняется «безопасно» (например, с отменой перехода или подтверждением).
- Дополнительно могут использоваться «белые списки» для исключения ложных срабатываний (если на сайте есть кнопка с классом
.delete, но она лишь открывает модалку с подтверждением).
- Чрезмерно широкий список деструктивных паттернов может пропускать элементы, которые не опасны, хуже покрывая сценарии: нужно балансировать обобщённость паттернов и конкретику проекта.
- Слишком узкий список рискует пропустить опасные действия во время автоматического обхода.
- Рекомендуется иметь возможность донастройки: добавлять или исключать селекторы под конкретный проект.
SELECTORS_FILE = 'data/selectors.json'; // Путь к JSON-файлу, где хранятся все найденные неиспользуемые селекторы
CSS_DIR = 'css/'; // Каталог, в который записываются очищенные (минимизированные) CSS-файлы
COMBINED_FILE = 'remove-unused-css.min.css'; // Имя объединённого файла со всеми минимизированными стилями
MAX_FILE_SIZE = 32 * 1024 * 1024; // Максимально допустимый размер обрабатываемого CSS-файла (32 МБ)
BACKUP_DIR = 'backup/'; // Каталог для бэкапов исходных CSS-файлов
SETTINGS_FILE = 'data/settings.json'; // Путь к JSON-файлу с пользовательскими настройками фильтрации
MAX_INPUT_SIZE = 16 * 1024 * 1024; // Максимальный размер JSON-пэйлоада (16 МБ)
JSON_DECODE_DEPTH = 512; // Максимальная глубина вложенности при декодировании JSON
CSS_MINIFY = true; // минимизировать individual файлы
CSS_COMBINED_MINIFY = true; // минимизировать объединённый файл
FIX_PATHS_INDIVIDUAL = true; // исправлять пути в отдельных очищенных файлах
FIX_PATHS_COMBINED = true; // исправлять пути в объединённом файле
INCLUDE_IMPORT_FILE_COMBINED = true; // включать @import файлы в объединённый файлКонстанты, определяющие пути к файлам, ограничения по размеру обрабатываемых данных и флаги для минификации/коррекции путей при серверной части (PHP).
- SELECTORS_FILE: файл, где хранится JSON с результатами сканирования селекторов.
- CSS_DIR: каталог, куда записываются очищенные (минимизированные) CSS-файлы.
- COMBINED_FILE: имя объединённого итогового CSS-файла для продакшен-использования.
- MAX_FILE_SIZE: ограничение на максимальный размер входного CSS-файла (защита от слишком больших файлов).
- BACKUP_DIR: папка для резервных копий оригинальных CSS перед обновлением.
- SETTINGS_FILE: путь к JSON с настройками фильтрации (какие типы правил защищены и т. д.).
- MAX_INPUT_SIZE: ограничение на объём JSON-поля в запросе (позволяет защититься от слишком больших payload).
- JSON_DECODE_DEPTH: глубина вложенности при парсинге JSON; предотвращает слишком глубокие структуры.
- CSS_MINIFY, CSS_COMBINED_MINIFY: включение минификации для отдельных и объединённого CSS.
- FIX_PATHS_INDIVIDUAL, FIX_PATHS_COMBINED: флаги корректировки путей в очищенных файлах, чтобы ресурсы (изображения, шрифты) правильно ссылались после перемещения.
-
При запросе генерации сервер читает
SELECTORS_FILE, парсит CSS через Sabberworm, удаляет «мертвые» селекторы, затем:- Парсит AST и удаляет правила по данным JSON.
- Если
FIX_PATHS_INDIVIDUAL=true, корректирует относительные пути внутри каждого файла (например, если файл перемещается). - Если
CSS_MINIFY=true, выполняет минимизацию (удаление пробелов, комментариев). - Сохраняет результат в
CSS_DIRс сохранением структуры папок.
-
После обработки всех файлов, если
CSS_COMBINED_MINIFY=true, объединяет очищенные файлы в одинCOMBINED_FILE, корректирует пути при необходимости (FIX_PATHS_COMBINED). -
Валидация: проверяет размеры входного CSS (не превышают
MAX_FILE_SIZE) и объём JSON-пайлоада (не превышаетMAX_INPUT_SIZE). -
При парсинге JSON используется глубина
JSON_DECODE_DEPTH, чтобы избежать атак через глубоко вложенные структуры. -
Все операции логируются или возвращают метрики (байты до/после, количество удалённых селекторов), которые клиент отображает в UI.
- Неправильные пути (
SELECTORS_FILE,CSS_DIR) или права доступа к директориям приведут к сбоям при сохранении или создании файлов. - Ограничения по размерам (
MAX_FILE_SIZE,MAX_INPUT_SIZE) защищают сервер, но при работе с очень большими проектами могут потребовать увеличения. - Минификация и исправление путей важны для продакшен-готовности: без них очищенные файлы могут работать некорректно.
- Тщательно протестируйте значения задержек и глубины для вашего сайта: динамический контент может загружаться дольше, чем базовые задержки.
- Настройте списки селекторов и деструктивных паттернов под особенности проекта: универсальные списки — хорошая отправная точка, но могут потребоваться правки.
- Обеспечьте корректные права на директории для PHP:
data/,css/,backup/. - Регулярно проверяйте и резервируйте
selectors.jsonиsettings.json, чтобы иметь возможность восстановить состояние. - Настройте логику краулера (MAX_CRAWL_DEPTH, CRAWL_DELAY и т. д.) в зависимости от объёма сайта и ограничений сервера: слишком агрессивный обход может вызвать нагрузку или блокировки, слишком медленный — не соберёт полный список страниц.
В браузере:
// Состояние всего приложения
console.log(window.unusedCSSState);
// Карта неиспользуемых селекторов
console.log(window.unusedCSSState.unusedSelectors);
// Информация по каждому CSS-файлу
console.log(window.unusedCSSState.styleSheetsInfo);Используйте эти вызовы для диагностики раннеров, проверки динамики изменения DOM и отлова «тёмных лошадок» — редких селекторов, которые могут иногда проявляться.
- Запускайте анализ после каждого крупного обновления CSS
- Повторяйте процесс при добавлении новых страниц или компонентов
- Ведите версионность очищенных файлов
- Тщательно протестируйте сайт после внедрения очищенных файлов
- Проверьте все интерактивные элементы и состояния
- Используйте инструменты автоматического тестирования интерфейса
- Всегда сохраняйте оригинальные CSS-файлы
- Используйте систему контроля версий
- Документируйте изменения и их влияние на производительност
Обнаружить CSS правила, которые анализатор не может автоматически определить как используемые, но которые активно применяются на сайте в различных условиях и состояниях.
- Нажмите
F12илиCtrl+Shift+I(Windows/Linux) /Cmd+Opt+I(Mac) - Или ПКМ → "Проверить элемент"
- Откройте Device Toolbar:
Ctrl+Shift+Mили кнопка 📱 в DevTools - В списке устройств выберите "Edit..." для добавления кастомных разрешений
- Desktop: 1920x1080, 1366x768, 1440x900
- Laptop: 1280x800, 1024x768
- Tablet Portrait: iPad (768x1024), iPad Pro (834x1194)
- Tablet Landscape: iPad (1024x768), iPad Pro (1194x834)
- Mobile Portrait: iPhone SE (375x667), iPhone 12 (390x844), Galaxy S20 (360x800)
- Mobile Landscape: поверните устройства на 90°
- Ultra-wide: 2560x1080, 3440x1440
- 4K: 3840x2160
- Очень узкие: 320x568, 280x653
- Очень широкие: 1920x400
- Проверьте промежуточные значения между основными breakpoints
- Тестируйте на 1px до и после каждого @media breakpoint
- Проверьте
min-width,max-width,min-height,max-heightусловия
- Print Preview:
Ctrl+P→ проверьте @media print правила - Dark Mode: DevTools → Settings → Preferences → Emulate CSS media → prefers-color-scheme: dark
- Light Mode: prefers-color-scheme: light
- Motion: prefers-reduced-motion: reduce/no-preference
- High Contrast: forced-colors: active
- Наведите курсор на каждый интерактивный элемент:
- Кнопки, ссылки
- Поля ввода, селекты, чекбоксы
- Карточки товаров, блоки контента
- Иконки, логотипы
- Элементы навигации
- Используйте Tab для фокуса на элементах
- Проверьте состояния
:focus-visible,:focus-within
- :active - удерживайте клик на кнопках/ссылках
- :visited - перейдите по ссылкам, затем вернитесь
- :checked - отметьте чекбоксы и радиокнопки
- :disabled - если есть отключенные элементы
- :invalid/:valid - заполните формы корректно/некорректно
В Elements → Styles можно принудительно активировать состояния:
- Найдите элемент → ПКМ → Force state → :hover, :active, :focus, :visited
- Откройте все модальные окна на сайте
- Проверьте overlay/backdrop эффекты
- Тестируйте анимации открытия/закрытия
- Проверьте состояния loading внутри модалок
- Откройте все dropdown меню
- Разверните все аккордеоны/табы
- Проверьте вложенные подменю
- Тестируйте hover на элементах меню
- Прокликайте все слайды в каруселях
- Проверьте navigation dots/arrows
- Тестируйте auto-play состояния
- Проверьте состояния loading между слайдами
- Активируйте все фильтры на странице
- Проверьте состояния "активный фильтр"
- Тестируйте комбинации фильтров
- Проверьте состояния "нет результатов"
- Прокрутите страницу до самого низа для загрузки lazy images
- Проверьте placeholder состояния изображений
- Тестируйте video элементы (play/pause/loading)
- Проверьте состояния error для медиа
- Прокрутите до конца страницы несколько раз
- Проверьте loading состояния новых блоков
- Тестируйте skeleton screens
- Используйте поиск на сайте
- Загружайте контент через "Показать еще"
- Проверьте состояния loading/success/error
- Тестируйте автокомплит в формах
- Дождитесь завершения всех анимаций на странице
- Проверьте hover анимации
- Тестируйте scroll-triggered анимации
- Проверьте keyframes анимации
- Медленно прокрутите всю страницу
- Проверьте parallax фоны
- Тестируйте sticky элементы при скролле
- Проверьте scroll-snap поведение
В DevTools → Animations panel:
- Замедлите анимации для детального просмотра
- Проверьте все keyframes
- Обновите страницу и проверьте loading states
- Симулируйте медленное соединение (DevTools → Network → Slow 3G)
- Проверьте skeleton screens
- Тестируйте progress bars
- Заполните формы некорректными данными
- Проверьте offline состояния (DevTools → Network → Offline)
- Тестируйте 404 страницы
- Проверьте состояния "нет данных"
- Переключите все доступные темы оформления
- Проверьте настройки размера шрифта
- Тестируйте цветовые схемы
В DevTools → Settings → More tools → Rendering:
- Prefers-reduced-motion: reduce
- Prefers-color-scheme: dark/light
- Force media type: print
- Disable local fonts: для проверки fallback шрифтов
- DevTools → Performance → Record → взаимодействуйте со страницей
- Проверьте, какие CSS правила применяются во время анимаций
- DevTools → Coverage → Start recording
- Выполните все действия из чеклиста
- Сравните результаты с анализатором
- Найдите элементы с #shadow-root в Elements
- Проверьте стили внутри Shadow DOM
- Тестируйте CSS Custom Properties передаваемые в Shadow DOM
- Взаимодействуйте с кастомными элементами
- Проверьте :host и :host() селекторы
- Тестируйте ::slotted() селекторы
- Измените размеры контейнеров
- Проверьте @container правила
- Проверьте классы для активных состояний (.active, .open, .selected)
- Тестируйте loading классы (.loading, .pending)
- Проверьте error/success классы
- В Elements найдите элементы с style="" атрибутами
- Проверьте, не перекрываются ли они с CSS правилами
- Проверьте сгенерированные классы с хешами
- Тестируйте компоненты в различных состояниях
- Сделайте скриншоты проблемных состояний
- Запишите конкретные селекторы, которые должны быть исключены
- Укажите условия воспроизведения
- Добавьте найденные селекторы в настройки анализатора
- Повторите автоматический анализ
- Убедитесь, что критичные стили не удаляются
- Проверьте, что очищенные CSS файлы не ломают функциональность
- Тестируйте на всех найденных критичных состояниях
- Сравните визуальное отображение до/после очистки
- Анимациям и переходам (могут использовать keyframes)
- Hover эффектам на интерактивных элементах
- Модальным окнам и overlay
- Состояниям loading/error
- Медиа-запросам для мобильных устройств
- Print стилям
- Dark/Light режимам
- Состояниям форм (focus, invalid, valid)
⚡ Автоматизация части процесса:
- Используйте расширения для автоматического hover по элементам
- Настройте макросы для переключения между разрешениями
- Используйте Lighthouse для проверки accessibility состояний
📝 Документирование:
- Ведите таблицу найденных "ложно-неиспользуемых" селекторов
- Указывайте условия их активации
- Добавляйте комментарии к особо сложным случаям
Этот чеклист поможет QA инженеру систематически покрыть все возможные слепые зоны автоматического анализатора CSS и обеспечить корректную работу сайта после оптимизации стилей.