Bloccare il caricamento inutile di file css e script

BLOCCARE IL CARICAMENTO INUTILE DI FILE CSS E SCRIPT



(Aggiornato il 10/08/2018)
Questo articolo spiega come evitare e bloccare il caricamento inutile di file css e script in zone specifiche del sito, in pagine specifiche, in categorie specifiche e in articoli specifici, cosi facendo si potrà ottimizzare il sito, scegliendo dove i file che ci interessano potranno essere eseguiti, di conseguenza si avrà un’ottimizzazione del sito e un’ottimizzazione sulla velocità di caricamento del sito stesso.

Con queste modifiche che andremo a vedere, non solo potremo scegliere se permettere l’esecuzione di determinati file css (fogli si stile) e script in homepage, nelle categorie, nelle pagine o negli articoli, ma potremo bloccare il caricamento inutile di file css e script sia di wordpress sia dei plugin in determinate sezioni singole del sito utilizzando i conditional tag e ID specifico per ogni categoria, pagina o articolo.


Se non riuscite a capire cosa viene eseguito in homepage del vostro sito o in zone specifiche, potete visualizzare il codice sorgente del sito stesso che vi darà le indicazioni necessarie, ma ancora più utile e preciso sarebbe utilizzare degli strumenti per analizzare e poter capire quali file css e script rallentano un sito e per questo vi rimando all’articolo dove troverete una lista di ottimi strumenti per analizzare un sito.

Funzioni di riferimento:

Il nome delle funzioni di riferimento di wordpress che ci aiuteranno sono:

wp_enqueue_script

wp_enqueue_style

Queste funzioni sopra riportate vengono utilizzate anche dagli sviluppatori di plugin che le inseriscono all’interno del codice di sviluppo appositamente per decidere le funzioni che ogni plugin dovrà svolgere.

Le funzioni riportate di seguito invece, serviranno per specificare a quali file css e script vogliamo bloccare il caricamento e andranno inserite all’interno del file function.php del tema:

wp_deregister_script(per bloccare il caricamento di script)

wp_deregister_style(per bloccare il caricamento di file css)

Qui di seguito invece potrete vedere alcuni dei “tags condizionali di wordpress” da includere nel codice che andremo ad inserire che serviranno allo scopo finale, cioè selezionare nello specifico se permettere il caricamento di specifici file in homepage, nelle categorie, nelle pagine o negli articoli.

  • is_home()
  • is_front_page()
  • is_page()
  • is_category()

Ci sono molti altri tags condizionali disponibili e per questo vi rimando direttamente alla pagina ufficiale dove poter trovare la lista completa dei conditional tags di wordpress.

Come e dove trovare il codice che ci serve:

Per impostare le funzioni wp_deregister_script e wp_deregister_style impedendo cosi il caricamento inutile del codice di file e plugin dovremo recuperare l’ID (handle) delle funzioni wp_enqueue_script e wp_enqueue_style all’interno del file interessato, questo che sia un file di wordpress o un file di un plugin.

Il file del plugin che contiene queste funzioni solitamente è il file con estensione .php che riporta anche il nome stesso del plugin.


La cartella che include tutti i plugin installati si trova nella sottodirectory /wp-content/plugins/.

Per bloccare il caricamento inutile di file css e script dovremo scegliere su quale plugin o file di wordpress agire e decidere in quale sezione del sito tali file sia inutile vengano caricati, scaricate il file nel vostro computer con un programma FTP, oppure se disponibile utilizzate il file manager del vostro hosting e apritelo con un file editor di testo, nel menu in alto sotto a modifica cliccate su “trova” e all’interno della casella inserite il nome della funzione wp_enqueue_script e cosi in seguito anche per la funzione wp_enqueue_style.

In questo modo ritroverete la funzione wp_enqueue_script con tutte le direttive, ad esempio il codice che segue è del plugin “redirection“:

wp_enqueue_script( 'redirection', plugin_dir_url( __FILE__ ).'js/redirection.js', array( 'jquery-form', 'jquery-ui-sortable' ), $this->version() );

L’istruzione che vi interessa avere viene subito dopo la prima parentesi racchiusa tra due apici, in questo caso per lo script da bloccare è: redirection.

Il codice riferito sempre al plugin “redirection” per la funzione wp_enqueue_style per bloccare il caricamento del file css in questo caso è sempre: redirection, come da codice di esempio che segue:

wp_enqueue_style( 'redirection', plugin_dir_url( __FILE__ ).'admin.css', $this->version() )

In questo caso e per questo specifico plugin il nome inserito per le due funzioni è sempre “redirection” ma per altri plugin le due funzioni potrebbe avere nomi diversi.

Un modo più sbrigativo per trovare il nome ID (handle) SOLO della funzione wp_enqueue_style è visionare direttamente il codice sorgente html del sito.

Un esempio per un file css (file di stile) che viene caricato in homepage di questo sito anche se non è necessario è il file css shortcodes.css, guardando il codice sorgente del sito il codice html sarà come il seguente:

<link rel='stylesheet' id='et-shortcodes-css-css'  href='http://www.nomesito.it/wp-content/themes/nome-tema/epanel/shortcodes/shortcodes.css?ver=2.0' type='text/css' media='all' />

