Durante l'esecuzione di un test di velocità, potresti aver notato Insights Pagespeed Avvertenza della rimozione CSS inutilizzata. Vorresti rimuovere CSS inutilizzati dal tuo sito WordPress per farlo caricare più velocemente e ottenere voti di prestazioni migliori?
C'è un sacco di codice CSS che viene aggiunto da temi e plugin WordPress che non hai bisogno. Le prestazioni di WordPress e l'esperienza dell'utente possono essere migliorate rimuovendo il codice CSS inutilizzato. Dimostreremo in questo articolo come è possibile rimuovere facilmente CSS inutilizzati dal tuo sito Web WordPress senza causare la rottura del tuo sito Web.
Rimuovere i CS non utilizzati in WordPress usando modi diversi
Se si desidera ridurre la quantità di CSS inutilizzati sul tuo sito Web WordPress, ci sono alcuni metodi diversi che puoi provare.
Mentre sarebbe possibile rimuovere tutti i CSS non necessari in WordPress, sarebbe un compito abbastanza difficile. Inoltre, a seguito del modo in cui WordPress funziona dietro le quinte, può essere difficile per alcuni utenti trovare e rimuovere CSS inutili.
In tal caso, ti mostreremo diversi modi per rimuovere CSS inutilizzati e puoi scegliere il metodo migliore adatto alle tue esigenze.
Trova i tuoi più grandi file CSS
Per vedere i tuoi file CSS più estesi, ordina il tuo rapporto di copertura mediante " visualizzazione di utilizzo" negli strumenti di Dev Chrome . Gli URL in genere includono il nome del plug-in, del tema o del codice di terze parti che ha generato il file. Di conseguenza, ora sarà più facile determinare cosa deve essere ottimizzato.
Rimuovere CSS inutilizzati con CSS usato in un file separato
È più veloce creare un file separato poiché la dimensione di HTML non aumenta e il file può essere memorizzato nella cache, a differenza di Inlining. Viene inoltre caricato in un file separato da CSS e FlyingPress di Litepeed Cache. Inoltre, WP Rocket ottimizza i punteggi piuttosto che i visitatori, a differenza della maggior parte degli altri plugin, che utilizzano file diversi perché sono più veloci.
Evita i plugin che aggiungono CSS
Strumenti come Query Monitor e WP Hive sono buoni, ma non mostrano sempre se un plugin aggiunge CSS/JS extra alla parte anteriore. Di conseguenza, il pieno impatto del plug-in può essere osservato solo dopo aver testimoniato il tuo sito Web dopo aver aggiunto contenuti al front-end. I colpevoli più comuni sono le gallerie, i cursori, i moduli di contatto, i commenti, la chat, i calendari e i plug -in del costruttore di pagine relativi al design.
Usa un tema leggero + Builder di pagine.
La parte anteriore è sovraccarica di CSS, JavaScript e caratteri. Di conseguenza, un sito Web lento è garantito se combinato con plug -in di costruttori di pagine extra come Elementar Pro e Ultimate Addons.
Abilita le ottimizzazioni CSS nei costruttori di pagine
Tra queste impostazioni ci sono gli esperimenti di Elementor e le impostazioni delle prestazioni di Divi, che includono diverse opzioni per ridurre la dimensione CSS (ad esempio, il caricamento di risorse e CSS migliorate in Elementor e CSS dinamico in Divi). In generale, otterrai risultati migliori se abiliti più prestazioni.
Disabilita icone se non le usi
Se se non si utilizzano icone elementari, disattivarle. Per Google Fonts + Font Awesome, puoi farlo in perfmatters o documentazione di Elementor.
Rimuovere CSS nei plugin di scarico delle risorse
Usando i perfmatters , è possibile disabilitare CSS/JS (o interi plugin) in cui non sono necessari, rimuovere CSS inutilizzati e sostituire YouTube iFrames con le immagini di anteprima. I restanti CS non utilizzati possono essere resi più accessibili con tutti questi metodi. I file CSS/JS possono anche essere disabilitati con il plugin di pulizia delle risorse.
Immagini di sfondo di carico pigro trovate in CSS
La maggior parte dei plug -in cache non si caricano di sfondo se sono confezionati in un file CSS separato.
Pertanto, se desideri caricare le immagini di sfondo pigro, fare riferimento alla documentazione del plug -in Cache. FlyingPress viene fornito con una classe di helper Lazy-BG che puoi aggiungere alla classe CSS aggiuntiva, a differenza del razzo WP che richiede HTML in linea. Una classe di helper Lazy-BG può essere aggiunta manualmente o Optimole ha una soluzione utilizzando i selettori CSS.
Rimuovere Gutenberg CSS
Supponiamo di poter dequelare la libreria di blocchi Gutenberg se non si utilizzano blocchi Gutenberg. Usa frammenti di codice o funzioni.php per aggiungere questo.
Combina CSS (o no)
La dimensione CSS/JS non deve superare 10kb se le si combinano. 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 sul tuo sito Web. Se usi questi stili solo sulle pagine di e -commerce, puoi disabilitarli ovunque. WooCommerce ha una documentazione, ma si consiglia di disabilitare WooCommerce Bloat, che ha molte più impostazioni per la rimozione di Bloat.
Trova altri simili articoli su Seahawk Media .
