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

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

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

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

Введение

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

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

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

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

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

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

Виджет браузера представляет собой пример более совершенного критического программного обеспечения CSS, которое можно использовать через браузер Chrome в Google Cloud. Дополнительную информацию см. в нашем профессиональном плагине оптимизации .

Установить

Чтобы установить виджет, перетащите эту ссылку🗔 Критический 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);

Функции

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: запустите виджет браузера на странице

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

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

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

Настройте JSON, используя параметры из документации .

Шаг 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