Ecco che appare l’ID (handle) della funzione wp_enqueue_style (in questo caso per il file css) id= et-shortcodes-css. Dopo aver trovato tutti i riferimenti per bloccare il caricamento dei file css e script che desideriamo non ci resta che inserire le funzioni nel codice specifico.

Il codice da inserire nel file functions.php:

Il codice completo con le funzioni (l’add action) e gli ID (handle) dei file e plugin a cui vogliamo bloccare il caricamento va inserito all’interno (alla fine) del codice nel file functions.php del vostro TEMA. Quindi scaricate il file sul vostro computer per modificarlo, apritelo con il vostro editor di testo e inserite il seguente codice di esempio:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( is_home() || is_front_page() ) {
wp_deregister_script( 'et-shortcodes-js' ); wp_deregister_script( 'fancybox' ); wp_deregister_script( 'jquery-ui-sortable' ); 
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( is_home() || is_front_page() ) {
wp_deregister_style( 'et-shortcodes-css' ); wp_deregister_style( 'fancybox' ); wp_deregister_style( 'et_page_templates' ); 
}


Spiegazione delle funzioni:

Nel codice sopra riportato abbiamo inserito il tag condizionale is_home() || is_front_page() che verrà utilizzato per bloccare il caricamento di script SOLO in home page del sito e SOLO se si sta utilizzando una pagina statica come homepage.

Il tag condizionale come potete vedere è inserito nella funzione “add_action” “wp_deregister_script” quindi stiamo agendo solo per i file script.

In caso il tag condizionale fosse stato is_home() avrebbe indicato di bloccare il caricamento script delle funzioni ID inserite in homepage del sito SOLO in caso si utilizzasse come impostazione di lettura del sito in “gli ultimi articoli”.

L’ID (handle) et-shortcodes-css inserito nella funzione apposita per i fogli di stile wp_deregister_style blocca il caricamento in homepage del file css SOLO per il file css degli shortcodes.

L’ID (handle) fancybox inserito nella sezione apposita per gli script wp_deregister_script blocca il caricamento in homepage del sito dello script specifico per la fancybox.

L’ID (handle) jquery-ui-sortable nella sezione wp_deregister_script blocca il caricamento dello script per il plugin “add to any”.

E cosi via per tutti gli altri sotto ogni specifica funzione con il specifico ID (handle) funzione.

Bloccare file css e script per specifiche pagine:

Il codice esempio che segue oltre che ad ever inserito il tag condizionale per bloccare il caricamento di file css e script in homepage ha inserito un nuovo tag condizionale che impedisce il caricamento di file css di wordpress, degli script di wordpress e di eventuali plugin in pagine specificate per ID pagina:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( is_home() || is_front_page() || is_page( array( 42, 54, 6 ) ) ) {
wp_deregister_script( 'et-shortcodes-js' ); wp_deregister_script( 'fancybox' ); wp_deregister_script( 'jquery-ui-sortable' ); 
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( is_home() || is_front_page() || is_page( array( 42, 54, 6 ) ) ) {
wp_deregister_style( 'et-shortcodes-css' ); wp_deregister_style( 'fancybox' ); wp_deregister_style( 'et_page_templates' ); 
  }
}

I numeri che vedete all’interno del tag condizionale is_page( array( 42, 54, 6 ) ) sono i numeri ID per pagine specifiche al quale verrà bloccato il caricamento dei file css e degli script che abbiamo inserito.

Bloccare file css e script per specifiche categorie:

Il codice esempio che segue ha inserito il tag condizionale per bloccare il caricamento di file css di wordpress, di script di wordpress e di eventuali plugin in categorie specificate per ID categoria:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( is_home() || is_front_page() || in_category( array( 1,2,3 ) ) ) {
wp_deregister_script( 'et-shortcodes-js' ); wp_deregister_script( 'fancybox' ); wp_deregister_script( 'jquery-ui-sortable' ); 
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( is_home() || is_front_page() || in_category( array( 1,2,3 ) ) ) {
wp_deregister_style( 'et-shortcodes-css' ); wp_deregister_style( 'fancybox' ); wp_deregister_style( 'et_page_templates' ); 
  }
}

I numeri che vedete all’interno del tag condizionale in_category( array( 1,2,3 ) )sono i numeri ID per categorie specifiche dove non verranno eseguite tutte le funzioni per i file css e script che avete inserito.

Bloccare file css e script in homepage, pagine, categorie e articoli:

Il codice esempio che segue ha inserito i tag condizionali per bloccare il caricamento di file css, di file script e di plugin in homepage, in categorie, in pagine e articoli specificati tramite ID:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( is_home() || is_front_page() || in_category( array( 1,2,3 ) ) || is_page( array( 42, 54, 6 ) ) || is_single( array( 17, 19, 1 ) ) ) {
wp_deregister_script( 'et-shortcodes-js' ); wp_deregister_script( 'fancybox' ); wp_deregister_script( 'jquery-ui-sortable' ); 
  }
}
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
if ( is_home() || is_front_page() || in_category( array( 1,2,3 ) ) || is_page( array( 42, 54, 6 ) ) || is_single( array( 17, 19, 1 ) ) ) {
wp_deregister_style( 'et-shortcodes-css' ); wp_deregister_style( 'fancybox' ); wp_deregister_style( 'et_page_templates' ); 
  }
}

