Kriittinen CSS-generaattori

Ilmainen selainwidget edistyneelle kriittiselle CSS-generaattorille ja sivun yläosan optimoijalle . Työkalu pikselin täydellisen tuloksen saavuttamiseksi mahdollisimman pienellä CSS:llä.

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.

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.

Asentaa

Asenna widget vedä tämä linkki🗔 Kriittinen CSS suosikkipalkkiin tai kopioi ja liitä alla oleva koodi.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="Kriittinen CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

Sivun yläosan optimointi

Kriittinen CSS-generaattori ja sivun yläosan optimointi

Critical CSS -generaattori mahdollistaa Googlen Core Web Vitalsin poistamisen käyttämättömän CSS- rangaistuksen puhtaasti vähimmäisCSS:n perusteella.

ominaisuudet

1. Edistyksellinen kriittinen CSS-generaattori

   1. Räätälöity, joka perustuu PostCSS:ään , joka on yksi parhaista CSS-jäsentimistä.
   2. Tukee useita näyttöportteja (työpöytä + mobiili) reagoivaa kriittistä CSS:ää varten.
   3. Nukketeatterin kaltainen selaimen ohjaus, mukaan lukien napsautus, hiiritapahtumat (hover, move jne.), vieritys, mukautetun JavaScript-koodin suorittaminen ja paljon muuta.
   4. Raaka ei-optimoitu puhdas kriittinen CSS-tulostus.

2. Sivun yläosan optimointi

   1. Vertaa kriittistä CSS:ää alkuperäiseen CSS:ään.
   2. Mukautettavat pikselimittaviivaimet.

3. Kehittyneet optimointityökalut

   1. Käyttämätön CSS-poistotyökalu kriittisen CSS:n poistamiseen tyylitaulukoista.
   2. Ammattimainen CSS-pakkaus (pienentäminen) ja optimointiohjelmisto.
   3. Rikkinäinen CSS-korjaus. Työkalu virheellisen CSS:n korjaamiseen.
   4. Automaattinen etuliite. Työkalu selaimen etuliitteiden lisäämiseen CSS:ään.
   5. CSS-tilastot ja analytiikka.
   6. CSS kaunistaa.
   7. Kehittynyt CSS-lint.
   8. Kopioiden CSS-poistaja.
   9. Edistyksellinen CSS-editori yhdistettynä CSS-linttiin optimointivinkkeineen.

Kuinka käyttää

Vaihe 1: käynnistä selainwidget sivulla

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

Vaihe 2: luo kriittinen CSS

Kriittinen CSS-generaattori pääsee käsiksi otsikon Työkalut- välilehden kautta.

Configure the JSON using the options in the the documentation.

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.

Näytä esimerkkikonfiguraatio

{
  "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": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "script": "add_to_cart();",
  "notes": "kuvaus käyttöliittymätoiminnoista henkilökohtaiseen käyttöön"
}

Näytä esimerkkikonfiguraatio

{
  "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.

Näytä esimerkkikonfiguraatio

{
  "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.

Näytä esimerkkikonfiguraatio

{
  "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.

Tyylitaulukkohakemiston yleiskatsaus

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.

Tuo tai lähetä tyylisivuja

Kun olet määrittänyt, paina painiketta käynnistääksesi kaksoiskappaleen CSS-poistotoiminnon. CSS-kommentti näyttää tuloksena olevan supistetun CSS:n perustilastot.

Kaksoiskappaleen CSS-poistotyökalun tulos