To spletno mesto uporablja piškotke za Google Analytics.

Zaradi zakona o zasebnosti ne morete uporabljati te spletne strani, ne da bi sprejeli uporabo teh piškotkov.

Oglejte si pravilnik o zasebnosti

S sprejetjem soglašate s piškotki za sledenje Google Analytics. To soglasje lahko prekličete tako, da počistite piškotke v brskalniku.

Kritični generator CSS

Brezplačen pripomoček brskalnika za napreden kritični generator CSS in optimizator vidnega polja .

Optimizator na vrhu strani

Kritičen generator CSS in optimizator na vrhu strani Kritičen generator CSS in optimizator na vrhu strani


Uvod

Generator kritičnih CSS omogoča razrešitev Googlovih ključnih spletnih kazalnikov za odstranitev neuporabljene kazni CSS izključno na podlagi minimalnega CSS. Omogoča doseganje popolnega rezultata slikovnih pik .

Najboljši kritični rezultat CSS je dosežen v pravem brskalniku.

Gradnik brskalnika se izvede na strani, na kateri je treba ekstrahirati kritični CSS, in ima zato popoln izvorni dostop do izvirnega okolja CSS.

Izberete lahko slogovne liste ali vgrajene elemente slogovne datoteke, iz katerih želite ekstrahirati kritični CSS. To je priročno za ustvarjanje kritičnega CSS, ki ga je mogoče deliti med stranmi.

Pripomoček brskalnika ima tudi funkcijo za odstranjevanje kritičnega CSS iz stilskih listov.

Orodje je brez vohunov. Brez Google Analytics ali sledenja. Varen za uporabo in se lahko uporablja lokalno prek predpomnilnika Service Worker.

Pripomoček brskalnika ponuja primer naprednejše kritične programske opreme CSS, ki jo je mogoče uporabljati prek brskalnika Chrome v Google Cloudu. Za več informacij glejte naš vtičnik za profesionalno optimizacijo .


Namestite

Če želite namestiti pripomoček, povlecite to povezavo🗔 Kritični-CSS v vrstico s priljubljenimi ali kopirajte in prilepite spodnjo kodo.

add widget to bookmarks
Neobvezno Pooblastite Service Worker in Cache-API za Google CDN zaščiteno domeno x.pagespeed.pro za ohranitev nastavitev med domenami in uporabo pripomočka brez povezave ali na localhost .

Lastnosti

  1. Napredni kritični generator CSS

    1. Razvit po meri na podlagi PostCSS , enega najboljših razčlenjevalcev CSS.
    2. Podpira več pogledov (namizni + mobilni) za odziven kritičen CSS .
    3. Puppeteer kot nadzor brskalnika, vključno s klikom, dogodki miške (lebdenje, premikanje itd.), drsenje, izvajanje kode javascript po meri in še veliko več.
    4. Surovi neoptimizirani čisti kritični izhod CSS.
  2. Optimizator na vrhu strani

    1. Primerjajte kritični CSS z izvirnim CSS.
    2. Prilagodljiva ravnila za merjenje slikovnih pik.
  3. Napredna orodja za optimizacijo

    1. Odstranjevalec neuporabljenih CSS za odstranitev kritičnega CSS iz stilskih listov.
    2. Profesionalna programska oprema za stiskanje (minify) in optimizacijo CSS.
    3. Popravilo pokvarjenega CSS. Orodje za popravljanje napačno oblikovanega CSS.
    4. Samodejna predpona. Orodje za uporabo predpon brskalnika v CSS.
    5. Statistika in analitika CSS.
    6. CSS polepša.
    7. Napredni CSS lint.
    8. Odstranjevalec podvojenih CSS.
    9. Napredni urejevalnik CSS, povezan s CSS lint, z nasveti za optimizacijo.

Kako uporabiti

1. korak: zaženite gradnik brskalnika na strani

Pomaknite se do strani, za katero želite ekstrahirati kritični CSS, in zaženite gradnik brskalnika. Kliknite tukaj za navodila za namestitev.

2. korak: ustvarite kritičen CSS

Do kritičnega generatorja CSS lahko dostopate prek zavihka Orodja v glavi.

Kritičen generator CSS in optimizator na vrhu strani

Konfigurirajte JSON z uporabo možnosti v dokumentaciji .

Kritičen generator CSS in optimizator na vrhu strani

