Rimuovere i CSS inutilizzati in WordPress

 
 

Rimuovere i CSS inutilizzati in WordPress
*Non più in Beta

Perfmatters ha aggiunto una nuova funzione, attualmente in versione Beta, nella sua release 1.8.5 del 19 gennaio, per rimuovere i CSS inutilizzati. Non mi stancherò mai di raccomandare questo plugin, che è diventato un must se vuole migliorare le prestazioni del suo blog.

Per il 25 dollari breve un anno, offre uno strumento potente al quale continuano ad aggiungere miglioramenti.

L’ho già testato su WordPress 5.8 e 5.9-RC e finora non si è rotto nulla. Anche se avevo già il CSS inutilizzato molto sotto controllo attraverso il programma Direttore di script di questo plugin, la sola attivazione di questa opzione consente di risparmiare almeno un paio di richieste e alcuni Kb.

perché rimuovere i CSS inutilizzati?

Rimuovere i CSS inutilizzati in WordPress


I soliti avvertimenti in PageSpeed di“Rimuovi i CSS inutilizzati” o“Riduci il contenuto CSS inutilizzato” di solito appaiono quando il CSS caricato da un plugin o da un modello non è necessario o non è utilizzato in una determinata pagina

Gli sviluppatori di solito mettono in coda un foglio di stile solo se viene utilizzato. Tuttavia, molte volte vengono aggiunti altri stili che potrebbero non essere necessari. Questo comporta un sacco di CSS inutilizzato, che rallenta il caricamento

Occasionalmente, può anche generare gli avvisi“Rimuovi le risorse che bloccano il rendering“.

Oltre al placebo di ottenere un punteggio PageSpeed migliore, la rimozione dei CSS inutilizzati ha un impatto importante sulla diminuzione del tempo che intercorre tra l’inizio del caricamento della pagina e il rendering di qualsiasi parte del contenuto della pagina sullo schermo(FCP), il tempo necessario affinché il contenuto principale di una pagina web venga scaricato e sia completamente pronto per l’utente(LCP) e il tempo che intercorre tra l’inizio del caricamento della pagina e la sua completa interattività(TTI). Ad ogni modo, sa, una parte importante della storia della Core Web Vitals.

come trovare il CSS inutilizzato?

Il modo più semplice per trovare il CSS inutilizzato è testare l’URL con PageSpeed. Se c’è del CSS inutilizzato, vedrà l’avviso, che si attiverà solo se supera la soglia di ciò che Google considera abbastanza importante da avvertire, quindi se la velocità di caricamento percepita (la velocità effettiva che sperimenta) è buona, non si preoccupi troppo.

L’altro modo per trovare i CSS inutilizzati è utilizzare Chrome DevTools. Apra l’ispettore in Chrome (Ctrl+Shift-I), prema Shitft+Control+P, digiti “Copertura” e troverà i byte inutilizzati per CSS e JS. In rosso l’inutilizzato e in blu/verde l’usato.

Rimuovere i CSS inutilizzati in WordPress

Da qui, e comprendendo che riconosce ogni CSS, cosa fa e se può rimuoverlo o disabilitarlo dalla pagina in cui sta misurando, ci sono diverse opzioni, come la sostituzione di alcuni plugin con altri più leggeri, la revisione o la considerazione di cambiare il modello, l’utilizzo dello Script Manager per disabilitare selettivamente JS e CSS, ecc.

Il modo più semplice per eliminare gli avvisi di PageSpeed è attivare la funzione“Rimuovi CSS inutilizzati” di Perfmatters, che fa tutto automaticamente. Affermano di averlo testato su centinaia di URL (con diversi modelli e configurazioni) e riportano questi risultati:

Diminuzione media della FCP del 15,20%.
Diminuzione media dell’ LCP del 19,66%.
Diminuzione media del TTI del 14,95%.

Si ricordi che per il momento è in fase Beta e i risultati potrebbero non essere quelli desiderati o addirittura rompere qualcosa, quindi è consigliabile testarlo in un ambiente di prova, anche quando esce dalla fase Beta. (Ha già lasciato la fase Beta ed è utilizzabile)

Prima di attivare

Perfmatters raccomanda, prima di attivare questa opzione, di rimuovere qualsiasi precaricamento CSS esistente che sia stato configurato in Perfmatters (esclusi i fogli di stile locali del file google Fonts) e NON unire i CSS.

