Kritični CSS generator

Besplatan preglednik-widget za napredni generator kritičnog CSS-a i optimizator gornjeg dijela stranice .

Optimizator na gornjoj polovici stranice

Kritični generator CSS-a i optimizator gornjeg dijela stranice

Uvod

Generator kritičnog CSS-a omogućuje rješavanje Googleovih temeljnih web pokazatelja uklanjanja kazne za neiskorišteni CSS , isključivo na temelju minimalnog CSS-a. Omogućuje postizanje savršenog rezultata piksela .

Najbolji kritični CSS rezultat postiže se u pravom pregledniku.

Widget preglednika izvršava se na stranici na kojoj se kritični CSS treba ekstrahirati i stoga ima potpun izvorni pristup izvornom CSS okruženju.

Možete odabrati stilske tablice ili ugrađene elemente stilske tablice iz kojih ćete izdvojiti kritični CSS. Ovo je zgodno za stvaranje kritičnog CSS-a koji se može dijeliti između stranica.

Widget preglednika također ima značajku za uklanjanje kritičnog CSS-a iz listova stilova.

Alat je bez špijuna. Nema Google Analyticsa ili praćenja. Siguran za upotrebu i može se koristiti lokalno putem predmemorije Service Worker.

Widget preglednika pruža primjer naprednijeg kritičnog CSS softvera koji se može koristiti putem preglednika Chrome u Google Cloudu. Za više informacija pogledajte naš dodatak za profesionalnu optimizaciju .

Instalirati

Da biste instalirali widget, povucite ovu vezu🗔 Kritički-CSS na traku favorita ili kopirajte i zalijepite kod ispod.

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čki-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);

Značajke

1. Napredni kritični CSS generator

   1. Prilagođeno razvijeno na temelju PostCSS-a , jednog od najboljih CSS parsera.
   2. Podržava više prozora za prikaz (stolno računalo + mobilni) za responzivni kritični CSS .
   3. Puppeteer poput kontrole preglednika uključujući klikove, događaje miša (lebdjenje, pomicanje itd.), pomicanje, prilagođeno izvršavanje javascript koda i još mnogo toga.
   4. Sirovi neoptimizirani čisti kritični CSS izlaz.

2. Optimizator na gornjoj polovici stranice

   1. Usporedite kritični CSS s izvornim CSS-om.
   2. Prilagodljiva ravnala za mjerenje piksela.

3. Napredni alati za optimizaciju

   1. Alat za uklanjanje neiskorištenog CSS-a za uklanjanje kritičnog CSS-a iz tablica stilova.
   2. Profesionalni softver za kompresiju (minify) i optimizaciju CSS-a.
   3. Popravak pokvarenog CSS-a. Alat za popravak neispravnog CSS-a.
   4. Automatski prefiks. Alat za primjenu prefiksa preglednika na CSS.
   5. CSS statistika i analitika.
   6. CSS uljepšati.
   7. Napredni CSS lint.
   8. Uklanjanje duplikata CSS-a.
   9. Napredni CSS uređivač povezan s CSS lintom sa savjetima za optimizaciju.

Kako koristiti

Korak 1: pokrenite widget preglednika na stranici

Dođite do stranice za koju želite izdvojiti kritični CSS i pokrenite widget preglednika. Kliknite ovdje za upute za instalaciju.

Korak 2: generirajte kritični CSS

Kritičnom CSS generatoru može se pristupiti putem kartice Alati u zaglavlju.

Konfigurirajte JSON pomoću opcija u dokumentaciji .

Korak 3: optimizirajte rezultat

Izlaz kritičnog CSS generatora je neobrađen i zahtijeva daljnju optimizaciju kao što je kompresija.

Gumb Optimiziraj u izborniku uređivača omogućuje primjenu napredne optimizacije koda i kompresije.

Dokumentacija

Kritični CSS generator

Kritični CSS generator prihvaća sljedeće opcije.

Prikaži primjer 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": "Postavite okvir za prikaz za otkrivanje CSS-a na gornjoj polovici stranice."
    },
    {
      "wait": 1000,
      "notes": "Pričekajte 1000 ms da omogućite renderiranje okvira za prikaz."
    },
    {
      "run": true,
      "notes": "Pokrenite kritični CSS generator (izračun CSS-a na gornjoj polovici stranice)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Pokreni novi MouseEvent na DOM elementu.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvršite skriptu, u ovom slučaju zatvorite izbornik prije nastavka sa sljedećim okvirom za prikaz."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Akcije korisničkog sučelja generatora kritičnog CSS-a

Kritični CSS generator pruža kontrolu preglednika poput Puppeteera. Parametar ui_actions prihvaća niz s objektima radnji korisničkog sučelja koji definiraju promjene stanja korisničkog sučelja kronološkim redoslijedom.

{
  "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 radnji korisničkog sučelja za osobnu upotrebu"
}

Prikaži primjer konfiguracije

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Postavite okvir za prikaz za otkrivanje CSS-a na gornjoj polovici stranice."
    },
    {
      "wait": 1000,
      "notes": "Pričekajte 1000 ms da omogućite renderiranje okvira za prikaz."
    },
    {
      "run": true,
      "notes": "Pokrenite kritični CSS generator (izračun CSS-a na gornjoj polovici stranice)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Pokreni novi MouseEvent na DOM elementu.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Izvršite skriptu, u ovom slučaju zatvorite izbornik prije nastavka sa sljedećim okvirom za prikaz."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Alat za uklanjanje neiskorištenog CSS-a

Alat za uklanjanje neiskorištenog CSS-a koristi isti softver kao kritični ekstraktor CSS-a i prihvaća gotovo iste opcije konfiguracije, uključujući kontrolu preglednika poput Puppeteera putem radnji korisničkog sučelja. Alat također omogućuje izdvajanje neiskorištenog CSS-a.

Prikaži primjer 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
    }
  ]
}

Uklanjanje duplikata CSS-a

Alat za uklanjanje duplikata CSS-a omogućuje usporedbu dva stilska lista i uklanjanje ili izdvajanje duplikata CSS-a.

Prikaži primjer konfiguracije

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

Drugo polje za unos prihvaća indeksni broj stilske tablice. Indeks lista stilova možete pronaći u pregledu lista stilova na kartici postavki.

Pregled indeksa lista stilova

Možete prenijeti stilsku tablicu ili usporediti stilsku tablicu s vanjskih URL-ova stvaranjem nove stilske tablice. Zatim možete uvesti URL-ove ili učitati listove stilova i koristiti indeks iz novog lista stilova u alatu za uklanjanje duplikata CSS-a.

Uvezite ili prenesite tablice stilova

Nakon konfiguracije pritisnite gumb za pokretanje programa za uklanjanje duplikata CSS-a. CSS komentar prikazat će osnovnu statistiku rezultirajućeg smanjenog CSS-a.

Rezultat alata za uklanjanje duplikata CSS-a