Экстрактор и компрессор критического CSS

• Мгновенное извлечение критического CSS в браузере: извлекайте критический CSS мгновенно в браузере — без загрузки на сервер, без Puppeteer и без headless-браузера. Экстрактор критического css анализирует элементы вашего HTML и сопоставляет их с правилами CSS за миллисекунды, полностью на вашем устройстве.
• Безопасный онлайн-экстрактор критического CSS: ваши HTML и CSS не покидают устройство. Экстрактор критического css работает полностью в браузере — без загрузок на сервер, без передачи данных, 100 % приватно. Безопасно для проприетарных таблиц стилей, внутренних инструментов и продакшен-кода.
• Три формата вывода для любого процесса: экстрактор критического css выдаёт минифицированный CSS, готовый к вставке сниппет <style> или читаемый форматированный CSS — переключайте формат одним кликом. Показывает точное число правил и экономию в байтах, чтобы вы могли измерить влияние на LCP.
• 100 % бесплатно навсегда: экстрактор критического css полностью бесплатен — без регистрации, премиум-тарифа, ограничений размера файла и рекламы. Извлекайте критический CSS с неограниченного числа страниц без затрат, навсегда.

• Оптимизация LCP в Core Web Vitals: устраните блокирующий рендеринг CSS, чтобы улучшить показатели Largest Contentful Paint (LCP) — ключевую метрику Core Web Vitals. Экстрактор критического css определяет минимальный CSS, необходимый для отрисовки содержимого первого экрана, который вы встраиваете в <head>, пока полная таблица стилей загружается асинхронно.
• Оптимизация производительности Next.js и React: извлекайте критический CSS для страниц Next.js, React и Vue, чтобы сократить Time to First Byte (TTFB) и First Contentful Paint (FCP). Экстрактор критического css работает с любым фреймворком — вставьте отрисованный HTML и ваш CSS-бандл, чтобы получить готовые к встраиванию критические стили.
• Ускорение Shopify и электронной коммерции: улучшайте показатели скорости магазина Shopify, встраивая критический CSS для страниц товаров, коллекций и главной страницы. Экстрактор критического css помогает определить, какие правила CSS темы Shopify нужны на первом экране, чтобы устранить блокирующие рендеринг запросы таблиц стилей.
• Ускорение страниц WordPress: извлекайте критический CSS для тем WordPress, чтобы сократить блокирующие рендеринг ресурсы, отмеченные Google PageSpeed Insights. Экстрактор критического css работает с любой темой WordPress — вставьте HTML страницы и CSS вашей темы, чтобы получить критические встроенные стили.
• Оптимизация производительности лендингов: максимизируйте скорость загрузки лендингов, встраивая только CSS, необходимый для содержимого первого экрана. Экстрактор критического css идеален для маркетинговых лендингов, где каждая миллисекунда улучшения LCP напрямую влияет на конверсию.
• Оптимизация генераторов статических сайтов: автоматизируйте извлечение критического CSS для сайтов Astro, Hugo, Eleventy и Jekyll — вставьте сгенерированный HTML и ваш CSS, чтобы получить критические встроенные стили. Экстрактор критического css помогает реализовать шаблон критического CSS без зависимости от Puppeteer во время сборки.

Критический CSS — это минимальный набор правил CSS, необходимых для отрисовки содержимого первого экрана веб-страницы, то есть части, видимой без прокрутки. Когда браузер встречает тег <link rel="stylesheet">, он блокирует рендеринг, пока вся таблица стилей не будет загружена и разобрана. Встраивая критический CSS прямо в <head> и загружая полную таблицу стилей асинхронно, вы устраняете блокирующий рендеринг CSS — одну из самых эффективных оптимизаций для показателей Largest Contentful Paint (LCP) и First Contentful Paint (FCP). Наш экстрактор критического css определяет, какие правила CSS соответствуют вашим HTML-элементам, и выдаёт минифицированную таблицу стилей, готовую к встраиванию.

1. 1 Вставьте ваш HTML и CSS: введите разметку HTML первого экрана и полную таблицу стилей CSS в две панели ввода. Нажмите «Загрузить пример», чтобы попробовать экстрактор на реалистичном примере. Загружайте файлы .html и .css прямо через кнопки загрузки.
2. 2 Нажмите «Извлечь критический CSS»: экстрактор разбирает ваш HTML, чтобы определить все элементы (теги, классы, ID, атрибуты), а затем сопоставляет каждое правило CSS с этими элементами. Совпавшие правила попадают в вывод критического CSS. Базовые правила (html, body, *, :root), @keyframes и @font-face включаются всегда. Обработка выполняется полностью в вашем браузере.
3. 3 Выберите формат вывода и скопируйте: переключайтесь между минифицированным CSS, готовым к вставке сниппетом <style> и читаемым форматированным CSS. Скопируйте в буфер обмена или скачайте. Встройте сниппет <style> в <head> и загрузите полную таблицу стилей асинхронно.

• Совпавшие селекторы: правила CSS, селекторы которых соответствуют элементам, присутствующим в вашем HTML, — по имени тега, классу, ID или атрибуту. Селекторы через запятую проверяются по отдельности.
• Базовые стили: правила для html, body, *, :root, ::before и ::after включаются всегда — они влияют на всю вёрстку страницы и должны быть доступны немедленно.
• @keyframes и @font-face: ключевые кадры анимации и объявления @font-face включаются всегда — на них ссылаются другие критические правила, и они должны быть доступны до рендеринга.
• Правила @media: блоки медиазапросов включаются, если их внутренние селекторы соответствуют вашим HTML-элементам, — так адаптивные стили первого экрана доступны на всех размерах экрана.

Экстрактор критического css использует статический анализ HTML — он сопоставляет CSS-селекторы с предоставленными вами HTML-элементами. Он не выполняет JavaScript, поэтому динамически добавленные классы и элементы не обнаруживаются. Для наиболее точных результатов вставьте HTML, отрисованный на сервере (исходный HTML до выполнения JavaScript). Сложные CSS-селекторы с комбинаторами-потомками (например, .parent .child ) сопоставляются только по последнему токену — из-за этого в результат могут попасть некоторые некритичные правила. Всегда проверяйте результат перед встраиванием в продакшене.