Генератор 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.