Критичен CSS генератор

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

Оптимизатор на видимата на екрана част от страницата

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

Въведение

Генераторът на критичен CSS дава възможност за разрешаване на Core Web Vitals на Google за премахване на наказание за неизползван CSS , само въз основа на минимален 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 lint.
   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 ms, за да активирате изобразяването на прозореца за изглед."
    },
    {
      "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 генератор осигурява контрол на браузъра, подобен на 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 ms, за да активирате изобразяването на прозореца за изглед."
    },
    {
      "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