Il CSS merge è una tecnica di ottimizzazione deprecata da HTTP/2. In alcuni casi, la fusione dei CSS può addirittura danneggiare le prestazioni. Ancora una volta, ricordi che ogni pagina si comporterà in modo diverso a seconda della sua configurazione e che è meglio testare e osservare fino a trovare il miglior risultato senza errori per il suo caso.

Dovrebbe anche essere consapevole delle possibili configurazioni di altri plugin di performance o di caching che sta utilizzando, che potrebbero entrare in conflitto o essere sovrascritti dall’attivazione delle stesse funzioni.

La imagen tiene un atributo ALT vacío; su nombre de archivo es remove-unused-css-perfmatters.jpg

Una volta attivato, troverà tre opzioni:

1- Ritardo (predefinito e consigliato).

Il CSS utilizzato diventa inline e tutti i fogli di stile CSS (CSS non utilizzati) vengono ritardati e caricati con l’interazione dell’utente.


2- Asincrono

Il CSS utilizzato diventa inline e tutti i fogli di stile CSS (CSS non utilizzati) vengono caricati in modo asincrono. Questo metodo può aiutare a evitare il pop-in, in quanto i fogli di stile vengono eseguiti in modo asincrono durante il caricamento della pagina. Questo metodo comporterà un LCP/FCP leggermente più alto rispetto al precedente comportamento di ritardo.


3- Cancellare

Il CSS utilizzato diventa inline e tutti i fogli di stile CSS originali (CSS non utilizzati) vengono eliminati. Questo è il metodo più aggressivo, ma è anche probabile che richieda l’aggiunta di eccezioni. Consigliato solo agli utenti avanzati

Una volta abilitati, le pagine e i post si comporteranno in modo diverso.

Le pagine tendono ad avere molti CSS unici, e quindi il CSS utilizzato sarà generato e inserito separatamente per ogni pagina alla prima visita.
Tuttavia, le voci, poiché tendono a condividere molto CSS, il CSS utilizzato sarà generato solo una volta, alla prima visita, e diventerà in linea. La differenza degli input rispetto alle pagine è che la generazione del CSS utilizzato avviene una sola volta.


Tutti i CSS generati da Perfmatters saranno memorizzati localmente in questo percorso:

/wp-content/cache/perfmatters/tudomain.com/css/

Rimuovere i CSS inutilizzati in WordPress

Ecco come appare il CSS generato da Perfmatters, per le pagine, i post, le categorie, i tag, le ricerche, la homepage o i 404.

Rimuovere i CSS inutilizzati in WordPress

Nel riquadro“Fogli di stile esclusi” può escludere fogli di stile specifici dalla funzione “Rimuovi CSS inutilizzati” aggiungendo l’URL sorgente completo(loquesea.css), oppure aggiungendo una singola parte dell’URL sorgente. Formato: uno per riga.

Rimuovere i CSS inutilizzati in WordPress

Nel successivo riquadro“Selettori esclusi” può escludere determinati CSS (selettori) dalla funzione “Rimuovi CSS inutilizzati” aggiungendo l’id dell’elemento, il nome della classe, eccetera (#id, .class). Formattazione: una per riga.

Rimuovere i CSS inutilizzati in WordPress

È probabile che a un certo punto debba eliminare i CSS usati. Ad esempio, dopo aver ridisegnato una pagina o dopo aver aggiunto un nuovo elemento. Per eliminare il CSS generato e farlo ricreare dopo le visite successive, è sufficiente cliccare sull’opzione in basso“Cancella CSS usato“.

Rimuovere i CSS inutilizzati in WordPress


Può escludere un singolo post, una pagina o un tipo di post personalizzato dall’utilizzo della funzione Cancella CSS inutilizzati. Nell’editor, sul lato destro, deselezioni“CSS non utilizzati

Questo escluderà l’intera pagina e può essere utile, ad esempio, per una pagina di carrello, di checkout o di contatto che potrebbe presentare più problemi rispetto al resto del sito.

add_filter(‘perfmatters_remove_unused_css’, function($boolean) {
if(is_page()) {
return false;
}
return $boolean;
});

Perfmatters


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad
Artículos relacionados