Come generare CSS critici in WordPress (2 metodi)

Le persone che visitano il tuo sito web non vogliono aspettare molto tempo per vedere i tuoi contenuti. Se non ottimizzi il tuo codice, le risorse che bloccano il rendering come i CSS possono contribuire alla percezione da parte dei visitatori di tempi di caricamento più lenti.

Fortunatamente, puoi facilmente generare CSS critici per il tuo sito web. Installando un plugin come Jetpack Boost, sarai in grado di estrarre tutti i CSS necessari per visualizzare i contenuti above the fold. Questa può essere la chiave per far apparire il tuo sito web più veloce e più user-friendly.

In questo post, spiegheremo il CSS critico e perché dovresti considerare di generarlo per il tuo sito web. Quindi, ti mostreremo due modi diversi per farlo in WordPress.

Qual è il CSS critico in WordPress?

Una volta che un visitatore fa clic su un collegamento al tuo sito Web, il suo browser deve elaborare una serie di attività per visualizzare completamente il contenuto. Tutti i passaggi coinvolti nel download, nell'elaborazione e nella conversione del codice in pixel costituiscono il Critical Rendering Path.

Il browser legge il codice HTML, CSS e JavaScript del sito dall'alto verso il basso durante questo processo di caricamento. Poiché non saprà automaticamente quali risorse sono più importanti per il rendering della pagina, il browser potrebbe bloccarsi nell'elaborazione di codice non necessario.

Se un determinato file CSS interrompe il rendering del tuo sito Web, diventa una risorsa che blocca il rendering. Anche se non è necessario per visualizzare la pagina, i visitatori non vedranno il contenuto fino a quando questo CSS che blocca la visualizzazione non sarà completamente elaborato.

Critical CSS si riferisce al codice CSS richiesto per i contenuti web above the fold. In sostanza, è il codice minimo indispensabile di cui il browser ha bisogno per visualizzare la prima sezione di contenuto ai visitatori.

I vantaggi della generazione di CSS critici

La generazione di CSS critici per le tue pagine Web comporta l'eliminazione di qualsiasi CSS che blocca il rendering e consente al browser di elaborare solo ciò che è necessario.

1. Ottimizza la consegna dei contenuti

Quando ottimizzi la consegna CSS per il tuo sito Web WordPress, puoi migliorare il processo di rendering. A un visitatore front-end, potrebbe anche sembrare che le tue pagine si stiano caricando più velocemente.

Quando qualcuno arriva sul tuo sito web, la prima cosa che vedrà è il contenuto above the fold. Questo è tutto ciò che viene visualizzato in prima pagina senza dover scorrere.

Estraendo CSS critici, stai ottimizzando i file CSS necessari per visualizzare questa sezione iniziale. Senza di esso, gli utenti potrebbero vedere elementi parziali che non sono stati completamente renderizzati.

Un malinteso comune è che il CSS critico riduca il tempo di caricamento. Anche se questo non è vero, la tecnica di ottimizzazione può migliorare le prestazioni percepite .

In sostanza, gli utenti penseranno che le tue pagine si stiano caricando più velocemente perché il browser può semplicemente visualizzare gli elementi above the fold in modo più efficiente.

Generando CSS critico per WordPress, i visitatori avranno una migliore esperienza utente (UX) sul tuo sito. Di conseguenza, puoi ridurre la frequenza di rimbalzo e incoraggiare le visite di ritorno.

2. Migliora i Core Web Vitals

Sebbene il CSS critico di WordPress non aumenti o diminuisca il tempo di caricamento della pagina, può migliorare i tuoi Core Web Vitals. Queste metriche analizzano l'esperienza utente di un sito web.

Ecco i Core Web Vitals:

• Largest Contentful Paint (LCP) : le prestazioni di caricamento di un sito web
• First Input Delay (FID) : l'interattività di un sito web
• Cumulative Layout Shift (CLS) : stabilità visiva di un sito web

