Настройка критического CSS

Что модуль делает — и чего он не делает

Для каждого шаблона страницы Kakapo запрашивает по HTTP настоящую примерную страницу твоего сайта (только в админ-разделе или по cron, никогда при построении страницы для посетителя), читает связанные там локальные таблицы стилей прямо с диска и проверяет каждое отдельное правило через DOMXPath по документу. Из этого получаются два результата: критический CSS, который ставится инлайн в head, и список правил, которые на этом шаблоне не попали ни в один элемент.

Ничего при этом не рендерится. Нет ни браузера, ни области просмотра, ни позиции прокрутки. «Видно сверху» — это приближение по открыто описанному правилу: все элементы ниже body нумеруются подряд, первые 30 процентов (по умолчанию, настраивается между 5 и 90) считаются верхом, плюс всё внутри указанных ориентиров. Всегда включаются html, body, :root и @font-face, а также @keyframes, которые названы критическим правилом через animation. Правила, срабатывающие только через состояния (:hover, :focus, :active), остаются за бортом, @media print тоже. Там, где метод упирается в свой предел, он округляет вверх: правило считается сработавшим. Пара лишних килобайт обходится дешевле, чем недостающее правило и мерцание.

Проверить требования, прежде чем анализировать

Должны сойтись две вещи. Во-первых, PHP-расширение dom/libxml — модуль проверяет его не через class_exists(), а строит миниатюрный документ и действительно к нему обращается. Причина: некоторые хостеры ставят disable_classes=DOMDocument, тогда class_exists() по-прежнему отвечает «да», а new завершается ошибкой. Если расширения нет, «Анализировать» и «Ежедневно обновлять» заблокированы, а причина стоит рядом.

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

Что анализ не может прочитать, то и не откладывается: таблицы стилей с чужих хостов, с CDN или из Google Fonts по-прежнему блокируют отрисовку. Это медленный, но безопасный путь.

Действовать шаблон за шаблоном

Шаблонов семь: Главная страница, Страница блога, Отдельная запись, Статическая страница, Архив, Результаты поиска и Страница ошибки 404. Каждый анализируется и одобряется по отдельности. Если твоя главная страница показывает список записей, «Страница блога» неприменима — переключатель остаётся заблокированным, поскольку он был бы без действия. Если нет ни одной опубликованной записи или ни одной страницы, примерной страницы не существует, и шаблон тоже остаётся заблокированным.

Рекомендуемый путь: сначала «Анализировать все» или анализ по отдельности. Затем ты открываешь для шаблона «Предпросмотр» и «без» в двух вкладках — это одна и та же настоящая страница, один раз с обработкой и один раз без, видимая только вошедшим администраторам и только при действительном одноразовом ключе в адресе. Главный переключатель для этого включать не нужно. Мерцание при построении надёжнее всего видно в отдельной вкладке с ограниченной скоростью соединения, а не во встроенном фрейме.

Только когда сравнение выглядит чисто, ты одобряешь шаблон и включаешь главный переключатель. Он начинает в тестовом режиме: там обработку видят только вошедшие администраторы, для всех остальных страница остаётся неизменной. На «боевой» ты переключаешь лишь тогда, когда просмотрел несколько шаблонов.

Четыре тормоза и списки исключений

«Загружать проанализированные таблицы стилей с задержкой» — вот где настоящая экономия времени. Выключено означает: критический CSS добавляется дополнительно инлайн, в остальном всё остаётся как было — без риска, но и без выигрыша. Включено означает: проанализированные таблицы стилей загружаются через media="print" плюс сброс по onload, с дубликатом в noscript для посетителей без JavaScript. С задержкой грузится исключительно то, что действительно было прочитано, и только если handle и адрес файла всё ещё соответствуют тому, что анализировалось.

«Приостанавливать при изменённых исходных файлах» запоминает для каждого проанализированного файла время изменения и размер, а также активную тему. Если что-то меняется, обработка не выполняется вовсе — вместо работы с возможно неверным критическим CSS; в исходном коде тогда стоит заметка с причиной.

Три текстовых поля — это запасной выход. URL-исключения: по одной строке на путь, «*» как подстановочный знак, эти страницы никогда не обрабатываются (типично /checkout*, /mein-konto*). Никогда не задерживать таблицы стилей: по одному handle WordPress в строке, по умолчанию admin-bar и dashicons. Ориентиры: по одному селектору в строке, всё внутри считается верхом — по умолчанию это header, [role="banner"], .site-header, #masthead, nav, .main-navigation, .site-branding, .hero и h1. Строки, которые не удаётся разобрать, отклоняются, а не сохраняются молча.

Изменение доли «сверху» или ориентиров вступает в силу только после нового прогона анализа. Всё остальное сразу сбрасывает кеш страниц, потому что там лежит готовый HTML со старым состоянием.

Если что-то идёт не так

«Бюджет времени исчерпан»: прогон достиг 25 секунд или лимита времени PHP. Отчёт сохранён, критический CSS — намеренно нет: неполный критический CSS давал бы мерцание. В сообщении назван файл, на котором всё закончилось. Проанализируй заново или убери очень большую таблицу стилей через список исключений.

«Ответила с HTTP …»: примерная страница вернула не тот код, который ожидался (200, у страницы ошибки 404). Ничего не сохраняется. Проверь, доступна ли страница в браузере и не стоит ли перед ней защита.

Шаблон стоит в состоянии «устарел»: проанализированный CSS-файл изменился или была сменена тема. Проанализируй заново. Если там стоит «другая доля», шаблон был создан с другим процентным значением, чем установлено сейчас — тоже проанализируй заново.

Чтобы это не оставалось ручной работой, есть «Ежедневно проверять и обновлять». Прогон по cron анализирует только шаблоны, которые уже одобрены и устарели; он никогда ничего не включает и не создаёт анализ для неодобренного шаблона. Его последний результат стоит заметкой в разделе Ремень безопасности.

Если страница всё равно ведёт себя беспокойно, помогает взгляд в исходный код: там стоит комментарий с обработанным шаблоном и состоянием (предпросмотр, тестовый режим, боевой) или причина, почему обработка была намеренно пропущена.