TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come generare CSS critici nel sito WordPress?

23

Esistono molti costruttori di siti Web drag and drop disponibili su Internet per creare siti Web senza competenze tecniche. Tuttavia, devi imparare alcuni aspetti tecnici della SEO per mantenere il tuo sito in cima alle pagine dei risultati dei motori di ricerca. Il CSS critico è uno di questi argomenti tecnici per l’ottimizzazione della consegna dei contenuti che a sua volta influisce direttamente sulla velocità. L’ecosistema di WordPress lo rende più complicato per gli utenti normali che utilizzano più plug-in sul proprio sito. In questo articolo, esploriamo come creare CSS critici per il sito WordPress per migliorare il punteggio di Google PageSpeed.

Capire le basi

Prima di discutere di CSS critici, è necessario comprendere alcune terminologie come above the fold e ottimizzazione della distribuzione dei contenuti. Inoltre, devi anche comprendere il metodo di base per utilizzare i fogli di stile esterni su WordPress.

Contenuto above the fold

Quando apri un sito Web su desktop o dispositivo mobile, la parte visibile che vedi sullo schermo è l’area del contenuto above the fold. Questa è una terminologia tradizionale dei giornali in cui puoi vedere i contenuti above the fold nella parte superiore della prima pagina. In genere, le persone abituate a piegare il giornale e l’area above the fold offre contenuti importanti. Allo stesso modo, la parte superiore visibile della pagina Web che viene caricata per prima dovrebbe offrire all’utente i contenuti più preziosi. Quindi, dovresti concentrarti sull’ottimizzazione della sezione superiore visibile per caricare con una velocità incredibile.

Ottimizzazione della consegna dei contenuti

Molti strumenti di velocità come Google PageSpeed ​​Insights misurano il modo in cui il sito Web fornisce contenuti above the fold. Puoi vederlo come una misura di First Contentful Paint (FCP). Se rilevano un blocco, verrà visualizzato un avviso per rimuovere l’elemento di blocco. Uno dei suggerimenti popolari che vedrai nello strumento Google PageSpeed ​​Insights è eliminare le risorse che bloccano il rendering. Se fai clic su tale suggerimento, Google ti mostrerà l’ottimizzazione della consegna di CSS/JS critici e differirà tutti i CSS/JS non critici.

Come generare CSS critici nel sito WordPress?

Suggerimenti critici su CSS e JS

La correzione di JavaScript che blocca il rendering (jQuery) è abbastanza semplice poiché i temi/plugin caricano di default gli script nella sezione piè di pagina. jQuery è l’unico problema, che potrebbe essere necessario per molti siti per caricare contenuti above the fold. Poiché WordPress utilizza anche jQuery, puoi ignorare questo errore se è dovuto solo a jQuery. Altrimenti, usa plugin come WP Rocket per combinare e fornire tutti gli script se ciò non interrompe il layout del tuo sito.

Tuttavia, il problema è generare CSS critici e caricarli prima. In questo articolo, spiegheremo come gestire l’ottimizzazione CSS per migliorare il punteggio di velocità della pagina.

Correlati: corrette impostazioni del plug-in WP Rocket per velocizzare il tuo sito.

Caricamento CSS nei siti Web

Esistono diversi modi per inserire CSS nella tua pagina web. Puoi farlo in modalità in linea, interna o esterna. Il modo più popolare e consigliato è quello di collegare fogli di stile esterni nella sezione dell’intestazione di una pagina web. Poiché il contenuto nella sezione dell’intestazione viene caricato per primo con la pagina Web, influisce drasticamente sul caricamento del contenuto above the fold e quindi sulla velocità della pagina.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

Caricamento CSS in WordPress

WordPress utilizza style.css come file esterno per fornire gli stili del tema. Questo è un file obbligatorio (oltre a functions.php) per l’esecuzione di un sito Web WordPress. Inoltre, ogni plug-in del tuo sito potrebbe aggiungere ulteriori CSS archiviati. Apri il tuo sito web nel browser Chrome e visualizza il codice sorgente (assicurati di non avere plug-in di memorizzazione nella cache installati o di aver disabilitato la memorizzazione nella cache per la pagina).

Come generare CSS critici nel sito WordPress?

Fogli di stile nell’intestazione

Puoi vedere i collegamenti di WordPress a tutti i fogli di stile esterni nella sezione dell’intestazione della pagina. Ciò può causare molteplici problemi dal punto di vista dell’ottimizzazione:

  • Alcuni temi utilizzano stili CSS pesanti con poche dimensioni MB. Non è necessario che tutti questi stili vengano caricati quando un utente apre una pagina Web su desktop o dispositivo mobile.
  • Esistono diversi tipi di post come prodotti che possono utilizzare stili completamente diversi. In questo caso, non è necessario l’altro CSS per il caricamento iniziale (above-the-fold).

Ogni pagina del tuo sito necessita di un CSS minimo per caricare i contenuti above the fold. Questo CSS minimo necessario per il caricamento della pagina è chiamato CSS critico in termini tecnici. In tutti i casi di cui sopra, Google PageSpeed ​​Insights e altri strumenti ti mostreranno un avviso per ottimizzare la consegna CSS.

