KakapoWP KakapoWP
Вход Попробовать
Kakapo Performance

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

То, что нужно верхней части страницы, находится в head. Остальное подгружается после.

Для каждого шаблона какапо загружает реальную страницу-образец сайта, считывает с диска связанные с ней локальные таблицы стилей и проверяет каждое правило по документу. То, что нужно вверху, попадает инлайн в head; проанализированные таблицы стилей загружаются позже, не блокируя отрисовку. Браузер в этом не участвует: «видимое вверху» — это открыто заявленное приближение по порядку элементов, и в спорном случае правило остаётся включённым. Поэтому есть предпросмотр, тестовый режим и переключатель для каждого шаблона.

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

7 шаблонов · у каждого свой запуск, свой переключатель, свой предпросмотр

Тестовый режимПредпросмотр

Что даёт критический CSS

7 шаблонов, каждый анализируется и утверждается отдельно
Критический CSS встроен в head, проанализированные таблицы стилей грузятся с задержкой
Отчёт: правила, не совпавшие ни с одним элементом
Предпросмотр одной и той же страницы с обработкой и без
Тестовый режим: изменение видят только авторизованные администраторы
Список исключаемых URL, отдельный список исключений для таблиц стилей

Вот как это работает

1

Анализ шаблона — загрузить пример страницы, проверить правила

2

Сравнить предпросмотр с обработкой и без неё

3

Утвердить шаблон, затем перевести его из тестового режима в боевой

Частые вопросы о критическом CSS

Измеряется ли то, что действительно видно вверху?
Нет. Нет ни браузера, ни viewport. Все элементы ниже body нумеруются подряд; «вверху» считаются первые 30 % (настраивается от 5 до 90) плюс всё внутри указанных ориентиров — шапка, навигация, первый h1 и то, что будет добавлено. Там, где метод упирается в границу, правило считается попавшим: несколько лишних килобайт безобиднее, чем недостающее правило.
Можно ли удалить неиспользуемые правила прямо отсюда?
Список — это отчёт, а не инструмент. Подсчёт ведётся по одной странице-образцу на шаблон: классы, которые JavaScript ставит только по клику, или форма на другой странице там не появятся. Удалять лучше в исходном коде темы, где это остаётся прослеживаемым.
Что требуется для запуска анализа и что происходит потом?
Расширение PHP dom/libxml и рабочий loopback — сайт должен быть доступен сам себе по HTTP. Если чего-то из этого нет, анализ вообще не запускается; причина указывается тут же. Если позже меняется проанализированный CSS-файл или тема, обработка приостанавливается вместо того, чтобы отдавать возможно неверный критический CSS.

Другие функции производительности

Готовы?

Performance можно бесплатно протестировать 24 часа.

Никакой кредитной карты — никакого риска. Все готово за 2 минуты.

Попробуй бесплатно прямо сейчас