Критичний CSS

Генеруйте CSS видимої області справжнім браузером і віддавайте його з Managed CDN.

7 min read

Critical CSS — це підмножина CSS, потрібна для швидкого рендерингу контенту у видимій області. Cache Rocket генерує його в хмарі за допомогою проходу покриття справжнім headless-браузером, завантажує компактний critical.css на Managed CDN, а плагін WordPress впроваджує його для відвідувачів.

Вимога плану

Critical CSS доступний на планах Pro і Business, з місячною квотою сторінок. Підтвердьте право в розділі Обліковий запис → Підписка.

Увімкнення

  1. 1

    Підключіть API-ключі

    Вставте публічний і секретний ключі на екрані облікового запису плагіна. Див. API-ключі.

  2. 2

    Підтвердьте свій план

    Critical CSS має бути включено, з залишком місячної квоти сторінок.

  3. 3

    Увімкніть Generate Critical CSS

    У розділі Media увімкніть генерацію Critical CSS.

  4. 4

    Генеруйте для важливих сторінок

    Запускайте генерацію для ключових шаблонів чи URL у межах вашого місячного ліміту.

Право на Unused CSS

Вищі плани можуть перераховувати право Unused CSS. Цей прапорець резервує можливість у білінгу; генерація Critical CSS — це наявний хмарний CSS-процес, задокументований тут. Не очікуйте окремого процесора Unused CSS, доки він не з’явиться як власний елемент керування Media.

Часті запитання

Чому саме справжній браузер?
Покриття з живого завантаження сторінки відстежує, який CSS справді використовується у видимій області для цього URL, що залишається точним при зміні тем.
Звідки відвідувачі завантажують critical.css?
З Managed CDN (assets.cacherocket.com), впроваджується плагіном.
Що станеться при вичерпанні квоти?
Нові завдання генерації Critical CSS призупиняються, доки місячна квота не оновиться або ви не оновите план.