Come rimuovere CSS e JS inutilizzati in WordPress (molto facile)
Avere molti CSS inutilizzati può rallentare il tuo sito. Se esegui il test del tuo sito web con Google PageSpeed insight, potresti ricevere un avviso per rimuovere i CSS inutilizzati. C'è un modo semplice per farlo senza codifica e tecnicità.
Avere molto codice CSS e JavaScript inutilizzato sul tuo sito web può rallentarne il caricamento. Se esegui un test di velocità del tuo sito web con uno strumento come Google PageSpeed Insights , potresti ricevere un avviso che ti consiglia di rimuovere il CSS inutilizzato.
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.
Questo è possibile grazie a un fantastico plugin chiamato Asset CleanUp: Page Speed Booster . Con questo plugin, rimuovere il CSS inutilizzato è facile come cliccare su un paio di pulsanti. In alternativa, se non ti dispiace spendere qualche euro all'anno, con WP Rocket è presente un pulsante per rimuovere il CSS inutilizzato: basta attivarlo e il plugin rimuoverà automaticamente tutto il CSS superfluo.
Scopri le 7 migliori soluzioni di hosting WordPress gestito 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.
Scopri i 10 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 ottenere questo risultato utilizzando gli strumenti di Chrome Dev.
Nel tuo browser Chrome, apri gli Strumenti per sviluppatori di Chrome e vai alla sezione Copertura. Quindi fai clic sul pulsante "Aggiorna" all'interno dell'area di copertura. Puoi trovare una guida completa su come fare negli Strumenti per sviluppatori di Google.
Un'altra opzione è utilizzare JitBit per cercare i selettori CSS inutilizzati . Puoi anche usare PurifyCSS per trovare il CSS inutilizzato.
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 JS non utilizzati in WordPress, anche per i principianti. Tutto ciò che devi fare è disattivare il CSS specifico 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 premium numero uno per le prestazioni di WordPress. Se sei un principiante, intendo se non hai esperienza o non ti senti a tuo agio con WordPress, allora WP Rocket è il modo più semplice per rimuovere il CSS inutilizzato.
Devi acquistare il plug-in, una volta fatto, puoi scaricarlo dal tuo account o controllare la tua e-mail per un link 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 permette di rimuovere facilmente il codice CSS inutilizzato.
Innanzitutto, è necessario acquistare il plug-in. Quindi installalo. 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 non utilizzati ne fa parte.
4. Gestore JS CSS
CSS JS Manager può rimuovere specificamente CSS o JS da dispositivi mobili o desktop, a seconda dell'obiettivo che si desidera raggiungere.
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 tutto il CSS inutilizzato, ma è possibile ridurlo al minimo. Io utilizzo Asset CleanUp per rimuovere il CSS inutilizzato per TargetTrend.
Ricorda, ottimizza, ma non ossessionarti troppo, a meno che tu non voglia che il tuo sito web sembri il più veloce del mondo.
Leggi anche:
Come eliminare le risorse che bloccano il rendering in WordPress
Articoli Correlati
