Kritični generator CSS

Brezplačen pripomoček brskalnika za napreden kritični generator CSS in optimizator vidnega polja . Orodje za doseganje popolnega rezultata slikovnih pik z najmanjšim možnim CSS.

Najboljši kritični rezultat CSS je dosežen v pravem brskalniku.

Gradnik brskalnika se izvede na strani, na kateri je treba ekstrahirati kritični CSS, in ima zato popoln izvorni dostop do izvirnega okolja CSS.

Izberete lahko slogovne liste ali vgrajene elemente slogovne datoteke, iz katerih želite ekstrahirati kritični CSS. To je priročno za ustvarjanje kritičnega CSS, ki ga je mogoče deliti med stranmi.

Pripomoček brskalnika ima tudi funkcijo za odstranjevanje kritičnega CSS iz stilskih listov.

Orodje je brez vohunov. Brez Google Analytics ali sledenja. Varen za uporabo in se lahko uporablja lokalno prek predpomnilnika 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.

Namestite

Če želite namestiti pripomoček, povlecite to povezavo🗔 Kritični-CSS v vrstico s priljubljenimi ali kopirajte in prilepite spodnjo kodo.

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="Kritični-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);

Optimizator na vrhu strani

Kritičen generator CSS in optimizator na vrhu strani

Generator kritičnih CSS omogoča razrešitev Googlovih ključnih spletnih kazalnikov za odstranitev neuporabljene kazni CSS izključno na podlagi minimalnega CSS.

Lastnosti

1. Napredni kritični generator CSS

   1. Razvit po meri na podlagi PostCSS , enega najboljših razčlenjevalcev CSS.
   2. Podpira več pogledov (namizni + mobilni) za odziven kritičen CSS .
   3. Puppeteer kot nadzor brskalnika, vključno s klikom, dogodki miške (lebdenje, premikanje itd.), drsenje, izvajanje kode javascript po meri in še veliko več.
   4. Surovi neoptimizirani čisti kritični izhod CSS.

2. Optimizator na vrhu strani

   1. Primerjajte kritični CSS z izvirnim CSS.
   2. Prilagodljiva ravnila za merjenje slikovnih pik.

3. Napredna orodja za optimizacijo

   1. Odstranjevalec neuporabljenih CSS za odstranitev kritičnega CSS iz stilskih listov.
   2. Profesionalna programska oprema za stiskanje (minify) in optimizacijo CSS.
   3. Popravilo pokvarjenega CSS. Orodje za popravljanje napačno oblikovanega CSS.
   4. Samodejna predpona. Orodje za uporabo predpon brskalnika v CSS.
   5. Statistika in analitika CSS.
   6. CSS polepša.
   7. Napredni CSS lint.
   8. Odstranjevalec podvojenih CSS.
   9. Napredni urejevalnik CSS, povezan s CSS lint, z nasveti za optimizacijo.

Kako uporabiti

1. korak: zaženite gradnik brskalnika na strani

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

2. korak: ustvarite kritičen CSS

Do kritičnega generatorja CSS lahko dostopate prek zavihka Orodja v glavi.

Configure the JSON using the options in the the documentation.

3. korak: optimizirajte rezultat

Izhod kritičnega generatorja CSS je neobdelan in zahteva dodatno optimizacijo, kot je stiskanje.

Gumb Optimiziraj v meniju urejevalnika omogoča uporabo napredne optimizacije in stiskanja kode.

Dokumentacija

Kritični generator CSS

Kritični generator CSS sprejema naslednje možnosti.

Prikaži primer konfiguracije

{
  "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": "Nastavite vidno polje za odkrivanje CSS na vrhu strani."
    },
    {
      "wait": 1000,
      "notes": "Počakajte 1000 ms, da omogočite upodabljanje vidnega polja."
    },
    {
      "run": true,
      "notes": "Zaženite kritični generator CSS (izračun CSS na vrhu strani)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Sproži nov MouseEvent na elementu DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvedite skript, v tem primeru zaprite meni, preden nadaljujete z naslednjim vidnim poljem."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Dejanja uporabniškega vmesnika generatorja kritičnih CSS

Kritični generator CSS zagotavlja nadzor brskalnika, podoben Puppeteerju. Parameter ui_actions sprejme matriko z objekti dejanj uporabniškega vmesnika, ki določajo spremembe stanja uporabniškega vmesnika v kronološkem vrstnem redu.

{
  "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": "opis dejanj uporabniškega vmesnika za osebno uporabo"
}

Prikaži primer konfiguracije

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Nastavite vidno polje za odkrivanje CSS na vrhu strani."
    },
    {
      "wait": 1000,
      "notes": "Počakajte 1000 ms, da omogočite upodabljanje vidnega polja."
    },
    {
      "run": true,
      "notes": "Zaženite kritični generator CSS (izračun CSS na vrhu strani)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Sproži nov MouseEvent na elementu DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvedite skript, v tem primeru zaprite meni, preden nadaljujete z naslednjim vidnim poljem."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Neuporabljen CSS odstranjevalec

Odstranjevalec neuporabljenih CSS uporablja isto programsko opremo kot kritični ekstraktor CSS in sprejema skoraj enake konfiguracijske možnosti, vključno z nadzorom brskalnika, podobnega Puppeteerju, prek dejanj uporabniškega vmesnika. Orodje omogoča tudi ekstrahiranje neuporabljenega CSS.

Prikaži primer konfiguracije

{
  "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
    }
  ]
}

Odstranjevalec podvojenih CSS

Odstranjevalec podvojenih CSS omogoča primerjavo dveh slogovnih datotek in odstranitev ali ekstrahiranje podvojenih CSS.

Prikaži primer konfiguracije

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Drugo vnosno polje sprejme številko indeksa slogovne datoteke. Indeks slogovne datoteke najdete v pregledu slogovne datoteke na zavihku z nastavitvami.

Pregled indeksa slogovne tabele

Naložite lahko datoteko slogov ali primerjate datoteke slogov z zunanjih URL-jev, tako da ustvarite novo datoteko slogov. Nato lahko uvozite URL-je ali naložite slogovne datoteke in uporabite indeks iz nove slogovne datoteke v programu za odstranjevanje dvojnikov CSS.

Uvozite ali naložite slogovne datoteke

Ko je konfiguriran, pritisnite gumb, da zaženete odstranjevalec podvojenih CSS. Komentar CSS bo prikazal osnovno statistiko posledično zmanjšanega CSS.

Rezultat odstranjevanja dvojnikov CSS