Dopo aver scansionato il tuo sito web per un report Core Web Vitals, potresti visualizzare metriche aggiuntive come First Contentful Paint (FCP) o Time to First Byte (TTFB). Questi hanno un impatto sull'LCP e svolgono un ruolo importante nel processo di caricamento.

Il CSS critico ha un impatto diretto su FCP. In parole povere, FCP misura il tempo necessario per rendere il primo elemento su una pagina web dopo l'inizio del caricamento. Se il tuo sito ha un punteggio FCP scarso, i visitatori vedranno spesso una pagina vuota per un po'.

In qualità di proprietario di un sito Web WordPress, dovresti mirare a ottenere FCP inferiore a 1,8 secondi, ma molti elementi possono influire negativamente su questo punteggio, tra cui:

• JavaScript e CSS che bloccano il rendering
• Un server lento
• File di caratteri ingombranti
• Dimensioni DOM (Document Object Model) di grandi dimensioni

Poiché i CSS che bloccano il rendering contribuiscono a FCP, la generazione di CSS critici può migliorare questo punteggio. Durante questo processo, incorporerai tutti i CSS necessari per visualizzare i contenuti above the fold.

Come testare il tuo sito Web per il blocco del rendering CSS

Prima di generare CSS critico per WordPress, devi sapere se è necessario per il tuo sito web. Poiché i file CSS di grandi dimensioni sono considerati risorse che bloccano il rendering, puoi cercarli con uno strumento di ottimizzazione della velocità.

Per iniziare, inserisci l'URL del tuo sito web in PageSpeed ​​Insights. Questo software di Google analizzerà le prestazioni del tuo sito con vari controlli di velocità.

Nella parte superiore della pagina, vedrai la tua valutazione Core Web Vitals. Include le metriche per il più grande disegno con contenuto, il primo ritardo di input, lo spostamento cumulativo del layout, il primo disegno con contenuto, l'interazione con il disegno successivo e il tempo per il primo byte.

Come hai appreso in precedenza, il CSS che blocca il rendering è strettamente legato al punteggio FCP. Assicurati che i risultati della valutazione sia mobile che desktop siano di 1,8 secondi o meno.

Se ricevi un punteggio basso, potresti avere file CSS ingombranti e non ottimizzati sul tuo sito web. Per verificare se questo è vero, scorri verso il basso fino a Opportunità . Questa sezione fornisce suggerimenti specifici per migliorare il tempo di caricamento del tuo sito web.

Qui potresti notare un avviso che ti dice di eliminare le risorse che bloccano il rendering . Sebbene questo messaggio possa fare riferimento a un file JavaScript, potrebbe anche segnalare che è necessario generare CSS critici.

Come generare CSS critici in WordPress

Ora che capisci di più sui CSS critici di WordPress e perché è importante, è il momento di generarli! Indipendentemente dal tuo livello di abilità, puoi facilmente imparare come ottimizzare la consegna CSS in WordPress seguendo il nostro tutorial per principianti.

Metodo 1: genera CSS critici con un plug-in

Sebbene tu possa generarlo tu stesso, l'ottimizzazione della consegna CSS con un plug-in di WordPress è spesso più semplice. Lo strumento giusto può rinviare automaticamente i CSS meno importanti. Inoltre, non dovrai modificare alcun codice manualmente.

Jetpack Boost può migliorare rapidamente le prestazioni di caricamento del tuo sito. Dopo un semplice processo di installazione, puoi utilizzare questo plug-in per generare CSS critici, rinviare JavaScript non essenziale e altro ancora.

Per iniziare a utilizzare Jetpack Boost, installalo e attivalo in WordPress. Quindi, riceverai un punteggio basato sulle prestazioni attuali del tuo sito web.

Con il plug-in gratuito, vedrai un'opzione per ottimizzare il caricamento CSS . In alternativa, puoi eseguire l'upgrade a un abbonamento a pagamento per generare automaticamente CSS critici. Ciò contribuirà ad evitare di dover rigenerare CSS ogni volta che apporti una modifica.

