Andiamo ad analizzare una pratica poco conosciuta per ottimizzare e rendere il tuo sito WordPress molto più veloce cercando di snellire le pagine da script e codice che non servono.
Ogni volta che installi un plugin sul tuo WordPress non fai altro che aggiungere nuovo codice, nuove chiamate al database. Inoltre i plugin che installi alle volte possono anche effettuare richiami ai propri CSS, ai fogli di stile e/o javascript richiamati automaticamente nell’ header del template che stai utilizzando.
Infatti, più installi nuovi plugin su WordPress e più potrebbero aumentare:
- le chiamate al database;
- il peso delle singole pagine, articoli;
- l’ instabilità di WordPress stesso;
- la lentezza di apertura dei singoli post che hai pubblicato;
- la sofferenza di navigazione del tuo sito da parte dei tuoi lettori;
- il tempo di lavoro di aggiornamento dei plugin;
- l’ insicurezza del tuo blog (più funzioni e variabili ci sono in gioco e più è facile che ci sia una falla di sicurezza che qualcuno)
Puoi intuire che tutti questi fattori possono far scappare verso altri lidi i potenziali nuovi utenti dal tuo sito e magari ritrovarti con un WP non funzionante o instabile.
Di seguito ti suggerirò come poter caricare gli script solo sulle pagine che vuoi, utilizzando i Tag Condizionali di WordPress e quindi potendo diversificare ed alleggerire da codice inutile pagina per pagina. Tutto questo si traduce in un enorme velocizzazione del tuo sito!
Disabilitiamo gli script javascript superflui
Facciamo un esempio:
Installi un plugin per avere un sistema di schede in homepage ed appena attivato ti accorgi che nell’ html tra i tag head sia della homepage che di tutte le pagine pubbliche del tuo blog si è aggiunta una riga in cui viene richiamato lo script .js di tal plugin (esempio: schede.js).
Inutile dire che quello script sarebbe più opportuno averlo richiamato solo nell’ header della homepage e non anche nelle altre pagine.
Come dobbiamo procedere?
Puoi incollare le seguenti righe di codice all’ interno del file functions.php del template WordPress che stai utilizzando.
add_action( 'wp_print_scripts', 'mia_disabilitazione_javascript', 100 );
function mia_disabilitazione_javascript() {
wp_deregister_script( 'schede' ); // basta inserire il nome del file js senza estensione
}
In pratica verrà agganciata all’ azione wp_print_scripts nativa di WordPress la nostra funzione personalizzata mia_disabilitazione_javascript che non fa altro che disabilitare il javascript del plugin (esempio: schede.js) in TUTTE le pagine del blog utilizzando l’ altra funzione nativa di WordPress, ovvero wp_deregister_script.
Per poter diversificare la disabilitazione dello javascript tra le pagine del sito ci vengono in aiuto i tag condizionali di WordPress ed ecco quindi come potremmo caricare quel determinato js SOLO in homepage:
add_action( 'wp_print_scripts', 'mia_disabilitazione_javascript', 100 );
function mia_disabilitazione_javascript() {
if ( !is_home('') ) {
wp_deregister_script( 'schede' );
}
}
L’ aggiunta della condizione !is_home dice di attuare la disabilitazione dello script schede.js in tutte le pagine che non siano l’ homepage.
Al posto del tag condizionale is_home è possibile inserire ad esempio una pagina specifica, un articolo, una categoria e molto altro. Per vedere l’elenco completo dei tag condizionali consulta la documentazione.
Disabilitare gli script javascript richiamati all’ interno del singolo plugin
Il plugin dell’ esempio di questo articolo, all’ interno del suo codice può richiamare altri script annidati tramite la funzione nativa di WordPress wp_enqueue_script quindi, se oltre a disabilitare lo script schede.js volessi disabilitare anche gli altri script richiamati dal plugin dovrai sporcarti le mani aprendo con un editor di testo il file php del plugin in uso cercando tutte le stringhe di codice in cui è presente la funzione wp_enqueue_script così da scoprire quali altri script vengono richiamati.
Stringa di esempio:
wp_enqueue_script('schede', get_bloginfo('wpurl') . '/wp-content/plugins/schede/js/altro-script.js');
Dove troviamo che:
slide-gallery-plugin è il nome della cartella del plugin;
/wp-content/plugins/schede/js/altro-script.js è il percorso in cui si trova lo script annidato altro-script.js e che vogliamo disabilitare per tutte le pagine al di fuori dell’ homepage;
Quindi possiamo procedere ad modificare il codice che era stato inserito nel functions.php del tuo template come segue:
add_action( 'wp_print_scripts', 'mia_disabilitazione_javascript', 100 );
function mia_disabilitazione_javascript() {
if ( !is_home('') ) {
wp_deregister_script( 'schede' );
wp_deregister_script( 'altro-script' );
}
}
Disabilitare i CSS
La funzione utilizzata per non caricare i CSS del plugin è wp_dequeue_style(); .
Vediamo un esempio basato sul plugin contact form 7 che andrà inserito nel file function.php:
function rimuovi_stile() {
wp_dequeue_style('contact-form-7');
}
add_action('wp_enqueue_scripts','rimuovi_stile');
L’ handle contact-form-7 lo si può trovare all’interno dei file del plugin dove viene registrato il suo css. Ogni plugin utilizzerà un handle personalizzato posizionato all’interno delle sue cartelle.
