Generatore di CSS critici

Un browser-widget gratuito per un generatore CSS critico avanzato e un ottimizzatore above the fold . Uno strumento per ottenere un risultato pixel perfetto con il minimo CSS possibile.

Il miglior risultato CSS critico si ottiene in un vero browser.

Il widget del browser viene eseguito sulla pagina in cui deve essere estratto il CSS critico e quindi ha pieno accesso nativo all'ambiente CSS originale.

Puoi selezionare i fogli di stile o gli elementi del foglio di stile in linea da cui estrarre i CSS critici. Questo è utile per creare CSS critici che possono essere condivisi tra le pagine.

Il widget del browser ha anche una funzione per rimuovere i CSS critici dai fogli di stile.

Lo strumento è privo di spionaggio. Nessun Google Analytics o tracciamento. Sicuro da usare e può essere utilizzato localmente tramite una cache Service Worker.

The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.

Installare

Per installare il widget, trascina questo link🗔 CSS critico nella barra dei preferiti o copia e incolla il codice qui sotto.

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

Ottimizzatore above the fold

Generatore CSS critico e ottimizzatore above the fold

Il generatore di CSS critici consente di risolvere i Core Web Vitals di Google rimuovendo la penalità CSS inutilizzata esclusivamente sulla base del CSS minimo.

Caratteristiche

1. Generatore avanzato di CSS critici

   1. Sviluppato su misura basato su PostCSS , uno dei migliori parser CSS.
   2. Supporta più viewport (desktop + mobile) per CSS critici reattivi .
   3. Burattinaio come il controllo del browser che include clic, eventi del mouse (passaggio del mouse, spostamento ecc.), scorrimento, esecuzione di codice javascript personalizzato e molto altro.
   4. Output CSS critico puro non ottimizzato non elaborato.

2. Ottimizzatore above the fold

   1. Confronta il CSS critico con il CSS originale.
   2. Righelli di misura pixel personalizzabili.

3. Strumenti di ottimizzazione avanzati

   1. Dispositivo di rimozione CSS inutilizzato per rimuovere CSS critici dai fogli di stile.
   2. Software professionale di compressione (minify) e ottimizzazione CSS.
   3. Riparazione CSS rotta. Uno strumento per correggere CSS malformati.
   4. Prefisso automatico. Uno strumento per applicare i prefissi del browser ai CSS.
   5. Statistiche e analisi CSS.
   6. Abbellimento CSS.
   7. Lint CSS avanzato.
   8. Dispositivo di rimozione CSS duplicato.
   9. Editor CSS avanzato collegato a CSS lint con suggerimenti per l'ottimizzazione.

Come usare

Passaggio 1: avvia il widget del browser su una pagina

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

Passaggio 2: generare CSS critici

È possibile accedere al generatore CSS critico tramite la scheda Strumenti nell'intestazione.

Configure the JSON using the options in the the documentation.

Passaggio 3: ottimizzare il risultato

L'output del generatore CSS critico è grezzo e richiede un'ulteriore ottimizzazione come la compressione.

Il pulsante Ottimizza nel menu dell'editor consente di applicare l'ottimizzazione e la compressione avanzate del codice.

Documentazione

Generatore di CSS critici

Il generatore CSS critico accetta le seguenti opzioni.

Mostra configurazione di esempio

{
  "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": "Imposta il viewport per la scoperta CSS above the fold."
    },
    {
      "wait": 1000,
      "notes": "Attendere 1000 ms per abilitare il rendering del viewport."
    },
    {
      "run": true,
      "notes": "Esegui un generatore CSS critico (calcolo CSS above the fold)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Attiva il nuovo MouseEvent su un elemento DOM del menu nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Esegui uno script, in questo caso chiudi il menu prima di continuare con la finestra successiva."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Azioni dell'interfaccia utente del generatore CSS critico

Il generatore CSS critico fornisce un controllo del browser simile a Puppeteer. Il parametro ui_actions accetta una matrice con oggetti azione dell'interfaccia utente che definiscono le modifiche allo stato dell'interfaccia utente in ordine cronologico.

{
  "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": "descrizione dell'azione dell'interfaccia utente per uso personale"
}

Mostra configurazione di esempio

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Imposta il viewport per la scoperta CSS above the fold."
    },
    {
      "wait": 1000,
      "notes": "Attendere 1000 ms per abilitare il rendering del viewport."
    },
    {
      "run": true,
      "notes": "Esegui un generatore CSS critico (calcolo CSS above the fold)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Attiva il nuovo MouseEvent su un elemento DOM del menu nav."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Esegui uno script, in questo caso chiudi il menu prima di continuare con la finestra successiva."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Dispositivo di rimozione CSS inutilizzato

Il dispositivo di rimozione CSS inutilizzato utilizza lo stesso software dell'estrattore CSS critico e accetta quasi le stesse opzioni di configurazione, incluso il controllo del browser simile a Puppeteer tramite azioni dell'interfaccia utente. Lo strumento consente anche di estrarre i CSS inutilizzati.

Mostra configurazione di esempio

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

Dispositivo di rimozione CSS duplicato

Il dispositivo di rimozione CSS duplicato consente di confrontare due fogli di stile e rimuovere o estrarre il CSS duplicato.

Mostra configurazione di esempio

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

Il secondo campo di input accetta il numero di indice del foglio di stile. Puoi trovare l'indice di un foglio di stile nella panoramica del foglio di stile nella scheda delle impostazioni.

Panoramica dell'indice del foglio di stile

Puoi caricare un foglio di stile o confrontare fogli di stile da URL esterni creando un nuovo foglio di stile. Puoi quindi importare gli URL o caricare i fogli di stile e utilizzare l'indice dal nuovo foglio di stile nel dispositivo di rimozione CSS duplicato.

Importa o carica fogli di stile

Una volta configurato, premi il pulsante per avviare il dispositivo di rimozione dei CSS duplicati. Un commento CSS mostrerà le statistiche di base del CSS ridotto risultante.

Risultato della rimozione di CSS duplicati