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ó

Kritikus CSS-generátor és 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 húzza ezt a linket🗔 Kritikus-CSS a kedvencek sávba, vagy másolja és illessze be az alábbi kódot.

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="Kritikus-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);

Jellemzők

1. Fejlett kritikus CSS-generátor

   1. Egyedi fejlesztés a PostCSS- en, az egyik legjobb CSS-elemzőn alapul.
   2. Támogatja a több nézetablakot (asztali + mobil) az érzékeny kritikus CSS- hez.
   3. 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.
   4. Nyers, nem optimalizált, tiszta kritikus CSS-kimenet.

2. Hajtás feletti optimalizáló

   1. Hasonlítsa össze a kritikus CSS-t az eredeti CSS-sel.
   2. Testreszabható pixelmérő vonalzók.

3. Speciális optimalizálási eszközök

   1. Fel nem használt CSS-eltávolító a kritikus CSS eltávolításához a stíluslapokról.
   2. Professzionális CSS tömörítő (minifikáló) és optimalizáló szoftver.
   3. Törött CSS javítás. A hibás CSS javítására szolgáló eszköz.
   4. Autoprefixer. Eszköz a böngésző előtagjainak CSS-hez való alkalmazásához.
   5. CSS statisztikák és elemzések.
   6. CSS szépít.
   7. Speciális CSS-szösz.
   8. Duplikált CSS-eltávolító.
   9. 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

{
  "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": 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": "az UI művelet leírása személyes használatra"
}

Példakonfiguráció megjelenítése

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

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

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

A stíluslap index áttekintése

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.

Stíluslapok importálása vagy feltöltése

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.

A duplikált CSS-eltávolító eredménye