Ricorda, la rimozione di CSS e script inutilizzati è anche correlata all’utilizzo di troppi CSS / script nella pagina. Tuttavia, questo è molto diverso dall’ottimizzazione CSS critica. Potresti anche non utilizzare alcuni plugin su una pagina specifica. Ad esempio, non è necessario il CSS del plug-in del modulo di contatto su tutte le pagine del sito. In questo caso, i file CSS/JS dai file del modulo di contatto non sono necessari in un normale post del blog e vedrai rimuovere l’avviso CSS/JS inutilizzato. Consulta il nostro articolo su come disabilitare CSS/JS inutilizzati in WordPress e ottimizzare le pagine WooCommerce per le chiamate AJAX di amministrazione.

Come generare CSS critici in WordPress?

Ora che sai quanto sia importante il CSS critico per migliorare la velocità di caricamento della pagina. Esistono due modi per generare CSS critici per il tuo sito.

  • Genera CSS critici manualmente e inseriscili nel tuo sito
  • Usa il plugin WP Rocket per ottimizzare la consegna dei contenuti

Spiegheremo entrambi i processi in dettaglio e potrai scegliere quello migliore che funziona per il tuo sito.

Correlati: WP Rocket funzionerà con l’hosting SiteGround?

Generazione manuale di CSS critici

Esistono molti strumenti di terze parti disponibili su Internet per generare manualmente CSS critici. Tuttavia, questo ha senso quando tutte le pagine dei tuoi siti sono simili e non hanno contenuti personalizzati nell’area above the fold. Puoi provare altri servizi di generazione CSS critici gratuiti come Sitelocity.

  • Vai al sito Web Sitelocity e inserisci l’URL della tua pagina.
  • Fare clic sul pulsante "Genera CSS percorso critico".
  • Puoi ottenere il CSS critico minimizzato per la tua pagina.

Come generare CSS critici nel sito WordPress?

Genera CSS critici

Ora che hai generato un CSS critico e il prossimo compito è inserirlo nella sezione dell’intestazione del tuo sito. In teoria, puoi inserire gli stili nel tuo file header.php tra i tag e. Ci sono plugin che aiutano a inserire gli stili nella sezione dell’intestazione senza modificare i file modello. Autoptimize è uno dei plugin che possiamo consigliare per questo scopo. Se stai già utilizzando Autoptimize per la memorizzazione nella cache, puoi anche utilizzare lo stesso plugin per inserire CSS critici.

Puoi inserire CSS critici in "Opzioni CSS" del plugin Autoptimize. Prima abilita la casella di controllo "Inline and Defer CSS" e incolla il CSS critico nella casella di testo che appare.

Come generare CSS critici nel sito WordPress?

Opzioni CSS

Come puoi vedere, il plug-in Autoptimize può anche incorporare automaticamente CSS above the fold rinviando altri stili. Tuttavia, questo aumenterà rapidamente la dimensione della cache al 100% e non hai alcuna opzione nel plug-in per eliminare automaticamente la cache. Inoltre, nella maggior parte dei casi, interromperà il sito. Puoi scegliere il componente aggiuntivo Autoptimize CriticalCSS Power-Up che ti aiuterà in modo migliore. Per utilizzare questo componente aggiuntivo, devi ottenere l’API da Criticalcss.com per $ 10 al mese.

Perché la generazione manuale di CSS critici non funzionerà?

Sebbene il processo di inserimento manuale di cui sopra sembri facile, non è un compito facile. Di seguito sono riportati alcuni dei motivi per cui il tuo CSS critico non funzionerà.

  • Potresti avere contenuti diversi come pagine, post di blog, prodotti, ecc. Ogni tipo di contenuto sul tuo sito necessita di CSS critici diversi per caricare i contenuti above the fold. L’utilizzo del plug-in o dell’inserimento manuale caricherà il CSS critico su tutte le pagine e interromperà alcuni contenuti.
  • Devi generare CSS critici ogni volta che aggiorni il tema, il plugin e il core di WordPress. In caso contrario, l’utilizzo di vecchi CSS critici interromperà il layout del tuo sito. Questo è un compito impossibile per gli utenti normali aggiornare continuamente i CSS critici per ogni singolo aggiornamento sul sito. Con le opzioni di aggiornamento automatico disponibili, devi stare molto attento prima di aggiornare plugin/tema/core sulla tua installazione.
  • Potrebbe essere necessario un CSS critico separato per dispositivi mobili e desktop.

Con tutti questi problemi, l’unica opzione rimasta è utilizzare alcuni plugin che si occupino di questi e generino CSS critici in modo dinamico e automatico.

Crea CSS critici per WordPress con WP Rocket

