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

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

2

Temi leggeri come Astra, GeneratePress e Genesis caricano molto meno CSS e script sul sito. Ciò aiuta a rimuovere gli errori CSS e JavaScript inutilizzati nello strumento Google PageSpeed ​​Insights e a far salire alle stelle il punteggio di velocità. Tuttavia, il 99% dei temi WordPress commerciali combina più funzionalità e carica script e CSS pesanti. Sia che utilizzi un tema leggero o pesante, hai comunque bisogno di molte funzionalità tramite il plug-in. Combinando temi e plug-in, il punteggio di velocità complessivo avrà un impatto su ogni singolo file sorgente sul sito. In questo articolo, spiegheremo come rimuovere CSS e JavaScript inutilizzati in WordPress per migliorare il punteggio di Google PageSpeed ​​Insights.

Correlati: leggi oltre 400 tutorial WordPress gratuiti.

Che cos’è CSS e JavaScript inutilizzati?

Spieghiamolo con un semplice esempio. Contact Form 7 è uno dei plugin popolari per l’aggiunta di moduli di contatto nei siti WordPress. In genere, è necessario il modulo di contatto nella pagina "Contatti" e forse su poche altre pagine. Non utilizzerai il modulo di contatto su ogni post del blog. Tuttavia, il plug-in Contact Form 7 caricherà CSS e JavaScript su ogni pagina e post del blog nel tuo sito È un grosso problema quando hai 1000 post di blog e tutti caricano script / CSS del modulo di contatto senza alcuna necessità.Questi CSS e script non necessari sono chiamati CSS inutilizzati e script non utilizzati.

Un altro buon esempio è un negozio WooCommerce. Hai bisogno di stili e script WooCommerce solo su pagine come prodotti, archivi prodotti, carrello, checkout e negozio. Tuttavia, il plugin non ha alcuna opzione per impedire il caricamento di file sui post o sulle pagine del blog.

Perché questo è un problema?

Sfortunatamente, quasi tutti i plugin caricheranno risorse su tutte le pagine del tuo sito. Ciò influirà pesantemente sulla velocità di caricamento della pagina e ridurrà il punteggio di velocità in strumenti come Google PageSpeed ​​Insights. Vedrai gli errori come di seguito come opportunità, durante il test dell’URL della pagina in PageSpeed ​​Insights.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Errore PageSpeed ​​per CSS e JS non utilizzati

Sebbene lo strumento affermi che ciò non influirà direttamente sul punteggio delle prestazioni, ha un enorme impatto sul tempo di caricamento. A questo punto, il punteggio del 30% è per il tempo di blocco e avere CSS/JS inutilizzati e risorse di blocco del rendering ridurrà il punteggio fino in fondo. Inoltre, alcune società di hosting addebiteranno in base all’utilizzo della larghezza di banda. Il caricamento di file CSS/script non necessari sul tuo sito aumenterà l’utilizzo della larghezza di banda multiplo. Pertanto, è necessario identificare i CSS e JavaScript non utilizzati e rimuoverli dal caricamento su tutte le pagine.

Come identificare CSS e JavaScript inutilizzati?

Devi capire cosa sta causando il caricamento delle risorse inutilizzate sulle tue pagine. Come spiegato sopra, non è necessario caricare modulo di contatto, negozio online o plug-in di revisione su tutte le pagine. Tuttavia, l’intero compito è più complicato di quanto pensi.

  • Innanzitutto, elimina la memorizzazione nella cache e disabilita il plug-in di memorizzazione nella cache sul tuo sito. Ora vai allo strumento Google PageSpeed ​​Insights e controlla il punteggio di velocità.
  • Fare clic sui messaggi "Rimuovi JavaScript inutilizzato" e "Rimuovi CSS inutilizzato" per espanderli. Google ti mostrerà l’elenco delle risorse con le dimensioni del trasferimento e i potenziali risparmi.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Visualizza le risorse inutilizzate in PageSpeed

  • Codice esterno: come puoi vedere nello screenshot sopra, "pagad2.googlesyndication.com" proviene da Google AdSense. Non puoi rimuovere CSS e JavaScript inutilizzati caricati da siti Web di terze parti. Questi script vengono caricati sul tuo sito con pubblicità, analisi, incorporamento di video di YouTube o plug-in di condivisione sociale. Quindi, devi capire che queste risorse esterne avranno un impatto sulla velocità della pagina e non hai alcun controllo su di esse a meno che tu non decida di rimuoverle. controlla l’articolo su AdSense Vs Page Speed per capire che gli annunci uccidono la velocità della tua pagina.
  • Plugin e file del tema: spiegheremo come rimuoverli nella prossima sezione.
  • CSS e script in linea: lo strumento Google PageSpeed ​​Insights generalmente non li visualizza. Devi identificarli manualmente e rimuoverli dal tuo sito. Se un plug-in inserisce CSS/script in linea, disabilita i file del plug-in o evita di aggiungere codice in linea personalizzato. Ricorda, c’è un grosso problema con i temi pesanti che usano style.css con migliaia di righe. Devi rimuovere manualmente il codice all’interno del file style.css per ridurre le dimensioni.

