Kritični CSS generator
Besplatan preglednik-widget za napredni generator kritičnog CSS-a i optimizator gornjeg dijela stranice .
Optimizator na gornjoj polovici stranice
Uvod
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. Omogućuje postizanje savršenog rezultata piksela .
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.
Widget preglednika pruža primjer naprednijeg kritičnog CSS softvera koji se može koristiti putem preglednika Chrome u Google Cloudu. Za više informacija pogledajte naš dodatak za profesionalnu optimizaciju .
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
.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
Dođite do stranice za koju želite izdvojiti kritični CSS i pokrenite widget preglednika. Kliknite ovdje za upute za instalaciju.
Korak 2: generirajte kritični CSS
Kritičnom CSS generatoru može se pristupiti putem kartice Alati u zaglavlju.
Konfigurirajte JSON pomoću opcija u dokumentaciji .
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.
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.
Nakon konfiguracije pritisnite gumb za pokretanje programa za uklanjanje duplikata CSS-a. CSS komentar prikazat će osnovnu statistiku rezultirajućeg smanjenog CSS-a.