Per abilitare i CSS critici, usa semplicemente l'interruttore sul lato sinistro. Allo stesso modo, puoi rinviare JavaScript non essenziale e attivare il caricamento lento per le immagini. Insieme, queste impostazioni possono ridurre significativamente il tempo di caricamento della pagina e consentire ai visitatori di vedere i tuoi contenuti in anticipo.

Metodo 2: Genera manualmente CSS critici

Se non desideri utilizzare un plug-in, puoi anche generare manualmente CSS critici. È importante ricordare che questo metodo comporta la modifica del codice del tuo sito, quindi può essere un processo più complicato per i principianti.

Passaggio 1: eseguire il backup del sito Web

Per iniziare, ti consigliamo di creare un backup del tuo sito WordPress. Se commetti un errore nei file del tuo sito, puoi facilmente tornare a questa versione salvata. In questo modo non perderai nessun dato importante.

Se hai bisogno di gestire facilmente i tuoi backup, puoi installare il plug-in Jetpack VaultPress Backup. Questo strumento memorizza i backup fuori sede e fornisce ripristini con un clic, anche se il tuo sito è completamente inattivo.

Ecco come iniziare:

Vai su Plugin → Aggiungi nuovo nella dashboard di WordPress. Cerca "Jetpack VaultPress Backup" e fai clic su Installa ora → Attiva .

Quindi, vedrai una nuova finestra che ti permetterà di configurare il plugin. Fai clic su Configura Jetpack .

Quindi, collega il tuo sito al tuo account WordPress.com. Una volta reindirizzato al tuo sito, fai clic su Aggiorna ora per visualizzare diverse opzioni per i piani di backup di Jetpack VaultPress.

Come minimo, avrai bisogno del piano Backup, ma Sicurezza e Completo forniscono strumenti aggiuntivi per proteggere, far crescere e velocizzare il tuo sito.

Il tuo primo backup si avvierà automaticamente e potrai verificarne l'avanzamento andando su Jetpack → Backup nella dashboard di WordPress.

Se si verificano errori durante i prossimi passaggi, torna semplicemente a questa pagina e premi Ripristina a questo punto . Questo ripristinerà il tuo sito alla versione precedente, eliminando eventuali errori che si sono verificati.

Passaggio 2: utilizzare un generatore CSS critico

Una volta che sai che il tuo sito web è stato sottoposto a backup, puoi iniziare a generare il tuo CSS critico. Uno dei modi più semplici per farlo è con un generatore CSS critico. Questo strumento produrrà automaticamente il tuo CSS critico, evitandoti di dover creare manualmente il codice.

Innanzitutto, apri CoreWebVitals Critical CSS Generator. Inserisci l'URL del tuo sito web o di una pagina specifica che desideri ottimizzare. Quindi, premi Genera CSS critico .

Al termine del caricamento, vedrai il codice CSS generato nella casella di testo. Copia questo codice.

Dopo aver salvato questo codice, puoi incorporarlo nel tuo sito web!

Passaggio 3: CSS critico in linea

Quando qualcuno visita il tuo sito web, il suo browser recupererà i file del tuo sito dal server. Per prima cosa controllerà la sezione <head> per il contenuto necessario durante il processo di analisi. Quindi, continuerà a rendere il contenuto <body>.

Per dare la priorità al CSS critico, inseriscilo nella sezione <head> dei tuoi file. Questo è chiamato inline. Quando inline CSS, il browser richiede che questo foglio di stile venga recuperato prima di eseguire il rendering del resto della pagina.

Essenzialmente, incorporare il CSS posizionerà il codice dove deve essere utilizzato. Pertanto, il browser di un visitatore non dovrà analizzare i file che bloccano il rendering prima di visualizzare il contenuto di destinazione.

Dopo aver copiato il CSS critico generato, puoi incorporarlo nei tuoi file. Passare alla cartella public_html tramite FTP. Quindi, vai su wp-content → temi → il tuo tema attivo e apri il file header.php .

