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

Бесплатный браузерный виджет для расширенного критического генератора CSS и оптимизатора верхней части страницы . Инструмент для достижения идеального результата с минимальным количеством CSS.

Наилучший критический результат CSS достигается в реальном браузере.

Виджет браузера выполняется на странице, на которой должен быть извлечен критический CSS, и поэтому имеет полный собственный доступ к исходной среде CSS.

Вы можете выбрать таблицы стилей или встроенные элементы таблицы стилей, из которых нужно извлечь важные CSS. Это удобно для создания критически важного CSS, который можно использовать на разных страницах.

Виджет браузера также имеет функцию удаления критического CSS из таблиц стилей.

Инструмент не содержит шпионов. Нет Google Analytics или отслеживания. Безопасен в использовании и может использоваться локально через кеш Service Worker.

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

Установить

Чтобы установить виджет, перетащите эту ссылку🗔 Критический CSS на панель избранного или скопируйте и вставьте код ниже.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="Критический CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Оптимизатор верхней части страницы

Критический генератор CSS и оптимизатор верхней части страницы

Генератор критических CSS позволяет разрешить Google Core Web Vitals удалить штраф за неиспользованный CSS исключительно на основе минимального CSS.

Функции

1. Усовершенствованный критический генератор CSS

   1. Специально разработан на основе PostCSS , одного из лучших парсеров CSS.
   2. Поддерживает несколько окон просмотра (настольный компьютер + мобильный телефон) для отзывчивого критически важного CSS .
   3. Puppeteer, как управление браузером, включая щелчок, события мыши (наведение, перемещение и т. д.), прокрутку, выполнение пользовательского кода javascript и многое другое.
   4. Необработанный неоптимизированный чистый критический вывод CSS.

2. Оптимизатор верхней части страницы

   1. Сравните критический CSS с исходным CSS.
   2. Настраиваемые линейки измерения пикселей.

3. Расширенные инструменты оптимизации

   1. Неиспользуемый модуль удаления CSS для удаления критического CSS из таблиц стилей.
   2. Профессиональное программное обеспечение для сжатия (минимизации) и оптимизации CSS.
   3. Ремонт сломанного CSS. Инструмент для исправления искаженного CSS.
   4. Автопрефикс. Инструмент для применения префиксов браузера к CSS.
   5. CSS статистика и аналитика.
   6. CSS украсить.
   7. Расширенный CSS-ворс.
   8. Удаление дубликатов CSS.
   9. Расширенный редактор CSS, подключенный к CSS lint, с советами по оптимизации.

Как использовать

Шаг 1: запустите виджет браузера на странице

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

Шаг 2: создайте критический CSS

Доступ к критичному генератору CSS можно получить через вкладку «Инструменты» в заголовке.

Configure the JSON using the options in the the documentation.

Шаг 3: оптимизируйте результат

Вывод критического генератора CSS необработан и требует дальнейшей оптимизации, такой как сжатие.

Кнопка «Оптимизировать» в меню редактора позволяет применить расширенную оптимизацию и сжатие кода.

Документация

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

Критический генератор CSS принимает следующие параметры.

Показать пример конфигурации

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [
    "/\#C/",
    "/\.chattxt/"
  ],
  "propertiesToKeep": [],
  "propertiesToRemove": [
    "/(.*)transition(.*)/i",
    "cursor",
    "pointer-events",
    "/(-webkit-)?tap-highlight-color/i",
    "/(.*)user-select/i"
  ],
  "pseudoSelectorsToKeep": [
    "::before",
    "::after",
    "::first-letter",
    "::first-line",
    ":before",
    ":after",
    ":first-letter",
    ":first-line",
    ":visited",
    "/:nth-child.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "maxEmbeddedBase64Length": 1000,
  "strictParser": false,
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Настройте область просмотра для обнаружения CSS в верхней части страницы."
    },
    {
      "wait": 1000,
      "notes": "Подождите 1000 мс, чтобы область просмотра начала визуализироваться."
    },
    {
      "run": true,
      "notes": "Запустите критический генератор CSS (вычисление CSS в верхней части страницы)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Запустите новое событие MouseEvent для элемента DOM элемента .nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Выполните скрипт, в этом случае закройте меню, прежде чем продолжить работу со следующим окном просмотра."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Действия пользовательского интерфейса генератора Critical CSS

Критический генератор CSS обеспечивает управление браузером, подобное Puppeteer. Параметр ui_actions принимает массив с объектами действий пользовательского интерфейса, которые определяют изменения состояния пользовательского интерфейса в хронологическом порядке.

{
  "run": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "описание действия пользовательского интерфейса для личного использования"
}

Показать пример конфигурации

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Настройте область просмотра для обнаружения CSS в верхней части страницы."
    },
    {
      "wait": 1000,
      "notes": "Подождите 1000 мс, чтобы область просмотра начала визуализироваться."
    },
    {
      "run": true,
      "notes": "Запустите критический генератор CSS (вычисление CSS в верхней части страницы)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Запустите новое событие MouseEvent для элемента DOM элемента .nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Выполните скрипт, в этом случае закройте меню, прежде чем продолжить работу со следующим окном просмотра."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Удаление неиспользуемых CSS

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

Показать пример конфигурации

{
  "atRulesToKeep": [
    "charset",
    "keyframes",
    "import",
    "namespace",
    "page"
  ],
  "atRulesToRemove": [],
  "selectorsToKeep": [
    "*",
    "*:before",
    "*:after",
    "html",
    "body"
  ],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "pseudoSelectorsToKeep": [
    "/:.*/"
  ],
  "pseudoSelectorsToRemove": [],
  "maxElementsToCheckPerSelector": false,
  "strictParser": false,
  "ui_actions": [
    {
      run: true
    }
  ]
}

Удаление дубликатов CSS

Средство удаления дубликатов CSS позволяет сравнивать две таблицы стилей и удалять или извлекать дубликаты CSS.

Показать пример конфигурации

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Второе поле ввода принимает номер индекса таблицы стилей. Вы можете найти индекс таблицы стилей в обзоре таблицы стилей на вкладке настроек.

Обзор указателя таблицы стилей

Вы можете загрузить таблицу стилей или сравнить таблицы стилей с внешних URL-адресов, создав новую таблицу стилей. Затем вы можете импортировать URL-адреса или загрузить таблицы стилей и использовать индекс из новой таблицы стилей в средстве удаления дубликатов CSS.

Импорт или загрузка таблиц стилей

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

Результат удаления дубликатов CSS