I numeri che vedete all’interno del tag condizionale is_single( array( 17, 19, 1 ) ) sono i numeri ID per articoli specifici dove non verranno eseguite tutte le funzioni per i file css e script che avete inserito.

Come sempre vi ricordo di fare molta attenzione nell’apportare le modifiche e di eseguire SEMPRE una copia di backup del file originale che andrete a modificare, ancora meglio se disponibile, eseguite preventivamente le modifiche in una versione demo del sito o in locale.

Articoli interessanti:

Creare un sito wordpress multilingua
Realizzazione sito wordpress ecommerce
Hosting per wordpress: quale scegliere
Come eseguire il backup per un sito WordPress
Trasferire o Spostare WordPress


Vietata la Riproduzione.
Protezione Copyright

/9 Commenti
Potrebbero interessarti
eliminare rendering wordpressCome eliminare le risorse di blocco rendering su WordPress
9 commenti
  1. alberto dice:

    ohhhhhh un articolo fantasticamente utilissimo al mio problema era una vita che cercavo di impedire a un sacco di plug-in di caricarsi anche nella home page del mio sito. GRAZIE E COMPLIMENTI.

    Rispondi
  2. Roberto dice:

    Buon giorno! Innanzitutto mi complimento per la chiarezza con cui vengono spiegate le procedure da attuare (e non è poco)!
    Ho provato la funzione per disattivare sulla pagina calcioitaliastory.it/servizi/downloads il plugin Autoptimize, dal momento che riscontro un conflitto con wordpress-download-manager. Quando attivato, infatti, autoptimizer impedisce la visualizzazione del tree dei download.

    Purtroppo lo script non mi funziona. Va detto che il plugin da bloccare non fornisce gli handle degli script e dei css nella classica autoptimize.php, bensì ho trovato qualcosa in un file interno, ma non sembra sufficiente. Se possibile vorrei un paio di consigli su come risolvere la cosa: rinunciare a questo plugin rallenta notevolmente il sito, ma d’altra parte mi dispiacerebbe non riuscire a creare questa sezione nel mio sito! Ringrazio anticipatamente!

    Rispondi
    • Admin-Fausto dice:

      Salve Roberto grazie dei complimenti, puoi utilizzare un plugin che si chiama “plugin organizer” che è lo stesso che utilizzo anche io in questo sito.

      Esistono anche soluzioni migliori di autoptimize, prova a valutare plugin come wp rocket e speedy gonzales. Ciao.

      Rispondi
  4. Roberto dice:

    Ciao,
    ho provato ad applicare le funzioni per eliminare il caricamento di un plugin che viene utilizzato solamente in una specifica pagina.
    Il codice utilizzando all’interndo del file functions.php del tema è il seguente:

    add_action( ‘wp_print_styles’, ‘my_deregister_styles’, 100 );
    function my_deregister_styles() {
    if ( is_home() || is_front_page() ) {
    wp_deregister_style(‘wppa-dynamic-css’);
    }
    }

    Se analizzo il codice sorgente dopo l’applicazione del codice, nell’head lo style ‘wppa-dynamic-css’ risulta sempre presente in home.
    Son sicuro che la funzione viene eseguita in quando se aggiungo una stampa al suo interno, me la ritrovo nella mia home.

    Rispondi
    • Admin-Fausto dice:

      Salve Roberto, se quel foglio di stile è dotato di un ID (handle) quel codice deve funzionare per forza, ovviamente con quel codice stiamo parlando di una pagina statica utilizzata per la home del sito, prova ad utilizzare il seguente codice:

      add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
    if ( !is_front_page() || !is_home()) { 
	wp_deregister_style( 'wppa-dynamic-css' );
    }
}

      Se non dovesse funzionare prova ad inserire questo ID: ( ‘wppa-dynamic’ ). Ciao.

      Rispondi
  5. Roberto dice:

    Grazie mille per la risposta, il problema è che includevo -css alla fine nel nome dell’handle.
    Come faccio invece a ricavare l’handle per gli script o file .js?

    Rispondi
    • Admin-Fausto dice:

      Salve Roberto, per quanto riguarda trovare ID handle per gli script l’ho già spiegato bene in questo articolo che ti invito a rileggere, se un plugin o qualsiasi altra funzione che integra uno script è programmato bene l’ID handle si trova sempre a volte si può trovare anche nel codice sorgente della pagina.

      Se ti trovi in difficoltà e non hai molta esperienza e magari vuoi eseguire queste modifiche anche in altre pagine/articoli del sito per migliorarlo ancora di più io ti consiglio vivamente di provare il plugin che si chiama Gonzales, praticamente è un plugin che ti permette di fare le stesse cose che stai cercando di fare ma semplicemente cliccando su alcuni tasti che permettono di bloccare il caricamento di quello a cui sei interessato che non venga caricato. Ciao.

      Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *