Come rimuovere CSS e JS inutilizzati in WordPress (molto facile)

Avere molti CSS e JS inutilizzati nel tuo sito Web può ridurre il tempo di caricamento del tuo sito Web. Se esegui il tuo sito Web tramite uno strumento di test della velocità come Google PageSpeed ​​Insight, potresti ricevere un avviso per rimuovere CSS inutilizzati.

Per fortuna, c'è un modo molto semplice per farlo. Non è necessaria alcuna conoscenza tecnica speciale per poter rimuovere CSS e JS inutilizzati dal tuo sito WordPress.

Ciò è dovuto a un fantastico plug-in noto come Asset CleanUp: Page Speed ​​Booster. Con questo plugin, rimuovere i CSS inutilizzati è facile come fare clic su alcuni pulsanti. In alternativa, se non ti dispiace spendere qualche soldo all'anno, con WP Rocket c'è un pulsante CSS inutilizzato rimosso, basta attivarlo e il plugin rimuoverà automaticamente tutti i CSS inutilizzati.

Checkout: i 7 migliori hosting WordPress gestiti su Google Cloud

Cos'è il CSS inutilizzato?

CSS inutilizzato è un file CSS presente in una pagina ma per lo più non è necessario per il caricamento della pagina. Quando un visitatore apre un sito Web, il browser in genere deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni sulla pagina visitata prima di poter visualizzare il contenuto della pagina al visitatore. Se esiste un CSS su una pagina del genere che non viene utilizzato nella pagina, il browser perderà tempo su di esso.

Un classico esempio di ciò è la maggior parte dei plug-in dei moduli di contatto utilizzati. Questi plugin, sebbene siano usati principalmente solo nella pagina Contattaci, caricano i suoi CSS in tutto il sito web. Non importa se è la homepage in cui non viene utilizzato, il CSS verrà caricato.

Se ci sono troppi CSS che non sono necessari ma stanno caricando e rallentando il tempo del browser per leggere e visualizzare una pagina, può diventare un problema.

Oltre ai plugin, gli sviluppatori di temi scrivono molte cose in style.css che per lo più non sono necessarie. Ma che sia necessario o meno, si caricano ogni volta che viene caricato il tuo sito!

Un CSS inutilizzato potrebbe non essere un problema, ma molti CSS inutilizzati possono influire sul tempo di caricamento del tuo sito web.

Checkout: i 10 migliori temi WordPress più veloci e migliori

Come identificare i CSS inutilizzati

Trovare CSS e JS inutilizzati è una cosa molto facile da fare. Ci sono due approcci che consiglierò.

Uno è analizzare il tuo sito web tramite Google PageSpeed ​​Insight. Controlla se il tuo sito web ha un problema di rimozione CSS inutilizzato. Cliccaci sopra e sarai in grado di identificare il componente del tuo sito responsabile.

Puoi vedere dall'alto che c'è un caso di CSS non utilizzato registrato. Sono in grado di vedere il plug-in e la posizione del CSS inutilizzato guardando questo.

La seconda opzione è ottenere un'analisi più dettagliata. Puoi raggiungere questo obiettivo utilizzando gli strumenti di Chrome Dev.

Sul tuo browser Chrome, apri gli strumenti Chrome Dev, quindi vai alla copertura. Quindi fare clic sul pulsante di ricarica all'interno dell'area di copertura. Puoi trovare una guida completa su come farlo nello strumento Google Developers.

L'altra opzione è usare jitbit per cercare selettori CSS inutilizzati. Puoi anche usare PurifyCSS per trovare CSS inutilizzati

Come rimuovere CSS inutilizzati

Segui questi passaggi per rimuovere CSS inutilizzati da WordPress:

1. Installa la pulizia delle risorse

Vai al plugin quindi Aggiungi nuovo. Quindi digiti "Asset CleanUp" nella casella di ricerca della pagina Aggiungi nuovo plug-in. Installa e attiva il plugin.

2. Vai alle impostazioni del plugin

Per accedere alle impostazioni del plug-in, dalla dashboard di WordPress fare clic su Impostazioni, quindi su Asset CleanUp.

