Se il tuo sito WordPress utilizza un tema WordPress a pagamento o uno popolare dal repository ufficiale dei temi WordPress, è probabile che il tema venga sviluppato per una varietà di casi d'uso. E potresti utilizzare solo un piccolo insieme di tutte le funzionalità disponibili nel tema.
In tal caso, il tuo sito sta caricando un sacco di CSS inutilizzati che non sono necessari per lo stile delle pagine del tuo sito. Ad esempio, il tema WordPress che stai utilizzando potrebbe avere stili anche per le pagine WooCommerce, ma se stai eseguendo solo un blog sul tuo sito WordPress, non stai utilizzando il CSS incluso per le pagine WooCommerce sul tuo sito e quindi servi inutilizzato CSS agli utenti.
Se hai testato il tuo sito web con lo strumento Google Pagespeed, probabilmente sei già consapevole che il tuo sito ha problemi CSS inutilizzati. In questa guida, ti mostreremo come verificare prima i CSS inutilizzati, quindi utilizzare uno strumento gratuito per rimuovere i CSS inutilizzati dal tuo sito WordPress.
Come controllare i CSS inutilizzati
Google Chrome DevTools (quello che vedi quando fai clic sull'opzione "Ispeziona" nel menu di scelta rapida) ha una funzione di copertura all'interno della scheda Fonti. Puoi utilizzare l'opzione Copertura per trovare CSS e JS inutilizzati caricati dal tuo sito web.
- Apri il tuo sito web in Chrome sul desktop.
- Fai clic con il pulsante destro del mouse su uno spazio bianco vuoto del tuo sito e seleziona Ispezionare dal menu contestuale.
- Clicca sul Fonti scheda, premere Ctrl + Maiusc + P per aprire una finestra di comando, quindi digitare copertura e seleziona Inizia la copertura della strumentazione e ricarica la pagina dai comandi disponibili.
- Nella scheda Copertura, fare clic su Filtro URL campo e inserisci qui il dominio principale del tuo sito per mostrare solo i file CSS/JS interni.
└ Controlla il Byte inutilizzati colonna per vedere la percentuale di dati caricati in un file CSS/JS dal tuo tema.
- Fare clic su un file CSS per visualizzare il CSS inutilizzato (contrassegnato da barre rosse) caricato dal proprio sito. Il CSS che viene utilizzato nella pagina corrente verrà mostrato con barre verdi.
Dopo aver analizzato tutti i CSS inutilizzati caricati sul tuo sito Web, è ora di rimuoverli. Sono disponibili diversi strumenti gratuiti per rimuovere CSS inutilizzati dalle pagine web. Di seguito è riportato uno degli strumenti popolari che ho testato e utilizzato nei miei progetti.
Usa PurifyCSS Online per rimuovere CSS inutilizzati
Di solito, potresti trovare un plug-in per quasi tutto in WordPress. Ma per la rimozione di CSS inutilizzati, sfortunatamente, non è disponibile un singolo plug-in. Quindi utilizzeremo strumenti manuali non specifici per WordPress per rimuovere CSS inutilizzati dal tuo sito.
PurifyCSS è il massimo strumento amichevole non per sviluppatori puoi trovare a che fare con CSS inutilizzati. Lo strumento ha una semplice interfaccia utente che consente agli utenti di fornire l'URL del sito web OPPURE il codice HTML e CSS. Per WordPress, utilizzeremo l'opzione URL e forniremo collegamenti a tutti i tipi di pagine del tuo sito per consentire allo strumento di acquisire CSS da tutti e ottimizzare per i CSS inutilizzati.
Ecco un rapido elenco di pagine da inserire nello strumento:
- URL della home page
- URL di pagine di post multipli da ciascuna categoria sul tuo sito
└ Questo serve per garantire che il CSS sia incluso per tutti gli elementi del post.
- Contatti, Informazioni, Privacy e tutti i tipi di pagine diverse che potresti avere sul tuo sito.
- Pagina archivio, pagina di ricerca, pagine autore
- Pagine di tipo post personalizzato
Suggerimento giusto: Crea un post/pagina di "caratteristiche" con tutti gli elementi del tema che utilizzi o potresti utilizzare in futuro come tabella, galleria di immagini, codice, pre, elenchi ordinati, elenchi non ordinati, moduli, schede, fisarmoniche, blocchi di Gutenberg che generalmente usi , eccetera.
Usa questo URL del post "caratteristiche" nello strumento PurifyCSS Online per assicurarti che il CSS per gli elementi comunemente usati sia incluso.
Colpire il Pulisci CSS dopo aver aggiunto tutti i tipi di URL rilevanti dal tuo sito nello strumento PurifyCSS Online.
Copia il nuovo CSS generato dallo strumento e utilizzalo sul tuo sito. Accertati di eseguire il backup dello style.css originale e altri file CSS nel tuo tema prima di sostituire il nuovo CSS generato da PurifyCSS.
Consiglio: Puoi utilizzare l'editor di temi WordPress integrato per modificare i file CSS del tuo tema oppure puoi utilizzare un programma FTP/SFTP per connetterti al server e modificare comodamente i file utilizzando un editor di Blocco note.