Kritisk CSS-generator

En gratis nettleser-widget for en avansert kritisk CSS-generator og optimering over skillelinjen .

Optimizer over skillelinjen

Kritisk CSS-generator og optimering over skillelinjen

Introduksjon

Kritisk CSS-generatoren gjør det mulig å løse Googles Core Web Vitals fjern ubrukt CSS- straff, rent på grunnlag av minimum CSS. Det gjør det mulig å oppnå et perfekt pikselresultat .

Det beste kritiske CSS-resultatet oppnås i en ekte nettleser.

Nettleserwidgeten kjøres på siden der kritisk CSS skal trekkes ut og har derfor full innfødt tilgang til det originale CSS-miljøet.

Du kan velge stilark eller innebygde stilarkelementer du vil trekke ut kritisk CSS fra. Dette er nyttig for å lage kritisk CSS som kan deles mellom sider.

Nettleserwidgeten har også en funksjon for å fjerne kritisk CSS fra stilark.

Verktøyet er spionfritt. Ingen Google Analytics eller sporing. Trygg å bruke og kan brukes lokalt gjennom en Service Worker-buffer.

Nettleser-widgeten gir et eksempel på mer avansert kritisk CSS-programvare som kan brukes gjennom en Chrome-nettleser i Google Cloud. Se vår profesjonelle optimaliseringsplugin for mer informasjon.

Installere

For å installere widgeten, dra denne linken🗔 Kritisk-CSS til favorittlinjen eller kopier og lim inn koden nedenfor.

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

Funksjoner

1. Avansert kritisk CSS-generator

   1. Spesialutviklet basert på PostCSS , en av de beste CSS-parserne.
   2. Støtter flere visningsporter (desktop + mobil) for responsiv kritisk CSS .
   3. Dukkefører som nettleserkontroll inkludert klikk, musehendelser (sveve, flytt osv.), rulling, kjøring av tilpasset javascript-kode og mye mer.
   4. Rå ikke-optimalisert ren kritisk CSS-utgang.

2. Optimizer over skillelinjen

   1. Sammenlign kritisk CSS med den originale CSS.
   2. Tilpassbare pikselmålslinjaler.

3. Avanserte optimaliseringsverktøy

   1. Ubrukt CSS-fjerner for å fjerne kritisk CSS fra stilark.
   2. Profesjonell CSS-komprimering (minify) og optimaliseringsprogramvare.
   3. Ødelagt CSS-reparasjon. Et verktøy for å fikse misformet CSS.
   4. Autoprefikser. Et verktøy for å bruke nettleserprefikser på CSS.
   5. CSS statistikk og analyser.
   6. CSS forskjønne.
   7. Avansert CSS-lo.
   8. Duplikat CSS-fjerner.
   9. Avansert CSS-editor koblet til CSS lint med optimaliseringstips.

Hvordan å bruke

Trinn 1: start nettleserwidgeten på en side

Naviger til siden du vil trekke ut kritisk CSS for og start nettleserwidgeten. Klikk her for installasjonsinstruksjoner.

Trinn 2: generer kritisk CSS

Den kritiske CSS-generatoren kan nås via Verktøy- fanen i overskriften.

Konfigurer JSON ved å bruke alternativene i dokumentasjonen .

Trinn 3: optimaliser resultatet

Utdataene fra den kritiske CSS-generatoren er rå og krever ytterligere optimalisering som komprimering.

Optimaliser -knappen i redigeringsmenyen gjør det mulig å bruke avansert kodeoptimalisering og komprimering.

Dokumentasjon

Kritisk CSS-generator

Den kritiske CSS-generatoren godtar følgende alternativer.

Vis eksempel konfig

{
  "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": "Angi viewport for CSS-oppdagelse over skillelinjen."
    },
    {
      "wait": 1000,
      "notes": "Vent i 1000ms for å aktivere visningsporten."
    },
    {
      "run": true,
      "notes": "Kjør kritisk CSS-generator (over-fold CSS-beregning)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Avfyr ny MouseEvent på a.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Kjør et skript, i dette tilfellet lukk menyen før du fortsetter med neste visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI-handlinger til Critical CSS-generatoren

Den kritiske CSS-generatoren gir Puppeteer-lignende nettleserkontroll. Parameteren ui_actions aksepterer en matrise med UI-handlingsobjekter som definerer UI-tilstandsendringer i kronologisk rekkefølge.

{
  "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": "beskrivelse av UI-handling for personlig bruk"
}

Vis eksempel konfig

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Angi viewport for CSS-oppdagelse over skillelinjen."
    },
    {
      "wait": 1000,
      "notes": "Vent i 1000ms for å aktivere visningsporten."
    },
    {
      "run": true,
      "notes": "Kjør kritisk CSS-generator (over-fold CSS-beregning)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Avfyr ny MouseEvent på a.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Kjør et skript, i dette tilfellet lukk menyen før du fortsetter med neste visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Ubrukt CSS-fjerner

Den ubrukte CSS-fjerneren bruker samme programvare som den kritiske CSS-ekstraktoren og godtar nesten de samme konfigurasjonsalternativene, inkludert Puppeteer-lignende nettleserkontroll gjennom UI-handlinger. Verktøyet gjør det også mulig å trekke ut ubrukt CSS.

Vis eksempel konfig

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

Duplikat CSS-fjerner

Duplikat-CSS-fjerneren gjør det mulig å sammenligne to stilark og fjerne eller trekke ut den dupliserte CSS-en.

Vis eksempel konfig

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

Det andre inndatafeltet godtar stilarkets indeksnummer. Du finner indeksen til et stilark i stilarkoversikten på innstillingsfanen.

Stilarkindeksoversikt

Du kan laste opp et stilark eller sammenligne stilark fra eksterne URL(er) ved å lage et nytt stilark. Du kan deretter importere URL-er eller laste opp stilarkene og bruke indeksen fra det nye stilarket i duplikat-CSS-fjerneren.

Importer eller last opp stilark

Når den er konfigurert, trykk på knappen for å starte duplikat-CSS-fjerneren. En CSS-kommentar vil vise grunnleggende statistikk for den resulterende reduserte CSS.

Resultat av duplikat CSS-fjerner