3. Scarica CSS e JS indesiderati

Nelle impostazioni del plug-in, potrebbe essere necessario accettare di sapere come funziona il plug-in sotto lo stripping fat tap prima di iniziare.

Per scaricare CSS e JS fare clic su CSS e JSS manager. Da lì puoi rimuovere qualsiasi CSS e JS che non ti serve. Puoi rimuoverlo solo per la home page, per l'intero sito o per un URL specifico. Puoi anche rimuovere post, pagine o categorie.

Un esempio è scaricare qualsiasi modulo di contatto dal caricamento per l'intero sito ad eccezione della pagina Contattaci

Prenditi il ​​tuo tempo e scarica tutti i CSS e JS che sai non sono necessari. Assicurati di testare il tuo sito dopo aver finito per assicurarti che tutto sia a posto.

Rimuovere i plugin CSS WordPress inutilizzati

Ecco alcuni plugin che puoi utilizzare per rimuovere CSS inutilizzati in WordpPress:

1. Pulizia delle risorse: aumento della velocità della pagina

Asset CleanUp: Page Speed ​​Booster semplifica la rimozione di CSS e JSin WordPress inutilizzati anche per i principianti. Tutto quello che devi fare è disattivare un particolare CSS che non è necessario per una determinata pagina.

Puoi anche disattivare solo per i singoli post. Con la versione premium, puoi disattivare i CSS/JS non utilizzati tramite plugin.

Questo plugin è un plugin completo per le prestazioni con molte altre opzioni per velocizzare WordPress. La rimozione di CSS/JS inutilizzati è solo una parte di esso.

In questo post, ho usato questo plugin ha una guida.

2. WP Rocket

WP Rocket è il plugin numero uno per le prestazioni premium di WordPress. Se sei un principiante, voglio dire se non hai esperienza o non ti senti a tuo agio con WordPress, allora WP Rocket è il modo più semplice per rimuovere CSS inutilizzati.

Devi acquistare il plug-in, una volta fatto, puoi scaricarlo dal tuo account o controllare la tua e-mail per un collegamento per il download.

Installa il plugin tramite Dashboard>plugin>Aggiungi nuovo>Carica.

Basta accedere alle impostazioni di WP Rocket, quindi fare clic sulla scheda "Ottimizzazione file". Quindi scorri verso il basso e vedrai "Rimuovi CSS inutilizzati", seleziona la casella, salva e svuota la cache.

3. Perfmatters

Perfmatters è un plugin premium sviluppato da Brian Jackson e suo fratello, Brett Jackson. Questo plugin può aiutare a rimuovere i CSS inutilizzati molto facilmente.

Innanzitutto, è necessario acquistare il plug-in. Quindi installarlo. Attiva licenza. Quando accedi alle impostazioni, attiva la gestione degli script.

Vai su qualsiasi pagina o pubblica un post sul tuo sito web, vedrai l'icona di script manager nel menu della dashboard, fai clic su di essa. Sarai in grado di rimuovere CSS e JS inutilizzati dalla pagina o globalmente.

Questo plugin è un plugin per le prestazioni, viene fornito con molte altre opzioni per velocizzare WordPress. La rimozione di CSS/JS inutilizzati ne fa parte.

4. Gestore CSS JS

CSS JS Manager può rimuovere specificamente CSS o JS da dispositivi mobili o desktop. A seconda di cosa vuoi ottenere.

Questo plugin può anche posticipare il caricamento di file CSS o JS.

Conclusione

Se hai molti CSS e JS inutilizzati, noterai un grande miglioramento nei punteggi di velocità e prestazioni.

Potrebbe essere impossibile rimuovere tutti i CSS inutilizzati ma puoi ridurli al minimo. Uso Asset CleanUp per rimuovere CSS inutilizzati per TargetTrend.

Ricorda, ottimizza ma non essere troppo ossessionato, a meno che tu non voglia che il tuo sito assomigli al sito Web più veloce del mondo.

Leggi anche:

Come eliminare le risorse che bloccano il rendering in WordPress

Come rendere WordPress molto veloce

Come indirizzare il traffico al tuo blog