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