Generator CSS critic

Un widget de browser gratuit pentru un generator CSS critic avansat și un optimizator superior .

Optimizator deasupra pliului

Generator CSS critic și optimizator de deasupra plierii

Introducere

Generatorul CSS critic permite rezolvarea penalizării CSS neutilizate de la Google Core Web Vitals, doar pe baza minimului CSS. Permite obținerea unui rezultat perfect în pixeli .

Cel mai bun rezultat critic CSS este obținut într-un browser real.

Widgetul browserului este executat pe pagina în care urmează să fie extras CSS critic și, prin urmare, are acces nativ complet la mediul CSS original.

Puteți selecta foile de stil sau elementele din foaia de stil din care să extrageți CSS critic. Acest lucru este util pentru a crea CSS critic care poate fi partajat între pagini.

Widgetul browserului are și o funcție pentru a elimina CSS critic din foile de stil.

Instrumentul nu conține spioni. Fără Google Analytics sau urmărire. Sigur de utilizat și poate fi folosit local printr-un cache Service Worker.

Browserul-widget oferă un exemplu de software CSS critic mai avansat, care poate fi utilizat printr-un browser Chrome în Google Cloud. Consultați pentru mai multe informații pluginul nostru profesional de optimizare .

Instalare

Pentru a instala widget-ul, trageți acest link🗔 Critic-CSS în bara de favorite sau copiați și inserați codul de mai jos.

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

Caracteristici

1. Generator CSS critic avansat

   1. Dezvoltat personalizat pe baza PostCSS , unul dintre cei mai buni analizatori CSS.
   2. Suportă mai multe porturi de vizualizare (desktop + mobil) pentru CSS critic receptiv .
   3. Puppeteer cum ar fi controlul browserului, inclusiv clic, evenimente ale mouse-ului (pasare cu mouse-ul, mutare etc), derulare, execuție personalizată de cod javascript și multe altele.
   4. Ieșire CSS critică pură neoptimizată.

2. Optimizator deasupra pliului

   1. Comparați CSS critic cu CSS original.
   2. Rigle de măsurare a pixelilor personalizabile.

3. Instrumente avansate de optimizare

   1. Eliminator CSS neutilizat pentru a elimina CSS critic din foile de stil.
   2. Software profesional de compresie CSS (minimificare) și optimizare.
   3. Reparație CSS spartă. Un instrument pentru a remedia CSS incorect.
   4. Autoprefixer. Un instrument pentru aplicarea prefixelor de browser la CSS.
   5. Statistici și analize CSS.
   6. CSS înfrumuseța.
   7. Lint CSS avansat.
   8. Eliminator CSS duplicat.
   9. Editor CSS avansat conectat la CSS lint cu sfaturi de optimizare.

Cum se utilizează

Pasul 1: porniți widgetul browser pe o pagină

Navigați la pagina pentru care doriți să extrageți CSS critic și porniți widget-ul browserului. Faceți clic aici pentru instrucțiuni de instalare.

Pasul 2: generați CSS critic

Generatorul CSS critic poate fi accesat prin fila Instrumente din antet.

Configurați JSON folosind opțiunile din documentație .

Pasul 3: optimizați rezultatul

Ieșirea generatorului CSS critic este brută și necesită o optimizare suplimentară, cum ar fi compresia.

Butonul Optimizare din meniul editorului permite aplicarea de optimizare și compresie avansată a codului.

Documentație

Generator CSS critic

Generatorul CSS critic acceptă următoarele opțiuni.

Afișați exemplul de configurare

{
  "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": "Setați fereastra pentru descoperirea CSS deasupra pliului."
    },
    {
      "wait": 1000,
      "notes": "Așteptați 1000 ms pentru a permite redarea feței de vizualizare."
    },
    {
      "run": true,
      "notes": "Rulați generatorul de CSS critic (calcul CSS de mai sus)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Lansați noul MouseEvent pe un element DOM din meniu.nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Executați un script, în acest caz închideți meniul înainte de a continua cu următoarea fereastră de vizualizare."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Acțiunile UI ale generatorului CSS critic

Generatorul critic de CSS oferă control pe browser asemănător Marionetei. Parametrul ui_actions acceptă o matrice cu obiecte de acțiune UI care definesc modificările stării UI în ordine cronologică.

{
  "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": "descrierea acțiunii UI pentru uz personal"
}

Afișați exemplul de configurare

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Setați fereastra pentru descoperirea CSS deasupra pliului."
    },
    {
      "wait": 1000,
      "notes": "Așteptați 1000 ms pentru a permite redarea feței de vizualizare."
    },
    {
      "run": true,
      "notes": "Rulați generatorul de CSS critic (calcul CSS de mai sus)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Lansați noul MouseEvent pe un element DOM din meniu.nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Executați un script, în acest caz închideți meniul înainte de a continua cu următoarea fereastră de vizualizare."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Eliminator CSS neutilizat

Instrumentul de eliminare CSS neutilizat folosește același software ca și extractorul CSS critic și acceptă aproape aceleași opțiuni de configurare, inclusiv controlul browserului tip Puppeteer prin acțiunile UI. Instrumentul permite, de asemenea, extragerea CSS neutilizate.

Afișați exemplul de configurare

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

Eliminator CSS duplicat

Eliminatorul CSS duplicat face posibilă compararea a două foi de stil și eliminarea sau extragerea CSS-ului duplicat.

Afișați exemplul de configurare

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

Al doilea câmp de introducere acceptă numărul de index al foii de stil. Puteți găsi indexul unei foi de stil în prezentarea generală a foii de stil din fila setări.

Prezentare generală a indexului foii de stil

Puteți încărca o foaie de stil sau puteți compara foi de stil de la URL-uri externe, creând o nouă foaie de stil. Puteți apoi să importați adrese URL sau să încărcați foile de stil și să utilizați indexul din noua foaie de stil în programul de eliminare CSS duplicat.

Importați sau încărcați foi de stil

Odată configurat, apăsați butonul pentru a porni eliminatorul CSS duplicat. Un comentariu CSS va afișa statisticile de bază ale CSS-ului redus rezultat.

Rezultatul eliminatorului CSS duplicat