In sintesi, è facile rimuovere CSS e JavaScript inutilizzati se vengono caricati come file separati. Il caricamento di file style.css di grandi dimensioni o CSS in linea non può essere rimosso a meno che non li rivedi manualmente ed elimini i codici inutilizzati. In alternativa, potrebbe essere necessario trovare un tema o un plug-in leggero per eliminare il problema. Dopo aver individuato la causa dell’errore, puoi riattivare il plug-in di memorizzazione nella cache sul tuo sito.

Come rimuovere CSS e JavaScript inutilizzati?

Esistono due modi per rimuovere i file CSS e JS inutilizzati quando la pagina viene caricata nel browser. La prima opzione è utilizzare plug-in premium come WP Rocket e la seconda opzione è utilizzare plug-in gratuiti. Spiegheremo entrambi i metodi in dettaglio, in modo che tu possa controllare e scegliere quello più facile per te.

Rimuovi CSS inutilizzati con WP Rocket

WP Rocket è il plug-in di memorizzazione nella cache più popolare per WordPress che offre un’interfaccia utente super semplice. Per migliorare il tempo di caricamento della pagina, è necessario acquistare il plug-in e aggiornarlo all’ultima versione (sopra la 3.9).

  • Vai al menu "Impostazioni> WP Rocket" nel pannello di amministrazione di WordPress.
  • Fare clic sulla scheda "Ottimizzazione file" e scorrere verso il basso fino alla fine della sezione "File CSS".
  • Abilita l’opzione "Unused CSS (Beta)" e conferma l’opzione "Attiva Rimuovi CSS inutilizzato" dal messaggio di avviso.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Rimuovi CSS inutilizzati in WP Rocket

  • Il plug-in inizierà a elaborare il CSS nel tuo sito, il che potrebbe richiedere diversi minuti per il completamento.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

La rimozione del CSS inutilizzato è stata completata

  • Dopo aver terminato, vedrai un messaggio di successo "Rimuovi CSS inutilizzato è completo!".
  • Puoi anche abilitare l’opzione "Ottimizza consegna CSS" per generare CSS critici ed evitare problemi con il blocco del rendering.
  • Fare clic sul pulsante "Salva modifiche" nella parte inferiore della pagina per rigenerare i file memorizzati nella cache.

Rimuovi JavaScript inutilizzato con WP Rocket

A differenza dei CSS, la rimozione di JS non è possibile con il plugin WP Rocket. Tuttavia, puoi abilitare le opzioni "Carica JavaScript posticipato" e "Ritarda esecuzione JavaScript" nella sezione "Ottimizzazione file > File JavaScript". Ciò ritarderà sia i codici interni che quelli esterni ed eliminerà i problemi di blocco del rendering JavaScript.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Ritarda l’esecuzione di JavaScript

Assicurati che il tuo sito funzioni correttamente dopo aver abilitato queste opzioni.

Utilizzo del plug-in Asset CleanUp per rimuovere CSS e JavaScript non utilizzati

Quando hai caricato molti plugin e file di temi, segui le istruzioni seguenti per rimuoverli dalle pagine in cui non ti servono.

  • Accedi alla dashboard di amministrazione di WordPress e vai alla sezione "Plugin > Aggiungi nuovo".
  • Digita "ripulitura asset" nella casella di ricerca e individua il plug-in "Ripulitura asset: Page Speed ​​Booster".

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Installa e attiva il plugin

  • Fare clic sul pulsante "Installa ora" e quindi attivare il plug-in.
  • Dopo aver attivato il plugin, ti consigliamo di leggere la documentazione mostrata. Ciò è necessario per utilizzare correttamente il plugin.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Leggi le guide introduttive

Impostazioni plugin

Il plugin ha numerose impostazioni che non spiegheremo in questo articolo. Se stai utilizzando un plug-in di memorizzazione nella cache come WP Rocket sul tuo sito, assicurati di non utilizzare altre funzioni oltre a disabilitare script e CSS non utilizzati. Vai al menu "Ripulitura risorse > Impostazioni" e quindi alla scheda "Preferenze di utilizzo del plug-in". Qui puoi decidere il modo in cui desideri visualizzare e disabilitare i CSS/script non utilizzati sulle tue pagine.

  • Gestisci nella dashboard: abilita questa opzione. Questo ti aiuterà ad analizzare la pagina dall’editor dei post all’interno della dashboard di amministrazione.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Abilita Gestisci in Dashboard

  • Gestisci nel front-end: se desideri analizzare la pagina dal browser front-end, abilita questa opzione. Altrimenti, puoi disabilitarlo. Ricorda, l’analisi front-end può essere eseguita solo dall’utente amministratore che ha effettuato l’accesso. Gli utenti che visitano il tuo sito non subiranno alcun impatto durante il tuo controllo.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Abilita o disabilita la gestione in frontend

  • Layout elenco risorse: fai clic sul menu a discesa e seleziona "Tutti gli stili e gli script> Raggruppati per posizione (temi, plug-in, core ed esterni). Questo ti aiuterà a visualizzare i file di risorse raggruppati in diverse categorie.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Imposta layout vista

  • Nascondi il file core di WordPress dall’elenco delle risorse? – abilita questa opzione in modo da non rovinare i file core di WordPress.