Fortunatamente, hai un plug-in di memorizzazione nella cache che esegue esattamente questa generazione CSS critica in WordPress. WP Rocket è uno dei plugin di memorizzazione nella cache più popolari per WordPress grazie alle sue impostazioni semplificate. Ancora una volta, la generazione di CSS critici è una delle bellezze del plug-in che qualsiasi utente normale può ottenere senza interrompere il sito.

  • Per prima cosa devi acquistare il plugin premium WP Rocket.
  • Dopo aver installato e attivato WP Rocket, vai su "Impostazioni > WP Rocket" e vai alla sezione "Ottimizzazione file".
  • Scorri verso il basso e abilita la casella di controllo "Ottimizza consegna CSS".

Come generare CSS critici nel sito WordPress?

Abilita CSS critici in WP Rocket

Ciò consentirà al plug-in di generare automaticamente CSS critici per ogni tipo di post sul tuo sito WordPress. Include la prima pagina. Home page, pagina, post e qualsiasi altro tipo di post personalizzato che utilizzi sul tuo sito. Se necessario, puoi aggiungere CSS critici di fallback che generi manualmente utilizzando uno strumento di terze parti. In genere, puoi lasciare vuota questa casella CSS critica di fallback. Puoi anche abilitare la memorizzazione nella cache mobile separata nella sezione "Cache".

Nota che WP Rocket è un plug-in premium con licenza per sito singolo disponibile per $ 49. A nostro avviso, vale la pena acquistare questo plugin in quanto offre una soluzione di memorizzazione nella cache end-to-end per l’ottimizzazione della velocità. Il plugin viene fornito con un anno di supporto e aggiornamenti. Dopodiché, continuerà a funzionare e potrai utilizzare i CSS critici e altre funzionalità senza rinnovo. Puoi rinnovare con il 30% di sconto per ottenere supporto e ottenere funzionalità aggiuntive. Questa è un’opzione molto migliore rispetto a $ 10 al mese per l’API criticalcss da utilizzare con Autoptimize.

Rigenera CSS critici

Quando aggiorni il tema/plugin/WordPress core o aggiungi tipi di post personalizzati sul tuo sito, è necessario rigenerare i CSS critici. Altrimenti, WP Rocket utilizzerà vecchi CSS critici e interromperà il layout del tuo sito. Pertanto, assicurati di rigenerare i CSS critici senza dimenticare.

  • Fare clic sul menu "WP Rocket" nella barra in alto e selezionare l’opzione "Rigenera CSS critico".
  • In alternativa, puoi andare alla dashboard del plugin e fare clic sul pulsante "Rigenera CSS critico".

Come generare CSS critici nel sito WordPress?

Rigenera CSS critici

CSS critico personalizzato per una pagina specifica

Come accennato, potresti avere una home page o un’altra pagina creata con un plug-in di creazione di pagine. Questa pagina avrà un CSS critico completamente diverso rispetto a tutti gli altri post del blog sul tuo sito. In questo caso, devi creare CSS critici separati e caricare in modo condizionale solo su quella pagina. WP Rocket può aiutarti a raggiungere questo obiettivo con pochi clic.

  • Vai alla pagina / editor di post della pagina che desideri generare CSS critici separati.
  • Nel pannello del documento della barra laterale, trova il pannello "Opzioni di WP Rocket". Se non lo trovi, fai clic sul pulsante dei tre punti nell’angolo in alto a destra e seleziona "Preferenze". Nel pop-up, puoi abilitare i pannelli dei documenti richiesti disponibili sul tuo sito.
  • Seleziona la casella di controllo "Ottimizza consegna CSS" e fai clic sul pulsante "Genera CPCSS specifico".
  • Questo genererà CSS critici specifici per quella pagina e il plug-in caricherà questo CSS critico quando gli utenti visitano la pagina.

Come generare CSS critici nel sito WordPress?

Genera CSS critici per una pagina specifica

Correlati: revisione del plug-in di memorizzazione nella cache di WP Rocket.

Test di CSS critici

Dopo aver implementato il metodo manuale o aver utilizzato il plug-in WP Rocket, puoi testare la pagina visualizzando l’origine della pagina. Assicurati di disconnetterti dal tuo pannello di amministrazione o di abilitare la memorizzazione nella cache per gli utenti che hanno effettuato l’accesso nel plug-in. Come puoi vedere nello screenshot qui sotto, WP Rocket aggiunge CSS critici nell’intestazione.

Come generare CSS critici nel sito WordPress?

WP Rocket Critical CSS

Puoi anche controllare le pagine nello strumento Google PageSpeed ​​Insights. Se tutto va bene, vedrai eliminare le risorse che bloccano il rendering e altri errori CSS sotto i risultati passati. Ciò indica che hai implementato correttamente i CSS critici sul sito.

Parole finali

Speriamo che questo articolo abbia evidenziato l’importanza dei CSS critici nel sito WordPress. Puoi utilizzare l’opzione manuale quando hai un sito più piccolo che contiene poche pagine. Tuttavia, per un blog in esecuzione che ha un gran numero di post e diversi tipi di post, puoi provare il plug-in WP Rocket. Anche se ti costa un po’ di soldi, puoi ottenere una soluzione di memorizzazione nella cache completa per il tuo sito.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More