In questo file di intestazione, individuare il tag <title>. Sotto di esso, aggiungi il CSS critico usando i tag <style>. Infine, seleziona Aggiorna file .

Domande frequenti (FAQ)

Finora abbiamo discusso del CSS critico e di come generarlo. Se hai ancora domande sull'incorporamento di CSS nel tuo sito web, risponderemo qui!

La generazione di CSS critici può compromettere l'aspetto del tuo sito?

Se eseguita in modo errato, la generazione di CSS critici potrebbe influire negativamente sull'aspetto e sul layout del tuo sito. Fortunatamente, puoi annullare qualsiasi modifica semplicemente ripristinando un backup salvato del tuo sito WordPress. Utilizzando Jetpack VaultPress Backup, puoi visualizzare un registro delle attività e ripristinare le vecchie versioni del tuo sito con un clic.

Inoltre, puoi utilizzare un plug-in come Jetpack Boost per attivare e disattivare i CSS critici quando necessario. Queste semplici impostazioni sono state create secondo le migliori pratiche di WordPress, quindi è meno probabile che influenzino il tuo sito sul front-end.

Cos'altro posso fare per ottimizzare il mio codice CSS?

Se vuoi ottimizzare ulteriormente il CSS sul tuo sito, considera di minimizzarlo. Rimuoverete il codice non necessario durante la minificazione CSS per ridurre le dimensioni dei file CSS.

Il tuo codice CSS probabilmente ha spazi e interruzioni di riga per renderlo più facile da leggere. Poiché un browser può elaborare il codice senza questi elementi aggiuntivi, puoi eliminarli. Ciò riduce le risorse e il tempo necessari per eseguire i file.

Puoi anche rimuovere del tutto i CSS inutilizzati. Riducendo i tuoi file solo al codice necessario, il tuo sito web inizierà a caricarsi più velocemente.

Cos'altro posso fare per migliorare la velocità della mia pagina?

Uno dei modi migliori per velocizzare il tuo sito è migliorare i tuoi Core Web Vitals. Utilizzando uno strumento come PageSpeed ​​Insights, puoi identificare elementi non ottimizzati come le risorse che bloccano il rendering.

Poiché i browser caricano il codice del tuo sito dall'alto verso il basso, il processo di caricamento può essere facilmente interrotto da JavaScript. Rinviando l'analisi JavaScript, i visitatori non dovranno attendere il caricamento degli script prima di vedere i tuoi contenuti.

Inoltre, considera l'implementazione del caricamento lento per le immagini. Con questa impostazione in Jetpack Boost, le immagini below the fold non verranno caricate finché i visitatori non scorrono verso il basso. Ciò può impedire al tuo sito Web di caricare tutte le immagini contemporaneamente, ritardando il processo di rendering.

Infine, un Content Delivery Network (CDN) può velocizzare notevolmente il tuo sito web. Invece di fare affidamento su un server, un CDN utilizza un sistema di data center in tutto il mondo. Un'opzione come il CDN di Jetpack può migliorare la consegna dei contenuti per immagini e file statici.

Ottimizza la consegna CSS in WordPress

Se stai cercando di migliorare la consegna dei contenuti del tuo sito web, è importante eliminare tutte le risorse che bloccano il rendering. Poiché i CSS non ottimizzati possono ritardare il processo di rendering, vale la pena generare CSS critici. Sebbene ciò non migliorerà direttamente il tempo di caricamento, consentirà ai visitatori di vedere i contenuti above the fold molto più velocemente.

Per rivedere, ecco come generare CSS critici in WordPress:

1. Genera CSS critici con un plug-in come Jetpack Boost.
2. Usa un generatore di CSS critico.

Con Jetpack Boost, puoi ottimizzare i CSS senza modificare alcun codice. Dopo aver scaricato e attivato il plug-in, sarai in grado di generare CSS critici con un solo clic!