Ora vai alla scheda "Modalità test" e abilita l’opzione "Abilita modalità test". Questo ti aiuterà a verificare che il sito non funzioni dopo aver disabilitato gli script e i CSS prima di renderlo pubblico.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Abilita modalità di prova

Fai clic su "Aggiorna tutte le impostazioni" in basso per applicare le modifiche.

Rimuovi CSS e JavaScript non utilizzati

A seconda delle impostazioni, puoi analizzare la pagina dall’editor o dal front-end.

  • Disabilitazione di script e CSS dall’editor: modifica uno qualsiasi dei post esistenti per andare all’editor dei post. Scorri verso il basso per visualizzare i meta box dal plug-in Asset CleanUp. Visualizza tutti i CSS e gli script caricati su quella pagina e disabilita le risorse che non ti servono.
  • Disabilitazione di script e CSS dal frontend: se hai abilitato l’opzione "Gestisci nel front-end", apri uno qualsiasi dei tuoi post sul front-end del browser. Ricorda, dovresti aver effettuato l’accesso al tuo pannello di amministrazione di WordPress in un’altra scheda del browser. Nella parte inferiore della pagina, vedrai meta box simili che disabilitano le risorse caricate nella pagina.

In entrambi i casi, vedrai tutti i file CSS e JavaScript caricati sulla pagina raggruppati secondo le tue impostazioni.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Visualizza le risorse caricate nel gruppo

Espandi ogni gruppo e visualizza i dettagli dei file caricati dai tuoi plugin e temi. Per ogni file CSS e JS, hai più opzioni come mostrato nell’immagine qui sotto.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Disabilita o abilita CSS e JS

  • Scarica la risorsa sulla pagina.
  • Disabilita il file in tutto il sito
  • Disabilita su tutti i post (continuerà a caricarsi su pagine e tipi di post personalizzati ).
  • Poche altre opzioni come l’utilizzo di RegEx sono disponibili solo nella versione pro del plugin.

Dopo aver disabilitato i file, aggiorna il tuo post per rendere effettive le modifiche sul sito.

Visualizzazione di file disabilitati e rimozione della modalità di prova

  • Vai alla sezione "Ripulitura risorse > Modifiche collettive".
  • Vai alla scheda "Post, pagine e tipi di post personalizzati" e seleziona "post" dal menu a discesa.
  • Qui puoi visualizzare tutti i file disabilitati sul tuo sito.
  • Seleziona la casella di controllo "Rimuovi regola in blocco" e fai clic sul pulsante "Applica modifiche" in basso per abilitare nuovamente il caricamento del file.
  • In alternativa, puoi modificare qualsiasi post nell’editor dei post e modificare il comportamento di caricamento dei file.

Come rimuovere CSS e JavaScript inutilizzati in WordPress?

Visualizza e rimuovi file in blocco

Controlla il tuo sito e se tutto va bene torna alla pagina delle impostazioni e disabilita l’opzione "Modalità test". Ciò renderà le modifiche attive per tutti gli utenti che visitano il tuo sito web. Allo stesso modo, puoi disabilitare i file CSS e JS su tipi di post personalizzati, pagine e pagine di prodotto modificandoli. Controlla le tue pagine con lo strumento Google PageSpeed ​​Insights per vedere se gli errori sono stati rimossi.

Parole finali

Ci auguriamo che l’articolo sia utile per rimuovere i file CSS e JavaScript inutilizzati dal tuo sito e migliorare il punteggio di Google PageSpeed. Ti consigliamo di utilizzare WP Rocket poiché è facile rimuovere CSS e ritardare JS esterno con pochi clic. Se stai utilizzando il plug-in gratuito Asset Cleanup, ti aiuterà solo a disabilitare il caricamento di file CSS e JS da plug-in e temi. Devi evitare di utilizzare codici di terze parti e rimuovere manualmente i codici non necessari all’interno del file principale style.css. Quando modifichi manualmente i file, assicurati di utilizzare il tema figlio per aggiornare il foglio di stile in modo da non perdere le modifiche ogni volta che aggiorni il tema.

Fonte di registrazione: 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