Kritikus CSS generátor
Ingyenes böngésző-widget fejlett kritikus CSS-generátorhoz és hajtás feletti optimalizálóhoz .
Hajtás feletti optimalizáló
Bevezetés
A Critical CSS generátor lehetővé teszi a Google Core Web Vitals feloldását , eltávolítja a fel nem használt CSS büntetést, pusztán a minimális CSS alapján. Lehetővé teszi a pixel tökéletes eredmény elérését.
A legjobb kritikus CSS-eredmény valódi böngészőben érhető el.
A böngésző widgetet azon az oldalon hajtják végre, amelyen a kritikus CSS-t ki kell bontani, ezért teljes natív hozzáféréssel rendelkezik az eredeti CSS-környezethez.
Kiválaszthatja azokat a stíluslapokat vagy soron belüli stíluslapelemeket, amelyekből ki szeretné bontani a kritikus CSS-t. Ez hasznos az oldalak között megosztható kritikus CSS létrehozásához.
A böngésző widget egy olyan funkcióval is rendelkezik, amely eltávolítja a kritikus CSS-t a stíluslapokról.
Az eszköz kémmentes. Nincs Google Analytics vagy nyomon követés. Használata biztonságos, és a Service Worker gyorsítótárán keresztül helyileg is használható.
A böngésző-widget fejlettebb kritikus CSS-szoftverre nyújt példát, amely a Google Cloud Chrome böngészőjén keresztül használható. További információért tekintse meg professzionális optimalizáló bővítményünket .
Telepítés
A widget telepítéséhez
a kedvencek sávba, vagy másolja és illessze be az alábbi kódot.x.pagespeed.pro
domainhez a beállítások megőrzéséhez a domainek között, és a modul offline vagy localhost
on történő használatához.Jellemzők
Fejlett kritikus CSS-generátor
- Egyedi fejlesztés a PostCSS- en, az egyik legjobb CSS-elemzőn alapul.
- Támogatja a több nézetablakot (asztali + mobil) az érzékeny kritikus CSS- hez.
- Bábos, mint a böngészővezérlés, beleértve a kattintást, az egér eseményeket (lebegés, mozgat stb.), a görgetést, az egyéni JavaScript-kód végrehajtását és még sok mást.
- Nyers, nem optimalizált, tiszta kritikus CSS-kimenet.
Hajtás feletti optimalizáló
- Hasonlítsa össze a kritikus CSS-t az eredeti CSS-sel.
- Testreszabható pixelmérő vonalzók.
Speciális optimalizálási eszközök
- Fel nem használt CSS-eltávolító a kritikus CSS eltávolításához a stíluslapokról.
- Professzionális CSS tömörítő (minifikáló) és optimalizáló szoftver.
- Törött CSS javítás. A hibás CSS javítására szolgáló eszköz.
- Autoprefixer. Eszköz a böngésző előtagjainak CSS-hez való alkalmazásához.
- CSS statisztikák és elemzések.
- CSS szépít.
- Speciális CSS-szösz.
- Duplikált CSS-eltávolító.
- Fejlett CSS-szerkesztő, amely a CSS-linthez kapcsolódik optimalizálási tippekkel.
Hogyan kell használni
1. lépés: indítsa el a böngésző widgetet egy oldalon
Keresse meg azt az oldalt, amelyhez a kritikus CSS-t ki szeretné bontani, és indítsa el a böngésző widgetet. Kattintson ide a telepítési utasításokért.
2. lépés: hozzon létre kritikus CSS-t
A kritikus CSS-generátor a fejlécben található Eszközök fülön keresztül érhető el.
Konfigurálja a JSON-t a dokumentációban található beállítások segítségével.
3. lépés: optimalizálja az eredményt
A kritikus CSS-generátor kimenete nyers, és további optimalizálást igényel, például tömörítést.
Az Optimalizálás gomb a szerkesztő menüben lehetővé teszi a speciális kódoptimalizálás és -tömörítés alkalmazását.
Dokumentáció
Kritikus CSS generátor
A kritikus CSS-generátor a következő lehetőségeket fogadja el.
Példakonfiguráció megjelenítése
Példa Kritikus CSS-generátor konfigurációja
{
"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": "Állítsa be a nézetablakot a hajtás feletti CSS-felderítéshez."
},
{
"wait": 1000,
"notes": "Várjon 1000 ms-t a nézetablak megjelenítéséhez."
},
{
"run": true,
"notes": "Futtassa a kritikus CSS-generátort (a hajtás feletti CSS-számítás)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Új MouseEvent aktiválása a.nav-menu DOM elemén."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Futtasson le egy parancsfájlt, ebben az esetben zárja be a menüt, mielőtt folytatná a következő nézetablakkal."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
A kritikus CSS-generátor felhasználói felületi műveletei
A kritikus CSS-generátor Puppeteer-szerű böngészővezérlést biztosít. Az ui_actions
paraméter egy tömböt fogad el olyan UI műveletobjektumokkal, amelyek időrendi sorrendben határozzák meg a felhasználói felület állapotváltozásait.
run
Futtassa a kritikus CSS-generátort az aktuális felhasználói felületen. Ezt a műveletet minden alkalommal meg kell ismételni, amikor a felhasználói felület állapota megváltozik, hogy új, hajtás feletti CSS-kódot fedezhessen fel.
{
"run": true
}
wait
Várjon néhány milliszekundumot, mielőtt folytatná a következő műveletet.
{
"wait": 1000
}
viewport
Állítsa be a nézetablak méretét.
{
"viewport": "1300x900"
}
scroll
Görgesse a nézetablakot. Az opció elfogad egy numerikus értéket (képpontok felülről), százalékos karakterláncot ( 50%
) vagy egy [x,y]
pozíciót tartalmazó tömböt pixelben.
{
"scroll": 400
}
event
Indítson el egy böngészőeseményt ( new Event()
) egy opcionális DOM-választón.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Indítson el egy egéreseményt ( new MouseEvent()
) egy opcionális DOM-választón. A művelet elfogad egy mouseEventInit
paramétert MouseEvent opciókkal , amely magában foglalja az x,y koordináták beállítását. Ha mouseEventInit
ki van hagyva, az alapértelmezett beállítások a következők {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Értékelje a javascript kódot. Ez a művelet lehetővé teszi JavaScript-kód futtatását egy oldalon, például a felugró ablakok bezárását, mielőtt további UI-állapot-módosításokat hajtana végre.
{
"script": "Popups.close();"
}
fn
Hajtson végre egy javascript függvényt. Ez a művelet lehetővé teszi egy előre konfigurált javascript függvény végrehajtását. Az "promise":true
extra opció lehetővé teszi, hogy várjon egy ígéretet, és várja meg az ígéret teljesülését, mielőtt folytatná a következő műveletet.
{
"fn": "action_to_perform",
"promise": true
}
notes
Minden műveletobjektum elfogad egy notes
paramétert, amely leíró szöveg hozzáadására használható.
{
"script": "add_to_cart();",
"notes": "az UI művelet leírása személyes használatra"
}
Példakonfiguráció megjelenítése
Példa UI műveletek konfigurációja
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Állítsa be a nézetablakot a hajtás feletti CSS-felderítéshez."
},
{
"wait": 1000,
"notes": "Várjon 1000 ms-t a nézetablak megjelenítéséhez."
},
{
"run": true,
"notes": "Futtassa a kritikus CSS-generátort (a hajtás feletti CSS-számítás)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Új MouseEvent aktiválása a.nav-menu DOM elemén."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Futtasson le egy parancsfájlt, ebben az esetben zárja be a menüt, mielőtt folytatná a következő nézetablakkal."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Fel nem használt CSS-eltávolító
A használaton kívüli CSS-eltávolító ugyanazt a szoftvert használja, mint a kritikus CSS-eltávolító, és szinte ugyanazokat a konfigurációs lehetőségeket fogadja el, beleértve a Puppeteer-szerű böngészővezérlést a felhasználói felület műveletei révén. Az eszköz lehetővé teszi a fel nem használt CSS kinyerését is.
Példakonfiguráció megjelenítése
Példa a nem használt CSS-eltávolító konfigurációjára
{
"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
}
]
}
Duplikált CSS-eltávolító
A duplikált CSS-eltávolító lehetővé teszi két stíluslap összehasonlítását, és az ismétlődő CSS eltávolítását vagy kibontását.
Példakonfiguráció megjelenítése
Példa a duplikált CSS-eltávolító konfigurációjára
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
A második beviteli mező elfogadja a stíluslap indexszámát. A stíluslap indexét a beállítások lap stíluslap áttekintésében találja.
Feltölthet stíluslapot, vagy összehasonlíthat stíluslapokat külső URL-ekről egy új stíluslap létrehozásával. Ezután importálhat URL-eket, vagy feltöltheti a stíluslapokat, és használhatja az új stíluslap indexét a duplikált CSS-eltávolítóban.
A konfigurálás után nyomja meg a gombot a duplikált CSS-eltávolító elindításához. A CSS megjegyzés az eredményül kapott csökkentett CSS alapvető statisztikáit jeleníti meg.