Kritični CSS generator
Besplatan preglednik-widget za napredni generator kritičnog CSS-a i optimizator gornjeg dijela stranice . Alat za postizanje savršenog rezultata piksela s minimalnim mogućim CSS-om.
Najbolji kritični CSS rezultat postiže se u pravom pregledniku.
Widget preglednika izvršava se na stranici na kojoj se kritični CSS treba ekstrahirati i stoga ima potpun izvorni pristup izvornom CSS okruženju.
Možete odabrati stilske tablice ili ugrađene elemente stilske tablice iz kojih ćete izdvojiti kritični CSS. Ovo je zgodno za stvaranje kritičnog CSS-a koji se može dijeliti između stranica.
Widget preglednika također ima značajku za uklanjanje kritičnog CSS-a iz listova stilova.
Alat je bez špijuna. Nema Google Analyticsa ili praćenja. Siguran za upotrebu i može se koristiti lokalno putem predmemorije Service Worker.
The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.
Instalirati
Da biste instalirali widget,
na traku favorita ili kopirajte i zalijepite kod ispod.x.pagespeed.pro
za održavanje postavki na više domena i korištenje widgeta izvan mreže ili na localhost
.Optimizator na gornjoj polovici stranice
Kritični generator CSS-a i optimizator gornjeg dijela stranice
Generator kritičnog CSS-a omogućuje rješavanje Googleovih temeljnih web pokazatelja uklanjanja kazne za neiskorišteni CSS isključivo na temelju minimalnog CSS-a.
Značajke
Napredni kritični CSS generator
- Prilagođeno razvijeno na temelju PostCSS-a , jednog od najboljih CSS parsera.
- Podržava više prozora za prikaz (stolno računalo + mobilni) za responzivni kritični CSS .
- Puppeteer poput kontrole preglednika uključujući klikove, događaje miša (lebdjenje, pomicanje itd.), pomicanje, prilagođeno izvršavanje javascript koda i još mnogo toga.
- Sirovi neoptimizirani čisti kritični CSS izlaz.
Optimizator na gornjoj polovici stranice
- Usporedite kritični CSS s izvornim CSS-om.
- Prilagodljiva ravnala za mjerenje piksela.
Napredni alati za optimizaciju
- Alat za uklanjanje neiskorištenog CSS-a za uklanjanje kritičnog CSS-a iz tablica stilova.
- Profesionalni softver za kompresiju (minify) i optimizaciju CSS-a.
- Popravak pokvarenog CSS-a. Alat za popravak neispravnog CSS-a.
- Automatski prefiks. Alat za primjenu prefiksa preglednika na CSS.
- CSS statistika i analitika.
- CSS uljepšati.
- Napredni CSS lint.
- Uklanjanje duplikata CSS-a.
- Napredni CSS uređivač povezan s CSS lintom sa savjetima za optimizaciju.
Kako koristiti
Korak 1: pokrenite widget preglednika na stranici
Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.
Korak 2: generirajte kritični CSS
Kritičnom CSS generatoru može se pristupiti putem kartice Alati u zaglavlju.
Configure the JSON using the options in the the documentation.
Korak 3: optimizirajte rezultat
Izlaz kritičnog CSS generatora je neobrađen i zahtijeva daljnju optimizaciju kao što je kompresija.
Gumb Optimiziraj u izborniku uređivača omogućuje primjenu napredne optimizacije koda i kompresije.
Dokumentacija
Kritični CSS generator
Kritični CSS generator prihvaća sljedeće opcije.
Primjer kritične konfiguracije generatora CSS-a
{
"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": "Postavite okvir za prikaz za otkrivanje CSS-a na gornjoj polovici stranice."
},
{
"wait": 1000,
"notes": "Pričekajte 1000 ms da omogućite renderiranje okvira za prikaz."
},
{
"run": true,
"notes": "Pokrenite kritični CSS generator (izračun CSS-a na gornjoj polovici stranice)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Pokreni novi MouseEvent na DOM elementu.nav-menu."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Izvršite skriptu, u ovom slučaju zatvorite izbornik prije nastavka sa sljedećim okvirom za prikaz."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Akcije korisničkog sučelja generatora kritičnog CSS-a
Kritični CSS generator pruža kontrolu preglednika poput Puppeteera. Parametar ui_actions
prihvaća niz s objektima radnji korisničkog sučelja koji definiraju promjene stanja korisničkog sučelja kronološkim redoslijedom.
run
Pokrenite kritični CSS generator na trenutnom stanju korisničkog sučelja. Ovu radnju treba ponoviti svaki put kada se stanje korisničkog sučelja promijeni kako bi se otkrio novi CSS kod na gornjoj polovici stranice.
{
"run": true
}
wait
Pričekajte nekoliko milisekundi prije nastavka sa sljedećom radnjom.
{
"wait": 1000
}
viewport
Postavite veličinu okvira za prikaz.
{
"viewport": "1300x900"
}
scroll
Pomičite se kroz okvir za prikaz. Opcija prihvaća numeričku vrijednost (pikseli od vrha), postotni niz ( 50%
) ili niz s [x,y]
pozicijama u pikselima.
{
"scroll": 400
}
event
Pokreni događaj preglednika ( new Event()
) na izbornom DOM selektoru.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Pokreni događaj miša ( new MouseEvent()
) na izbornom DOM selektoru. Akcija prihvaća parametar mouseEventInit
s opcijama MouseEvent koji uključuje mogućnost postavljanja x,y koordinata. Kada je mouseEventInit
izostavljen, zadane opcije su {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Procijenite javascript kod. Ova radnja omogućuje izvršavanje javascript koda na stranici, npr. zatvaranje skočnih prozora prije daljnjih promjena stanja korisničkog sučelja.
{
"script": "Popups.close();"
}
fn
Izvršite javascript funkciju. Ova radnja omogućuje izvršavanje unaprijed konfigurirane javascript funkcije. Dodatna opcija "promise":true
omogućuje očekivanje obećanja i čekanje da se obećanje riješi prije nastavka sa sljedećom radnjom.
{
"fn": "action_to_perform",
"promise": true
}
notes
Svaki radni objekt prihvaća parametar notes
koji se može koristiti za dodavanje opisnog teksta.
{
"script": "add_to_cart();",
"notes": "opis radnji korisničkog sučelja za osobnu upotrebu"
}
Primjer konfiguracije radnji korisničkog sučelja
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Postavite okvir za prikaz za otkrivanje CSS-a na gornjoj polovici stranice."
},
{
"wait": 1000,
"notes": "Pričekajte 1000 ms da omogućite renderiranje okvira za prikaz."
},
{
"run": true,
"notes": "Pokrenite kritični CSS generator (izračun CSS-a na gornjoj polovici stranice)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Pokreni novi MouseEvent na DOM elementu.nav-menu."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Izvršite skriptu, u ovom slučaju zatvorite izbornik prije nastavka sa sljedećim okvirom za prikaz."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Alat za uklanjanje neiskorištenog CSS-a
Alat za uklanjanje neiskorištenog CSS-a koristi isti softver kao kritični ekstraktor CSS-a i prihvaća gotovo iste opcije konfiguracije, uključujući kontrolu preglednika poput Puppeteera putem radnji korisničkog sučelja. Alat također omogućuje izdvajanje neiskorištenog CSS-a.
Primjer konfiguracije neiskorištenog alata za uklanjanje CSS-a
{
"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
}
]
}
Uklanjanje duplikata CSS-a
Alat za uklanjanje duplikata CSS-a omogućuje usporedbu dva stilska lista i uklanjanje ili izdvajanje duplikata CSS-a.
Primjer konfiguracije alata za uklanjanje duplikata CSS-a
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
Drugo polje za unos prihvaća indeksni broj stilske tablice. Indeks lista stilova možete pronaći u pregledu lista stilova na kartici postavki.
Pregled indeksa lista stilova
Možete prenijeti stilsku tablicu ili usporediti stilsku tablicu s vanjskih URL-ova stvaranjem nove stilske tablice. Zatim možete uvesti URL-ove ili učitati listove stilova i koristiti indeks iz novog lista stilova u alatu za uklanjanje duplikata CSS-a.
Uvezite ili prenesite tablice stilova
Nakon konfiguracije pritisnite gumb za pokretanje programa za uklanjanje duplikata CSS-a. CSS komentar prikazat će osnovnu statistiku rezultirajućeg smanjenog CSS-a.
Rezultat alata za uklanjanje duplikata CSS-a