Generatore di CSS critici

Un widget del browser gratuito per un generatore avanzato di CSS critici e un ottimizzatore Above-the-fold .

Ottimizzatore above the fold

Generatore CSS critico e ottimizzatore above the fold

introduzione

Il generatore Critical CSS consente di risolvere i Core Web Vitals di Google rimuovendo la penalità CSS non utilizzata , esclusivamente sulla base di un CSS minimo. Consente di ottenere un risultato pixel perfetto .

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.

Il widget del browser fornisce un esempio di software CSS critico più avanzato che può essere utilizzato tramite un browser Chrome in Google Cloud. Per ulteriori informazioni, consulta il nostro plug-in di ottimizzazione professionale .

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

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

Passa alla pagina per la quale desideri estrarre i CSS critici e avvia il widget del browser. Fare clic qui per le istruzioni di installazione.

Passaggio 2: generare CSS critici

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

Configura il JSON utilizzando le opzioni nella documentazione .

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