Ова веб локација користи колачиће за Гоогле аналитику.

Због закона о приватности не можете користити ову веб страницу без прихватања употребе ових колачића.

Погледајте Политику приватности

Прихватањем дајете сагласност на колачиће за праћење Гоогле аналитике. Ову сагласност можете поништити тако што ћете избрисати колачиће у свом претраживачу.

Критични ЦСС генератор

Бесплатан виџет претраживача за напредни критични ЦСС генератор и оптимизатор изнад прелома .

Оптимизатор изнад прелома

Критичан ЦСС генератор и оптимизатор изнад прелома Критичан ЦСС генератор и оптимизатор изнад прелома


Увод

Генератор критичног ЦСС-а омогућава да се Гоогле Цоре Веб Виталс уклони неискоришћеним ЦСС- ом, искључиво на основу минималног ЦСС-а. Омогућава постизање савршеног резултата у пикселима .

Најбољи критични ЦСС резултат се постиже у правом претраживачу.

Виџет претраживача се извршава на страници на којој се критични ЦСС треба издвојити и стога има потпуни изворни приступ оригиналном ЦСС окружењу.

Можете одабрати стилове или уграђене елементе стилова из којих ћете издвојити критични ЦСС. Ово је згодно за креирање критичног ЦСС-а који се може делити између страница.

Виџет претраживача такође има функцију за уклањање критичног ЦСС-а из стилова.

Алат је без шпијуна. Нема Гоогле аналитике или праћења. Безбедан за употребу и може се користити локално преко кеша сервисера.

Виџет претраживача пружа пример напреднијег критичног ЦСС софтвера који се може користити преко Цхроме претраживача у Гоогле Цлоуд-у. За више информација погледајте наш додатак за професионалну оптимизацију .


Инсталирај

Да бисте инсталирали виџет, превуците ову везу🗔 Цритицал-ЦСС на траку фаворита или копирајте и налепите код испод.

add widget to bookmarks
Опционо Овластите Сервице Воркер и Цацхе-АПИ за Гоогле ЦДН заштићени домен x.pagespeed.pro да би се наставила подешавања на свим доменима и да бисте користили виџет ван мреже или на localhost .

Карактеристике

  1. Напредни критични ЦСС генератор

    1. Прилагођено развијен на основу ПостЦСС-а , једног од најбољих ЦСС парсера.
    2. Подржава вишеструке оквире за приказ (десктоп + мобилни) за прилагодљиви критични ЦСС .
    3. Луткар попут контроле прегледача, укључујући клик, догађаје миша (лебдење, померање итд.), померање, прилагођено извршавање јавасцрипт кода и још много тога.
    4. Сирови неоптимизовани чисти критични ЦСС излаз.
  2. Оптимизатор изнад прелома

    1. Упоредите критични ЦСС са оригиналним ЦСС-ом.
    2. Прилагодљиви лењири за мерење пиксела.
  3. Напредни алати за оптимизацију

    1. Неискоришћени алат за уклањање ЦСС-а за уклањање критичног ЦСС-а из стилова.
    2. Професионални софтвер за ЦСС компресију (минимизирање) и оптимизацију.
    3. Поправка поквареног ЦСС-а. Алат за поправљање неисправног ЦСС-а.
    4. Аутопрефикер. Алат за примену префикса претраживача на ЦСС.
    5. ЦСС статистика и аналитика.
    6. ЦСС улепшати.
    7. Напредни ЦСС линт.
    8. Уклањање дупликата ЦСС-а.
    9. Напредни ЦСС едитор повезан са ЦСС линтом са саветима за оптимизацију.

Како се користи

Корак 1: покрените виџет претраживача на страници

Идите на страницу за коју желите да издвојите критични ЦСС и покрените виџет претраживача. Кликните овде за упутства за инсталацију.

Корак 2: генеришите критични ЦСС

Кључном ЦСС генератору се може приступити преко картице Алати у заглављу.

Критичан ЦСС генератор и оптимизатор изнад прелома