3. korak: optimizirajte rezultat

Izhod kritičnega generatorja CSS je neobdelan in zahteva dodatno optimizacijo, kot je stiskanje.

Kritičen generator CSS in optimizator na vrhu strani

Gumb Optimiziraj v meniju urejevalnika omogoča uporabo napredne optimizacije in stiskanja kode.

Kritičen generator CSS in optimizator na vrhu strani


Dokumentacija

Kritični generator CSS

Kritični generator CSS sprejema naslednje možnosti.

Možnost
Opis
Vrsta
atRulesToKeep
Niz pravil CSS @ (niz ali regularni izraz), ki jih je treba nujno vključiti v kritični CSS.
["media", "charset", "/rule(.*)/i"]
atRulesToRemove
Niz pravil CSS @ (niz ali regularni izraz) za prisilno odstranitev iz kritičnega CSS.
["media", "charset", "/rule(.*)/i"]
selectorsToKeep
Niz izbirnikov CSS (niz ali regularni izraz), ki jih je treba prisilno vključiti v kritični CSS.
[".selector", "/\\.selector(.*)/i"]
selectorsToRemove
Niz izbirnikov CSS (niz ali regularni izraz) za prisilno odstranitev iz kritičnega CSS.
[".selector", "/\\.selector(.*)/i"]
propertiesToKeep
Niz deklaracij CSS (niz ali regularni izraz), ki jih je treba nujno vključiti v kritični CSS. Za ujemanje vrednosti uporabite matriko 2. ravni z nizom deklaracije ali regularnim izrazom pri indeksu 0 in nizom vrednosti ali regularnim izrazom pri indeksu 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
propertiesToRemove
Niz deklaracij CSS (niz ali regularni izraz), ki jih je treba prisilno odstraniti iz kritičnega CSS. Za ujemanje vrednosti uporabite matriko 2. ravni z nizom deklaracije ali regularnim izrazom pri indeksu 0 in nizom vrednosti ali regularnim izrazom pri indeksu 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
pseudoSelectorsToKeep
Niz psevdo izbirnikov CSS (niz ali regularni izraz), ki jih je treba vključiti v kritični CSS.
[":before", "/:nth-child(.*)/i"]
pseudoSelectorsToRemove
Niz psevdo izbirnikov CSS (niz ali regularni izraz), ki jih je treba na silo odstraniti iz kritičnega CSS.
[":before", "/:nth-child(.*)/i"]
maxElementsToCheckPerSelector
Največje število elementov, ki jih je treba preveriti glede vidnosti na meji strani. Ta nastavitev lahko vpliva na hitrost generatorja.
false or 100
maxEmbeddedBase64Length
Največja velikost v bajtih vstavljenih slik, kodiranih z Base64, ki jih je treba vključiti v kritični CSS.
1000
strictParser
Privzeto je CSS razčlenjen z varnim razčlenjevalnikom PostCSS, ki je odporen na napake in samodejno popravi sintaksne napake. Ta nastavitev omogoča uporabo strogega razčlenjevalnika.
true
ui_actions
Niz dejanj, ki jih je treba izvesti v stanju uporabniškega vmesnika, da odkrijete kodo CSS na vrhu strani. Oglejte si dokumentacijo o dejanjih uporabniškega vmesnika spodaj.
[{"viewport":"360x640"}, {"run": true}]

Prikaži primer konfiguracije

