Kritični generator CSS
Brezplačen pripomoček brskalnika za napreden kritični generator CSS in optimizator vidnega polja .
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,
v vrstico s priljubljenimi ali kopirajte in prilepite spodnjo kodo.x.pagespeed.pro
za ohranitev nastavitev med domenami in uporabo pripomočka brez povezave ali na localhost
.Lastnosti
Napredni kritični generator CSS
- Razvit po meri na podlagi PostCSS , enega najboljših razčlenjevalcev CSS.
- Podpira več pogledov (namizni + mobilni) za odziven kritičen CSS .
- Puppeteer kot nadzor brskalnika, vključno s klikom, dogodki miške (lebdenje, premikanje itd.), drsenje, izvajanje kode javascript po meri in še veliko več.
- Surovi neoptimizirani čisti kritični izhod CSS.
Optimizator na vrhu strani
- Primerjajte kritični CSS z izvirnim CSS.
- Prilagodljiva ravnila za merjenje slikovnih pik.
Napredna orodja za optimizacijo
- Odstranjevalec neuporabljenih CSS za odstranitev kritičnega CSS iz stilskih listov.
- Profesionalna programska oprema za stiskanje (minify) in optimizacijo CSS.
- Popravilo pokvarjenega CSS. Orodje za popravljanje napačno oblikovanega CSS.
- Samodejna predpona. Orodje za uporabo predpon brskalnika v CSS.
- Statistika in analitika CSS.
- CSS polepša.
- Napredni CSS lint.
- Odstranjevalec podvojenih CSS.
- 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.
Konfigurirajte JSON z uporabo možnosti v dokumentaciji .
3. korak: optimizirajte rezultat
Izhod kritičnega generatorja CSS je neobdelan in zahteva dodatno optimizacijo, kot je stiskanje.
Gumb Optimiziraj v meniju urejevalnika omogoča uporabo napredne optimizacije in stiskanja kode.
Dokumentacija
Kritični generator CSS
Kritični generator CSS sprejema naslednje možnosti.
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"
}
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.
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.
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.
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.
Ko je konfiguriran, pritisnite gumb, da zaženete odstranjevalec podvojenih CSS. Komentar CSS bo prikazal osnovno statistiko posledično zmanjšanega CSS.