Конфигуришите ЈСОН користећи опције у документацији .

Критичан ЦСС генератор и оптимизатор изнад прелома

Корак 3: оптимизирајте резултат

Излаз критичног ЦСС генератора је сиров и захтева даљу оптимизацију као што је компресија.

Критичан ЦСС генератор и оптимизатор изнад прелома

Дугме Оптимизирај у менију уређивача омогућава примену напредне оптимизације и компресије кода.

Критичан ЦСС генератор и оптимизатор изнад прелома


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

Критични ЦСС генератор

Критични ЦСС генератор прихвата следеће опције.

Опција
Опис
Тип
atRulesToKeep
Низ ЦСС @ правила (стринг или регуларни израз) за принудно укључивање у критични ЦСС.
["media", "charset", "/rule(.*)/i"]
atRulesToRemove
Низ ЦСС @ правила (стринг или регуларни израз) за насилно уклањање из критичног ЦСС-а.
["media", "charset", "/rule(.*)/i"]
selectorsToKeep
Низ ЦСС селектора (стринг или регуларни израз) за принудно укључивање у критични ЦСС.
[".selector", "/\\.selector(.*)/i"]
selectorsToRemove
Низ ЦСС селектора (стринг или регуларни израз) за насилно уклањање из критичног ЦСС-а.
[".selector", "/\\.selector(.*)/i"]
propertiesToKeep
Низ ЦСС декларација (стринг или регуларни израз) за принудно укључивање у критични ЦСС. Да бисте ускладили вредности, користите низ другог нивоа са стрингом декларације или регуларним изразом на индексу 0 и низом вредности или регуларним изразом на индексу 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
propertiesToRemove
Низ ЦСС декларација (стринг или регуларни израз) за насилно уклањање из критичног ЦСС-а. Да бисте ускладили вредности, користите низ другог нивоа са стрингом декларације или регуларним изразом на индексу 0 и низом вредности или регуларним изразом на индексу 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
pseudoSelectorsToKeep
Низ ЦСС псеудо селектора (стринг или регуларни израз) за принудно укључивање у критични ЦСС.
[":before", "/:nth-child(.*)/i"]
pseudoSelectorsToRemove
Низ ЦСС псеудо селектора (стринг или регуларни израз) за насилно уклањање из критичног ЦСС-а.
[":before", "/:nth-child(.*)/i"]
maxElementsToCheckPerSelector
Максимална количина елемената за проверу видљивости изнад прелома. Ово подешавање може утицати на брзину генератора.
false or 100
maxEmbeddedBase64Length
Максимална величина у бајтовима Басе64 кодираних инлине слика које треба укључити у критични ЦСС.
1000
strictParser
Подразумевано, ЦСС се анализира помоћу ПостЦСС Сафе Парсер отпорног на грешке који аутоматски исправља синтаксичке грешке. Ово подешавање омогућава коришћење строгог парсера.
true
ui_actions
Низ радњи које треба извршити у стању корисничког интерфејса да бисте открили ЦСС код изнад прелома. Погледајте документацију о радњама корисничког интерфејса у наставку.
[{"viewport":"360x640"}, {"run": true}]

Прикажи пример конфигурације

Пример критичне конфигурације ЦСС генератора