Primer kritične konfiguracije generatorja 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": "Nastavite vidno polje za odkrivanje CSS na vrhu strani."
    },
    {
      "wait": 1000,
      "notes": "Počakajte 1000 ms, da omogočite upodabljanje vidnega polja."
    },
    {
      "run": true,
      "notes": "Zaženite kritični generator CSS (izračun CSS na vrhu strani)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Sproži nov MouseEvent na elementu DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvedite skript, v tem primeru zaprite meni, preden nadaljujete z naslednjim vidnim poljem."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Dejanja uporabniškega vmesnika generatorja kritičnih CSS

Kritični generator CSS zagotavlja nadzor brskalnika, podoben Puppeteerju. Parameter ui_actions sprejme matriko z objekti dejanj uporabniškega vmesnika, ki določajo spremembe stanja uporabniškega vmesnika v kronološkem vrstnem redu.

run

Zaženite kritični generator CSS v trenutnem stanju uporabniškega vmesnika. To dejanje je treba ponoviti vsakič, ko se spremeni stanje uporabniškega vmesnika, da odkrijete novo kodo CSS na vrhu strani.

{
  "run": true
}

wait

Počakajte nekaj milisekund, preden nadaljujete z naslednjim dejanjem.

{
  "wait": 1000
}

viewport

Nastavite velikost vidnega polja.

{
  "viewport": "1300x900"
}

scroll

Pomaknite se po vidnem polju. Možnost sprejme številsko vrednost (slikovne pike od vrha), odstotni niz ( 50% ) ali matriko s položaji [x,y] v slikovnih pikah.

{
  "scroll": 400
}

event

Sproži dogodek brskalnika ( new Event() ) na neobveznem izbirniku DOM.

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

mouseevent

Sproži dogodek miške ( new MouseEvent() ) na neobveznem izbirniku DOM. Dejanje sprejme parameter mouseEventInit z možnostmi MouseEvent , ki vključuje možnost nastavitve koordinat x,y. Ko je mouseEventInit izpuščen, so privzete možnosti {"bubbles": true,"cancelable": true} .

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

script

Ocenite kodo javascript. To dejanje omogoča izvajanje kode javascript na strani, npr. zapiranje pojavnih oken pred nadaljnjimi spremembami stanja uporabniškega vmesnika.

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

fn

Izvedite funkcijo javascript. To dejanje omogoča izvajanje vnaprej konfigurirane funkcije javascript. Dodatna možnost "promise":true omogoča, da pričakujete obljubo in počakate, da se obljuba razreši, preden nadaljujete z naslednjim dejanjem.

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

notes

Vsak objekt dejanja sprejme parameter notes , ki ga je mogoče uporabiti za dodajanje opisnega besedila.

{
  "script": "add_to_cart();",
  "notes": "opis dejanj uporabniškega vmesnika za osebno uporabo"
}

Prikaži primer konfiguracije

Primer konfiguracije dejanj uporabniškega vmesnika

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Nastavite vidno polje za odkrivanje CSS na vrhu strani."
    },
    {
      "wait": 1000,
      "notes": "Počakajte 1000 ms, da omogočite upodabljanje vidnega polja."
    },
    {
      "run": true,
      "notes": "Zaženite kritični generator CSS (izračun CSS na vrhu strani)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Sproži nov MouseEvent na elementu DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvedite skript, v tem primeru zaprite meni, preden nadaljujete z naslednjim vidnim poljem."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Neuporabljen CSS odstranjevalec

Odstranjevalec neuporabljenih CSS uporablja isto programsko opremo kot kritični ekstraktor CSS in sprejema skoraj enake konfiguracijske možnosti, vključno z nadzorom brskalnika, podobnega Puppeteerju, prek dejanj uporabniškega vmesnika. Orodje omogoča tudi ekstrahiranje neuporabljenega CSS.

Prikaži primer konfiguracije

Primer konfiguracije neuporabljenega odstranjevalca 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
    }
  ]
}

Odstranjevalec podvojenih CSS

Odstranjevalec podvojenih CSS omogoča primerjavo dveh slogovnih datotek in odstranitev ali ekstrahiranje podvojenih CSS.

Prikaži primer konfiguracije

Primer konfiguracije orodja za odstranjevanje podvojenih CSS

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

Drugo vnosno polje sprejme številko indeksa slogovne datoteke. Indeks slogovne datoteke najdete v pregledu slogovne datoteke na zavihku z nastavitvami.

Pregled indeksa slogovne tabele Pregled indeksa slogovne tabele

Naložite lahko datoteko slogov ali primerjate datoteke slogov z zunanjih URL-jev, tako da ustvarite novo datoteko slogov. Nato lahko uvozite URL-je ali naložite slogovne datoteke in uporabite indeks iz nove slogovne datoteke v programu za odstranjevanje dvojnikov CSS.

Uvozite ali naložite slogovne datoteke Uvozite ali naložite slogovne datoteke

Ko je konfiguriran, pritisnite gumb, da zaženete odstranjevalec podvojenih CSS. Komentar CSS bo prikazal osnovno statistiko posledično zmanjšanega CSS.

Rezultat odstranjevanja dvojnikov CSS Rezultat odstranjevanja dvojnikov CSS