Durante l'esecuzione di un test di velocità, potresti aver notato di PageSpeed Insights relativo alla rimozione del CSS non utilizzato. Desideri rimuovere il CSS non utilizzato dal tuo sito WordPress per velocizzarne il caricamento e ottenere punteggi di prestazioni migliori?
I temi e i plugin di WordPress aggiungono molto codice CSS di cui non hai bisogno. Le prestazioni di WordPress e l'esperienza utente possono essere migliorate rimuovendo il codice CSS inutilizzato. In questo articolo ti mostreremo come rimuovere facilmente il codice CSS inutilizzato dal tuo sito web WordPress senza comprometterne l'efficacia.
Rimuovere i CSS inutilizzati in WordPress utilizzando diversi metodi
Se vuoi ridurre la quantità di CSS inutilizzato sul tuo sito web WordPress, puoi provare diversi metodi.
Sebbene sia possibile rimuovere tutto il CSS non necessario da WordPress, sarebbe un'impresa piuttosto ardua. Inoltre, a causa del funzionamento di WordPress dietro le quinte, potrebbe essere difficile per alcuni utenti individuare e rimuovere il CSS non necessario.
In tal caso, ti mostreremo diversi modi per rimuovere il CSS inutilizzato e potrai scegliere il metodo più adatto alle tue esigenze.
Trova i tuoi file CSS più grandi
Per visualizzare i file CSS più estesi, ordina il report di copertura per "visualizzazione dell'utilizzo" negli Strumenti per sviluppatori di Chrome. Gli URL in genere includono il nome del plugin, del tema o del codice di terze parti che ha generato il file. Di conseguenza, sarà più facile individuare gli elementi da ottimizzare.
Rimuovi il CSS non utilizzato con il CSS utilizzato in un file separato
Creare un file separato è più veloce poiché le dimensioni dell'HTML non aumentano e il file può essere memorizzato nella cache, a differenza dell'incorporamento. Inoltre, il CSS di LiteSpeed Cache e FlyingPress viene caricato in un file separato. Infine, WP Rocket ottimizza per i punteggi di traffico anziché per i visitatori, a differenza della maggior parte degli altri plugin, che utilizzano file diversi perché più veloci.
Evita i plugin che aggiungono CSS
Strumenti come Query Monitor e WP Hive sono validi, ma non sempre mostrano se un plugin aggiunge CSS/JS extra al front-end. Di conseguenza, l'impatto completo del plugin può essere osservato solo dopo aver testato nuovamente il sito web dopo aver aggiunto contenuti al front-end. I colpevoli più comuni sono gallerie, slider, moduli di contatto, commenti, chat, calendari e plugin per la creazione di pagine correlati al design.
Utilizza un tema leggero + un generatore di pagine.
Il front-end è sovraccarico di CSS, JavaScript e font. Di conseguenza, un sito web lento è garantito se si utilizzano plugin aggiuntivi per la creazione di pagine come Elementor Pro e Ultimate Addons.
Abilita le ottimizzazioni CSS nei Page Builder
Tra queste impostazioni ci sono gli esperimenti di Elementor e le impostazioni delle prestazioni di Divi, che includono diverse opzioni per ridurre le dimensioni del CSS (ad esempio, caricamento migliorato di risorse e CSS in Elementor e CSS dinamico in Divi). In generale, si ottengono risultati migliori abilitando prestazioni più elevate.
Disattiva le icone se non le usi
Se non utilizzi le icone di Elementor, disattivale. Per Google Fonts + Font Awesome, puoi farlo in Perfmatters o nella documentazione di Elementor.
Rimuovere CSS nei plugin di scarico delle risorse
Utilizzando Perfmatters, puoi disabilitare CSS/JS (o interi plugin) dove non sono necessari, rimuovere il CSS non utilizzato e sostituire gli iframe di YouTube con immagini di anteprima. Il CSS non utilizzato rimanente può essere reso più accessibile con tutti questi metodi. I file CSS/JS possono anche essere disabilitati con il plugin Asset CleanUp.
Immagini di sfondo con caricamento lento trovate in CSS
La maggior parte dei plugin di cache non caricano in modo differito le immagini di sfondo se sono compresse in un file CSS separato.
Pertanto, se desideri caricare le immagini di sfondo in modalità lazy load, consulta la documentazione del tuo plugin di cache. FlyingPress include una classe helper lazy-bg che puoi aggiungere alla classe CSS aggiuntiva, a differenza di WP Rocket che richiede HTML in linea. Una classe helper lazy-bg può essere aggiunta manualmente, oppure Optimole offre una soluzione che utilizza i selettori CSS.
Rimuovi Gutenberg CSS
Supponiamo che tu possa rimuovere dalla coda la libreria di blocchi Gutenberg se non utilizzi blocchi Gutenberg. Utilizza frammenti di codice o functions.php per aggiungerlo.
Combina CSS (o no)
La dimensione di CSS/JS non dovrebbe superare i 10 KB se combinati. Nella maggior parte dei casi, CSS e JavaScript non dovrebbero essere combinati, poiché è quasi impossibile.
Disabilita gli stili WooCommerce
Per impostazione predefinita, WooCommerce carica gli stili su tutto il tuo sito web. Se utilizzi questi stili solo sulle pagine di e-commerce, puoi disattivarli ovunque. WooCommerce ha la relativa documentazione, ma consigliamo "Disable WooCommerce Bloat", che offre molte più impostazioni per la rimozione del bloat.
Trova altri articoli simili su Seahawk Media.
