Использование CSS
Посмотрите объём и долю CSS, использованного при проверке, по странице и каждому источнику. Стили, неиспользованные в этом запуске, могут понадобиться после действий пользователя или на другой странице.
CSS-аудит сайта онлайн
Узнайте, сколько CSS загружает страница, какие стили использовались при проверке и где повторяются правила. Цвета, шрифты, слои и ошибки собраны в одном отчёте.
Формат результата
Отчёт показывает источники, метрики и сигналы CSS
Изучите размер и использование CSS, затем проверьте цвета, шрифты, слои и ошибки валидации.
Условные данные для знакомства с отчётом. Результат вашей страницы появится после проверки.
Источники стилей
Сравните внешние таблицы стилей со стилями внутри страницы. Для каждого источника указаны размер и объём кода, использованного или неиспользованного при проверке.
| Источник | Тип | Использование | Не используется |
|---|---|---|---|
| app.css | внешние | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | внешние | 32 KiB / 8 KiB | 8 KiB · 20% |
| встроенные стили | встроенные | 6 KiB / 2 KiB | 2 KiB · 25% |
- Источник
- app.css
- Тип
- внешние
- Использование
- 48 KiB / 72 KiB
- Не используется
- 72 KiB · 60%
- Источник
- components.css
- Тип
- внешние
- Использование
- 32 KiB / 8 KiB
- Не используется
- 8 KiB · 20%
- Источник
- встроенные стили
- Тип
- встроенные
- Использование
- 6 KiB / 2 KiB
- Не используется
- 2 KiB · 25%
Сначала найдите источник стилей и повторяющееся объявление. Проверьте, относятся ли повторы к одному компоненту и состоянию. Затем измените исходник и сравните отчёт после повторной проверки.
Что проверяем
Комплексный CSS-инвентарь вместо общих советов
В отчёте собраны источники и размеры стилей, использование кода, приоритет селекторов, повторяющиеся объявления, параметры оформления и ошибки валидации.
Размер и источники
Собираем общий размер CSS, количество stylesheet-источников и отдельно считаем inline и external stylesheets.
Специфичность селекторов
Сравните минимальную, среднюю и максимальную специфичность — вес селекторов, который влияет на приоритет правил. Самые сложные селекторы показаны отдельно.
Повторы и !important
Посмотрите число правил, селекторов и объявлений, повторяющиеся пары «свойство — значение» и примеры с !important.
Media queries и префиксы
Показываем самые частые media queries и количество CSS-свойств с vendor prefixes: -webkit-, -moz-, -ms- и -o-.
Цвета, шрифты, z-index и ошибки
Отчёт выводит уникальные color values, найденные font-family, числовые z-index и примеры ошибок CSS-валидации.
Как это работает
От URL до полной сводки CSS на странице
Введите адрес страницы. Milten откроет её в браузере, соберёт таблицы стилей и подготовит отчёт. Интеграция в сборку не требуется.
Загружаем страницу и собираем CSS
В отчёте указаны проверенный URL, дата и источники стилей. Стили внутри страницы показаны отдельно от внешних таблиц стилей.
Измеряем использование CSS и приоритет селекторов
Посмотрите, какая часть CSS использовалась, сколько найдено правил и объявлений и у каких селекторов наибольший вес.
Собираем таблицы для разбора CSS
Изучите повторы объявлений, !important, медиазапросы, префиксы браузеров, цвета, шрифты, слои и ошибки CSS.
FAQ
Частые вопросы о CSS-аудите
Ответы об использовании CSS, приоритете селекторов, !important, составе отчёта и времени проверки.
Как лишний CSS влияет на скорость?
Браузер загружает, парсит и применяет CSS до отрисовки страницы. Чем больше лишних правил, тем выше риск задержек в первом рендере и сложнее поддерживать интерфейс.
Зачем смотреть специфичность селекторов?
Специфичность помогает определить приоритет селектора при конфликте правил CSS. Селекторы с большим весом усложняют последующие изменения: для переопределения нужны более сильные правила.
Всегда ли нужно убирать !important?
Нет. !important меняет приоритет объявления и иногда нужен для явного переопределения. Отчёт показывает, где его стоит изучить. Проверьте каскад и состояния компонента перед заменой.
Какие данные будут в отчёте?
В отчёте есть URL и дата, источники и размеры стилей, использование кода, селекторы и их вес, повторы объявлений, !important, медиазапросы, префиксы браузеров, цвета, шрифты, слои и ошибки CSS.
Сколько занимает проверка страницы?
Обычно проверка одной страницы занимает меньше минуты. Время зависит от количества ресурсов, сетевых условий и того, насколько долго страница стабилизируется после загрузки.
Связанные сервисы
Что проверить рядом с этим сервисом
Проверка JavaScript
Проверьте файлы JavaScript, ошибки загрузки и код, неиспользованный при загрузке. Найдите скрипты, которые стоит изучить подробнее.
ОткрытьПроверка HTML
Найдите ошибки в HTML и слишком сложную структуру страницы. В отчёте указаны затронутые элементы.
ОткрытьПараметры оформления
Соберите цвета, шрифты, размеры и отступы страницы. Получите список параметров для работы с оформлением.
ОткрытьДоступность
Найдите проблемы доступности с помощью автоматической проверки. Получите рекомендации; полная оценка доступности также требует ручной проверки.
Открыть