Kriittinen CSS-generaattori
Ilmainen selainwidget edistyneelle kriittiselle CSS-generaattorille ja sivun yläosan optimoijalle .
Sivun yläosan optimointi
Johdanto
Kriittinen CSS-generaattori mahdollistaa Googlen Core Web Vitalsin poistamisen käyttämättömän CSS-rangaistuksen poistamisen puhtaasti vähimmäisCSS:n perusteella. Se mahdollistaa pikselin täydellisen tuloksen saavuttamisen.
Paras kriittinen CSS-tulos saavutetaan oikealla selaimella.
Selainwidget suoritetaan sivulla, jolta kriittinen CSS puretaan, ja siksi sillä on täysi pääsy alkuperäiseen CSS-ympäristöön.
Voit valita tyylisivut tai upotetut tyylisivuelementit, joista voit poimia tärkeitä CSS-tiedostoja. Tämä on kätevää luoda kriittistä CSS:ää, joka voidaan jakaa sivujen välillä.
Selainwidgetissä on myös ominaisuus kriittisen CSS:n poistamiseksi tyylitaulukoista.
Työkalu on vakoiluton. Ei Google Analyticsia tai seurantaa. Turvallinen käyttää ja sitä voidaan käyttää paikallisesti Service Worker -välimuistin kautta.
Selain-widget tarjoaa esimerkin edistyneemmistä kriittisistä CSS-ohjelmistoista, joita voidaan käyttää Chrome-selaimen kautta Google Cloudissa. Katso lisätietoja ammattimaisesta optimointilaajennuksestamme .
Asentaa
Asenna widget
suosikkipalkkiin tai kopioi ja liitä alla oleva koodi.x.pagespeed.pro
säilyttämään asetukset eri verkkotunnuksissa ja käyttämään widgetiä offline-tilassa tai localhost
.ominaisuudet
Edistyksellinen kriittinen CSS-generaattori
- Räätälöity, joka perustuu PostCSS:ään , joka on yksi parhaista CSS-jäsentimistä.
- Tukee useita näyttöportteja (työpöytä + mobiili) reagoivaa kriittistä CSS:ää varten.
- Nukketeatterin kaltainen selaimen ohjaus, mukaan lukien napsautus, hiiritapahtumat (hover, move jne.), vieritys, mukautetun JavaScript-koodin suorittaminen ja paljon muuta.
- Raaka ei-optimoitu puhdas kriittinen CSS-tulostus.
Sivun yläosan optimointi
- Vertaa kriittistä CSS:ää alkuperäiseen CSS:ään.
- Mukautettavat pikselimittaviivaimet.
Kehittyneet optimointityökalut
- Käyttämätön CSS-poistotyökalu kriittisen CSS:n poistamiseen tyylitaulukoista.
- Ammattimainen CSS-pakkaus (pienentäminen) ja optimointiohjelmisto.
- Rikkinäinen CSS-korjaus. Työkalu virheellisen CSS:n korjaamiseen.
- Automaattinen etuliite. Työkalu selaimen etuliitteiden lisäämiseen CSS:ään.
- CSS-tilastot ja analytiikka.
- CSS kaunistaa.
- Kehittynyt CSS-lint.
- Kopioiden CSS-poistaja.
- Edistyksellinen CSS-editori yhdistettynä CSS-linttiin optimointivinkkeineen.
Kuinka käyttää
Vaihe 1: käynnistä selainwidget sivulla
Siirry sivulle, jolta haluat purkaa tärkeän CSS:n, ja käynnistä selaimen widget. Napsauta tästä saadaksesi asennusohjeet.
Vaihe 2: luo kriittinen CSS
Kriittinen CSS-generaattori pääsee käsiksi otsikon Työkalut- välilehden kautta.
Määritä JSON käyttämällä dokumentaation asetuksia.
Vaihe 3: optimoi tulos
Kriittisen CSS-generaattorin tulos on raaka ja vaatii lisäoptimointia, kuten pakkausta.
Editointivalikon Optimoi- painike mahdollistaa edistyneen koodin optimoinnin ja pakkaamisen.
Dokumentointi
Kriittinen CSS-generaattori
Kriittinen CSS-generaattori hyväksyy seuraavat vaihtoehdot.
Esimerkki kriittisen CSS-generaattorin konfiguraatiosta
{
"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": "Aseta näkymä sivun yläosan CSS-etsintää varten."
},
{
"wait": 1000,
"notes": "Odota 1 000 ms, jotta kuvaportti hahmontuu."
},
{
"run": true,
"notes": "Suorita kriittinen CSS-generaattori (sivun yläosan CSS-laskenta)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Käynnistä uusi MouseEvent a.nav-valikon DOM-elementissä."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Suorita komentosarja, sulje tässä tapauksessa valikko ennen kuin jatkat seuraavaan näyttöporttiin."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Kriittisen CSS-generaattorin käyttöliittymätoiminnot
Kriittinen CSS-generaattori tarjoaa Puppeteer-tyyppisen selaimen ohjauksen. Parametri ui_actions
hyväksyy taulukon, jossa on käyttöliittymän toimintoobjekteja, jotka määrittävät käyttöliittymän tilan muutokset kronologisessa järjestyksessä.
run
Suorita kriittinen CSS-generaattori nykyisessä käyttöliittymän tilassa. Tämä toiminto on toistettava aina, kun käyttöliittymän tila on muuttunut, jotta voidaan löytää uusi sivun yläosan CSS-koodi.
{
"run": true
}
wait
Odota muutama millisekunti ennen kuin jatkat seuraavaan toimintoon.
{
"wait": 1000
}
viewport
Aseta näkymän koko.
{
"viewport": "1300x900"
}
scroll
Vieritä näkymää. Vaihtoehto hyväksyy numeerisen arvon (pikseliä ylhäältä), prosenttiosuuden ( 50%
) tai taulukon, jossa on [x,y]
-paikka pikseleinä.
{
"scroll": 400
}
event
Käynnistä selaintapahtuma ( new Event()
) valinnaisella DOM-valitsimella.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Käynnistä hiiren tapahtuma ( new MouseEvent()
) valinnaisella DOM-valitsimella. Toiminto hyväksyy mouseEventInit
parametrin MouseEvent-asetuksilla , joka sisältää mahdollisuuden asettaa x,y-koordinaatit. Kun mouseEventInit
jätetään pois, oletusasetukset ovat {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Arvioi javascript-koodi. Tämä toiminto mahdollistaa JavaScript-koodin suorittamisen sivulla, esimerkiksi ponnahdusikkunoiden sulkemisen ennen käyttöliittymän tilan lisämuutoksia.
{
"script": "Popups.close();"
}
fn
Suorita javascript-toiminto. Tämä toiminto mahdollistaa esikonfiguroidun javascript-toiminnon suorittamisen. Lisävaihtoehto "promise":true
mahdollistaa lupauksen odottamisen ja lupauksen toteutumisen ennen kuin jatkat seuraavaan toimintoon.
{
"fn": "action_to_perform",
"promise": true
}
notes
Jokainen toimintoobjekti hyväksyy notes
, jota voidaan käyttää kuvaavan tekstin lisäämiseen.
{
"script": "add_to_cart();",
"notes": "kuvaus käyttöliittymätoiminnoista henkilökohtaiseen käyttöön"
}
Esimerkki käyttöliittymätoimintojen konfiguraatiosta
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Aseta näkymä sivun yläosan CSS-etsintää varten."
},
{
"wait": 1000,
"notes": "Odota 1 000 ms, jotta kuvaportti hahmontuu."
},
{
"run": true,
"notes": "Suorita kriittinen CSS-generaattori (sivun yläosan CSS-laskenta)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Käynnistä uusi MouseEvent a.nav-valikon DOM-elementissä."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Suorita komentosarja, sulje tässä tapauksessa valikko ennen kuin jatkat seuraavaan näyttöporttiin."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Käyttämätön CSS-poistoaine
Käyttämätön CSS-poistaja käyttää samaa ohjelmistoa kuin kriittinen CSS-poisto ja hyväksyy lähes samat konfigurointivaihtoehdot, mukaan lukien Puppeteer-tyyppinen selaimen ohjaus käyttöliittymätoimintojen kautta. Työkalu mahdollistaa myös käyttämättömän CSS:n purkamisen.
Esimerkki käyttämättömän CSS-poistoohjelman konfiguraatiosta
{
"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
}
]
}
Kopioiden CSS-poistaja
CSS-kopioiden poistotyökalu mahdollistaa kahden tyylitaulukon vertailun ja CSS-kopion poistamisen tai purkamisen.
Esimerkki kaksoiskappaleen CSS-poistosovelluksen konfiguraatiosta
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
Toinen syöttökenttä hyväksyy tyylitaulukon indeksinumeron. Löydät tyylitaulukon hakemiston asetusten välilehden tyylitaulukon yleiskatsauksesta.
Voit ladata tyylitaulukon tai verrata tyylitaulukoita ulkoisista URL-osoitteista luomalla uuden tyylitaulukon. Tämän jälkeen voit tuoda URL-osoitteita tai ladata tyylitaulukot ja käyttää hakemistoa uudesta tyylitaulukosta kopioiden CSS-poistajassa.
Kun olet määrittänyt, paina painiketta käynnistääksesi kaksoiskappaleen CSS-poistotoiminnon. CSS-kommentti näyttää tuloksena olevan supistetun CSS:n perustilastot.