Генератор Critical CSS

Critical CSS это небольшая часть ваших стилей, нужная для первого экрана. Встроив её, страница рисуется ещё до поступления полных таблиц стилей. Генератор входит в Pro на вкладке Кеш и оптимизация, под полем Критические стили CSS. Ему не нужно ничего устанавливать на сервере, потому что стандартный движок работает в вашем браузере.

Как сгенерировать

1. Откройте Baza Helper > Кеш и оптимизация и прокрутите до поля Критические стили CSS.
2. Выберите Адрес страницы (по умолчанию главная страница) и Размер экрана: Mobile 390 x 844, Desktop 1440 x 900 или Both.
3. Нажмите Создать автоматически и подождите. Скрытые фреймы загружают подписанную копию страницы, а сборщик считывает, какие правила использует первый экран.
4. Посмотрите карточку результата: старый и новый размер, предупреждения, разницу вёрстки в процентах и масштабированный предпросмотр.
5. Нажмите Применить, чтобы сохранить, или Cancel, чтобы оставить всё как было.

Ничего не сохраняется, пока вы не нажмёте Apply, а ваши таблицы стилей никогда не меняются. Прежнее значение сохраняется первым, а Восстановить предыдущую версию возвращает его (запоминаются последние 5 версий).

Как считывается страница

• Страница загружается от имени посетителя без входа по подписанной ссылке, действующей 15 минут, поэтому панель администратора и ваш вход не попадают в результат.
• Правило остаётся, если его селектор совпадает с элементом, у которого есть блок на первом экране. Правила, скрывающие элемент на первом экране, сохраняются в сокращённом виде.
• Правила hover и focus, правила печати, правила ниже первого экрана и неиспользуемые @font-face, @keyframes и @property пропускаются.
• Порядок @layer, обёртки @media, @supports и @container, пользовательские свойства и порядок каскада сохраняются. Одинаковые правила объединяются, остаётся последняя копия.
• Пользовательские свойства, которые нигде не используются, отбрасываются. Встроенные файлы (url(data:…) от 3000 символов) пропускаются и отмечаются в сообщении.
• Результат минифицирован и содержит только ASCII.

Ограничения и безопасность

• Результат ограничен 64 КБ. Если лимит превышен, сообщение показывает, что занимает место (пользовательские свойства, шрифты, анимации, правила media, самые крупные группы классов).
• Разрешены только адреса вашего сайта, на портах 80 и 443, без учётных данных.
• Запуск выполняется по одному, не более 12 в час и с интервалом 8 секунд для каждого пользователя.
• Сайт, запрещающий встраивание во фреймы (X-Frame-Options или frame-ancestors), сообщает, что фрейм заблокирован.
• Нечитаемые таблицы стилей с других источников отмечаются как предупреждения.

Использование с отложенными стилями

После применения critical CSS можно перечислить Идентификаторы стилей для отложенной загрузки. Эти стили затем загружаются, не блокируя первую отрисовку, с запасным вариантом без JavaScript. Неполный critical CSS может вызвать вспышку нестилизованного содержимого, поэтому посмотрите первый экран на телефоне и на компьютере.

Настройка Использовать Critical CSS только на главной включена по умолчанию. Critical CSS делается из одной страницы, а у других страниц другие правила первого экрана, поэтому с отложенными стилями они могли бы на миг мигнуть без стилей. Когда она включена, только главная страница получает встроенный Critical CSS и отложенные стили, а остальные страницы загружают стили как обычно. Когда выключена, весь сайт использует их, и вы соглашаетесь на возможное мигание на страницах, отличающихся от той, из которой он сделан.

Настройка охватывает встроенный CSS, ссылки на отложенные таблицы стилей, объединённый отложенный файл, скрипт, включающий стили, и шрифты, предзагруженные из Critical CSS. Каждая отложенная таблица стилей включается в свою очередь, а экран измеряется один раз, когда браузер свободен.

Для разработчиков

Необязательный серверный обработчик (Node 18+ с Chromium) может генерировать CSS без вкладки браузера, а другие генераторы добавляются через фильтр baza_helper_critical_css_generators. Активный выбирается через baza_helper_critical_css_generator.