Kritisk CSS-generator

En gratis browser-widget til en avanceret kritisk CSS-generator og optimering over skillelinjen .

Optimering over skillelinjen

Kritisk CSS-generator og optimering over skillelinjen

Introduktion

Critical CSS-generatoren gør det muligt at løse Googles Core Web Vitals for at fjerne ubrugt CSS- straf, udelukkende på basis af minimum CSS. Det gør det muligt at opnå et pixel perfekt resultat .

Det bedste kritiske CSS-resultat opnås i en rigtig browser.

Browser-widgetten udføres på den side, hvor kritisk CSS skal udtrækkes og har derfor fuld native adgang til det originale CSS-miljø.

Du kan vælge de stylesheets eller inline stylesheet-elementer, som du vil udtrække kritisk CSS fra. Dette er praktisk til at skabe kritisk CSS, der kan deles mellem sider.

Browser-widgetten har også en funktion til at fjerne kritisk CSS fra stylesheets.

Værktøjet er spionfrit. Ingen Google Analytics eller sporing. Sikker at bruge og kan bruges lokalt gennem en Service Worker-cache.

Browser-widgetten giver et eksempel på mere avanceret kritisk CSS-software, der kan bruges gennem en Chrome-browser i Google Cloud. Se vores professionelle optimeringsplugin for mere information.

Installere

For at installere widgetten træk dette link🗔 Kritisk-CSS til favoritlinjen eller kopiere og indsætte 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);

Funktioner

1. Avanceret kritisk CSS-generator

   1. Specialudviklet baseret på PostCSS , en af de bedste CSS-parsere.
   2. Understøtter flere visningsporte (desktop + mobil) til responsiv kritisk CSS .
   3. Dukkefører som browserkontrol, herunder klik, musehændelser (hover, flyt osv.), rulning, udførelse af brugerdefineret javascript-kode og meget mere.
   4. Rå ikke-optimeret rent kritisk CSS-output.

2. Optimering over skillelinjen

   1. Sammenlign kritisk CSS med den originale CSS.
   2. Tilpasbare pixelmålelinealer.

3. Avancerede optimeringsværktøjer

   1. Ubrugt CSS-fjerner til at fjerne kritisk CSS fra stylesheets.
   2. Professionel CSS-komprimering (minify) og optimeringssoftware.
   3. Ødelagt CSS reparation. Et værktøj til at rette forkert udformet CSS.
   4. Autopræfikser. Et værktøj til at anvende browserpræfikser til CSS.
   5. CSS statistik og analyser.
   6. CSS forskønne.
   7. Avanceret CSS fnug.
   8. Dublet CSS-fjerner.
   9. Avanceret CSS-editor forbundet til CSS lint med optimeringstip.

Sådan bruges

Trin 1: start browser-widgetten på en side

Naviger til den side, som du vil udtrække kritisk CSS for, og start browser-widgetten. Klik her for installationsvejledning.

Trin 2: generer kritisk CSS

Den kritiske CSS-generator kan tilgås via fanen Værktøjer i overskriften.

Konfigurer JSON ved hjælp af mulighederne i dokumentationen .

Trin 3: optimer resultatet

Outputtet fra den kritiske CSS-generator er råt og kræver yderligere optimering såsom komprimering.

Knappen Optimer i redigeringsmenuen gør det muligt at anvende avanceret kodeoptimering og komprimering.

Dokumentation

Kritisk CSS-generator

Den kritiske CSS-generator accepterer følgende muligheder.

Vis eksempel config

{
  "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": "Indstil viewport til CSS-opdagelse over skillelinjen."
    },
    {
      "wait": 1000,
      "notes": "Vent i 1000ms for at gøre det muligt for viewporten at gengive."
    },
    {
      "run": true,
      "notes": "Kør kritisk CSS-generator (CSS-beregning over skillelinjen)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Affyr nyt MouseEvent på et.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Udfør et script, i dette tilfælde luk menuen, før du fortsætter med næste visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

UI-handlinger af Critical CSS-generatoren

Den kritiske CSS-generator giver Puppeteer-lignende browserkontrol. Parameteren ui_actions accepterer et array med UI-handlingsobjekter, der definerer UI-tilstandsændringer i kronologisk rækkefø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 af UI-handling til personlig brug"
}

Vis eksempel config

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Indstil viewport til CSS-opdagelse over skillelinjen."
    },
    {
      "wait": 1000,
      "notes": "Vent i 1000ms for at gøre det muligt for viewporten at gengive."
    },
    {
      "run": true,
      "notes": "Kør kritisk CSS-generator (CSS-beregning over skillelinjen)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Affyr nyt MouseEvent på et.nav-menu DOM-element."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Udfør et script, i dette tilfælde luk menuen, før du fortsætter med næste visningsport."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Ubrugt CSS-fjerner

Den ubrugte CSS-fjerner bruger den samme software som den kritiske CSS-udtrækker og accepterer næsten de samme konfigurationsmuligheder, inklusive Puppeteer-lignende browserkontrol gennem UI-handlinger. Værktøjet gør det også muligt at udtrække ubrugt CSS.

Vis eksempel config

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

Dublet CSS-fjerner

Duplikat-CSS-fjerneren gør det muligt at sammenligne to stylesheets og fjerne eller udtrække den duplikerede CSS.

Vis eksempel config

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

Det andet inputfelt accepterer stylesheet-indeksnummeret. Du kan finde indekset for et stylesheet på stylesheet-oversigten på fanen Indstillinger.

Stylesheet indeks oversigt

Du kan uploade et stylesheet eller sammenligne stylesheets fra eksterne URL(er) ved at oprette et nyt stylesheet. Du kan derefter importere URL'er eller uploade stylesheets og bruge indekset fra det nye stylesheet i duplikat-CSS-fjerneren.

Importer eller upload stylesheets

Når du er konfigureret, skal du trykke på knappen for at starte duplikat-CSS-fjerneren. En CSS-kommentar vil vise grundlæggende statistik for den resulterende reducerede CSS.

Resultat af dublet CSS-fjerner