Durante l'esecuzione di uno Speed test, potresti aver notato di PageSpeed Insights relativo alla rimozione di CSS inutilizzati. Vorresti rimuovere i CSS inutilizzati dal tuo sito WordPress per velocizzarne il caricamento e ottenere 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 in base alla " visualizzazione di utilizzo" in Chrome Dev Tools . Gli URL in genere includono il nome del plugin, del tema o del codice di terze parti che ha generato il file. Di conseguenza, ora sarà più facile determinare cosa deve essere ottimizzato.
Rimuovi il CSS non utilizzato con il CSS utilizzato in un file separato
È più veloce creare un file separato poiché le dimensioni dell'HTML non aumentano e il file può essere memorizzato nella cache, a differenza dell'inlining. Viene inoltre caricato in un file separato dal CSS di LiteSpeed Cache e da FlyingPress. Inoltre, WP Rocket ottimizza in base ai punteggi anziché ai 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 .
