Generator CSS critic
Un widget de browser gratuit pentru un generator CSS critic avansat și un optimizator superior . Un instrument pentru a obține un rezultat perfect în pixeli cu CSS minim posibil.
Cel mai bun rezultat critic CSS este obținut într-un browser real.
Widgetul browserului este executat pe pagina în care urmează să fie extras CSS critic și, prin urmare, are acces nativ complet la mediul CSS original.
Puteți selecta foile de stil sau elementele din foaia de stil din care să extrageți CSS critic. Acest lucru este util pentru a crea CSS critic care poate fi partajat între pagini.
Widgetul browserului are și o funcție pentru a elimina CSS critic din foile de stil.
Instrumentul nu conține spioni. Fără Google Analytics sau urmărire. Sigur de utilizat și poate fi folosit local printr-un cache 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.
Instalare
Pentru a instala widget-ul,
în bara de favorite sau copiați și inserați codul de mai jos.x.pagespeed.pro
să persiste setările pe domenii și să folosească widgetul offline sau pe localhost
.Optimizator deasupra pliului
Generator CSS critic și optimizator de deasupra plierii
Generatorul de CSS critic permite rezolvarea penalizării CSS neutilizate de Core Web Vitals de la Google doar pe baza minimului CSS.
Caracteristici
Generator CSS critic avansat
- Dezvoltat personalizat pe baza PostCSS , unul dintre cei mai buni analizatori CSS.
- Suportă mai multe porturi de vizualizare (desktop + mobil) pentru CSS critic receptiv .
- Puppeteer cum ar fi controlul browserului, inclusiv clic, evenimente ale mouse-ului (pasare cu mouse-ul, mutare etc), derulare, execuție personalizată de cod javascript și multe altele.
- Ieșire CSS critică pură neoptimizată.
Optimizator deasupra pliului
- Comparați CSS critic cu CSS original.
- Rigle de măsurare a pixelilor personalizabile.
Instrumente avansate de optimizare
- Eliminator CSS neutilizat pentru a elimina CSS critic din foile de stil.
- Software profesional de compresie CSS (minimificare) și optimizare.
- Reparație CSS spartă. Un instrument pentru a remedia CSS incorect.
- Autoprefixer. Un instrument pentru aplicarea prefixelor de browser la CSS.
- Statistici și analize CSS.
- CSS înfrumuseța.
- Lint CSS avansat.
- Eliminator CSS duplicat.
- Editor CSS avansat conectat la CSS lint cu sfaturi de optimizare.
Cum se utilizează
Pasul 1: porniți widgetul browser pe o pagină
Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.
Pasul 2: generați CSS critic
Generatorul CSS critic poate fi accesat prin fila Instrumente din antet.
Configure the JSON using the options in the the documentation.
Pasul 3: optimizați rezultatul
Ieșirea generatorului CSS critic este brută și necesită o optimizare suplimentară, cum ar fi compresia.
Butonul Optimizare din meniul editorului permite aplicarea de optimizare și compresie avansată a codului.
Documentație
Generator CSS critic
Generatorul CSS critic acceptă următoarele opțiuni.
Afișați exemplul de configurare
Exemplu de configurare critică a generatorului 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": "Setați fereastra pentru descoperirea CSS deasupra pliului."
},
{
"wait": 1000,
"notes": "Așteptați 1000 ms pentru a permite redarea feței de vizualizare."
},
{
"run": true,
"notes": "Rulați generatorul de CSS critic (calcul CSS de mai sus)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Lansați noul MouseEvent pe un element DOM din meniu.nav."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Executați un script, în acest caz închideți meniul înainte de a continua cu următoarea fereastră de vizualizare."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Acțiunile UI ale generatorului CSS critic
Generatorul critic de CSS oferă control pe browser asemănător Marionetei. Parametrul ui_actions
acceptă o matrice cu obiecte de acțiune UI care definesc modificările stării UI în ordine cronologică.
run
Rulați generatorul CSS critic în starea curentă a interfeței de utilizator. Această acțiune trebuie repetată de fiecare dată când starea interfeței de utilizare s-a schimbat pentru a descoperi un nou cod CSS de deasupra pliului.
{
"run": true
}
wait
Așteptați un număr de milisecunde înainte de a continua cu următoarea acțiune.
{
"wait": 1000
}
viewport
Setați dimensiunea ferestrei de vizualizare.
{
"viewport": "1300x900"
}
scroll
Derulați fereastra de vizualizare. Opțiunea acceptă o valoare numerică (pixeli de sus), un șir procentual ( 50%
) sau o matrice cu poziții [x,y]
în pixeli.
{
"scroll": 400
}
event
Declanșați un eveniment de browser ( new Event()
) pe un selector DOM opțional.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Declanșează un eveniment mouse ( new MouseEvent()
) pe un selector DOM opțional. Acțiunea acceptă un parametru mouseEventInit
cu opțiuni MouseEvent care include posibilitatea de a seta coordonatele x,y. Când mouseEventInit
este omis, opțiunile implicite sunt {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Evaluați codul javascript. Această acțiune permite executarea codului javascript pe o pagină, de exemplu, pentru a închide ferestrele pop-up înainte de a face alte modificări ale stării UI.
{
"script": "Popups.close();"
}
fn
Executați o funcție javascript. Această acțiune permite executarea unei funcții javascript preconfigurate. Opțiunea suplimentară "promise":true
vă permite să așteptați o promisiune și să așteptați ca promisiunea să se rezolve înainte de a continua cu următoarea acțiune.
{
"fn": "action_to_perform",
"promise": true
}
notes
Fiecare obiect de acțiune acceptă un parametru notes
care poate fi folosit pentru a adăuga text descriptiv.
{
"script": "add_to_cart();",
"notes": "descrierea acțiunii UI pentru uz personal"
}
Afișați exemplul de configurare
Exemplu de configurare a acțiunilor UI
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Setați fereastra pentru descoperirea CSS deasupra pliului."
},
{
"wait": 1000,
"notes": "Așteptați 1000 ms pentru a permite redarea feței de vizualizare."
},
{
"run": true,
"notes": "Rulați generatorul de CSS critic (calcul CSS de mai sus)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Lansați noul MouseEvent pe un element DOM din meniu.nav."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Executați un script, în acest caz închideți meniul înainte de a continua cu următoarea fereastră de vizualizare."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Eliminator CSS neutilizat
Instrumentul de eliminare CSS neutilizat folosește același software ca și extractorul CSS critic și acceptă aproape aceleași opțiuni de configurare, inclusiv controlul browserului tip Puppeteer prin acțiunile UI. Instrumentul permite, de asemenea, extragerea CSS neutilizate.
Afișați exemplul de configurare
Exemplu de configurare pentru eliminarea CSS neutilizată
{
"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
}
]
}
Eliminator CSS duplicat
Eliminatorul CSS duplicat face posibilă compararea a două foi de stil și eliminarea sau extragerea CSS-ului duplicat.
Afișați exemplul de configurare
Exemplu de configurare pentru eliminarea CSS duplicat
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
Al doilea câmp de introducere acceptă numărul de index al foii de stil. Puteți găsi indexul unei foi de stil în prezentarea generală a foii de stil din fila setări.
Prezentare generală a indexului foii de stil
Puteți încărca o foaie de stil sau puteți compara foi de stil de la URL-uri externe, creând o nouă foaie de stil. Puteți apoi să importați adrese URL sau să încărcați foile de stil și să utilizați indexul din noua foaie de stil în programul de eliminare CSS duplicat.
Importați sau încărcați foi de stil
Odată configurat, apăsați butonul pentru a porni eliminatorul CSS duplicat. Un comentariu CSS va afișa statisticile de bază ale CSS-ului redus rezultat.
Rezultatul eliminatorului CSS duplicat