{
  "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": "Подесите оквир за приказ за ЦСС откривање изнад прелома."
    },
    {
      "wait": 1000,
      "notes": "Сачекајте 1000 мс да бисте омогућили приказ оквира за приказ."
    },
    {
      "run": true,
      "notes": "Покрените критични ЦСС генератор (рачунање ЦСС изнад прелома)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Покрените нови МоусеЕвент на ДОМ елементу а.нав-мену."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Извршите скрипту, у овом случају затворите мени пре него што наставите са следећим оквиром за приказ."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Радње корисничког интерфејса Цритицал ЦСС генератора

Критични ЦСС генератор обезбеђује контролу прегледача налик Пуппетеер-у. Параметар ui_actions прихвата низ са објектима радњи корисничког интерфејса који дефинишу промене стања корисничког интерфејса хронолошким редоследом.

run

Покрените критични ЦСС генератор на тренутном стању корисничког интерфејса. Ову радњу треба поновити сваки пут када се промени стање корисничког интерфејса да би се открио нови ЦСС код изнад прелома.

{
  "run": true
}

wait

Сачекајте неколико милисекунди пре него што наставите са следећом радњом.

{
  "wait": 1000
}

viewport

Подесите величину прозора за приказ.

{
  "viewport": "1300x900"
}

scroll

Померите прозор за приказ. Опција прихвата нумеричку вредност (пиксели од врха), процентуални низ ( 50% ) или низ са [x,y] позицијама у пикселима.

{
  "scroll": 400
}

event

Покрени догађај прегледача ( new Event() ) на опционом ДОМ селектору.

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

mouseevent

Покрени догађај миша ( new MouseEvent() ) на опционом ДОМ селектору. Акција прихвата параметар mouseEventInit са опцијама МоусеЕвент који укључује могућност постављања к,и координата. Када је mouseEventInit изостављен, подразумеване опције су {"bubbles": true,"cancelable": true} .

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

script

Процените јавасцрипт код. Ова радња омогућава извршавање јавасцрипт кода на страници, нпр. затварање искачућих прозора пре даљег измена стања корисничког интерфејса.

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

fn

Извршите јавасцрипт функцију. Ова радња омогућава да се изврши унапред конфигурисана јавасцрипт функција. Додатна опција "promise":true омогућава да се очекује обећање и сачека да се обећање реши пре него што наставите са следећом радњом.

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

notes

Сваки објекат акције прихвата параметар notes који се може користити за додавање описног текста.

{
  "script": "add_to_cart();",
  "notes": "опис радње корисничког интерфејса за личну употребу"
}

Прикажи пример конфигурације

Пример конфигурације радњи корисничког интерфејса

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Подесите оквир за приказ за ЦСС откривање изнад прелома."
    },
    {
      "wait": 1000,
      "notes": "Сачекајте 1000 мс да бисте омогућили приказ оквира за приказ."
    },
    {
      "run": true,
      "notes": "Покрените критични ЦСС генератор (рачунање ЦСС изнад прелома)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Покрените нови МоусеЕвент на ДОМ елементу а.нав-мену."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Извршите скрипту, у овом случају затворите мени пре него што наставите са следећим оквиром за приказ."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Неискоришћени ЦСС уклањање

Неискоришћени алат за уклањање ЦСС-а користи исти софтвер као критични ЦСС екстрактор и прихвата скоро исте опције конфигурације, укључујући контролу прегледача налик Пуппетеер-у кроз радње корисничког интерфејса. Алат такође омогућава издвајање некоришћеног ЦСС-а.

Прикажи пример конфигурације

Пример конфигурације некоришћеног ЦСС уклањача

{
  "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
    }
  ]
}

Уклањање дупликата ЦСС-а

Уклањање дупликата ЦСС-а омогућава упоређивање две листе стилова и уклањање или издвајање дупликата ЦСС-а.

Прикажи пример конфигурације

Пример конфигурације алата за уклањање дупликата ЦСС-а

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

Друго поље за унос прихвата индексни број стилова. Индекс стилова можете пронаћи у прегледу стилова на картици подешавања.

Преглед индекса стилова Преглед индекса стилова

Можете да отпремите стилове или да упоредите стилове са спољних УРЛ адреса тако што ћете креирати нову листу стилова. Затим можете да увезете УРЛ-ове или отпремите стилове и користите индекс из новог листа стилова у алату за уклањање дупликата ЦСС-а.

Увезите или отпремите табеле стилова Увезите или отпремите табеле стилова

Када сте конфигурисани, притисните дугме да бисте покренули уклањање дупликата ЦСС-а. ЦСС коментар ће приказати основну статистику резултирајућег смањеног ЦСС-а.

Резултат уклањања дупликата ЦСС-а Резултат уклањања дупликата ЦСС-а