Temi e plugin, croce e delizia di chi sviluppa siti web. In questo post analizzo il motivo per cui il loro impatto sui tempi di caricamento può essere un fattore molto molto rilevante su cui è bene essere informati. Per quanto riguarda i temi le possibilità di intervento sono ridotte all’osso, per soddisfare un pubblico variegato vengono infatti realizzati includendo e “caricando” una mole impressionante di files di cui l’utente finale ne utilizzerà una percentuale minima.
Il problema cruciale è che questa mole viene comunque in parte caricata dal sito impattando pesantemente sui tempi di caricamento. Se a questo aggiungi che normalmente un sito di piccole dimensioni viene ospitato su server condivisi… Il danno è fatto. Quindi, che fare?
Io, da web designer, sconsiglio da sempre l’utilizzo di temi laddove si è in presenza di un investimento ragionevole in termini di soldi da spendere per la propria immagine online, nei casi in cui fosse una scelta obbligata, dettata da esigenze che esulano dal discorso più strettamente creativo (anche su questo nutro comunque sempre perplessità :D) sarebbe fondamentale investire nell’ottimizzazione del sito stesso (per quanto possibile) e nella scelta di un piano hosting che possa migliorare i tempi di caricamento.
Chiusa la parentesi che riguarda i temi, passiamo ad analizzare invece l’impatto che hanno i plugin, sui quali, come accennavo prima, possiamo intervenire, anche solo per il semplice fatto che spesso è possibile cercare alternative o valutare di implementare soluzioni customizzate che non richiedano l’uso di plugin.
Come funzionano i plugin per WordPress?
I plugin per WordPress sono delle estensioni che aumentano le funzionalità di base del tuo sito WordPress aggiungendo per esempio Form di contatto, gallerie, funzionalità di vendita ecc… Ogni volta che un utente visita il tuo sito web, WordPress carica in ordine prima tutte le funzionalità presenti nel “core” e poi carica tutti i plugin che hai attivato. Per fare ciò vengono fatte delle richieste al server che ospita il tuo sito web, richieste che devono essere elaborate e restituite al tuo browser. Tutto questo richiede tempo.
Come i plugin impattano sui tempi di caricamento?
Ogni plugin di WordPress offre funzionalità differenti che possono necessitare di chiamate al database MySQL a livello di back-end e/o di front-end, così come di fogli di stile CSS, JavaScript, immagini ecc… Tutto questo, come dicevo prima, necessita che vengano effettuate delle richieste HTTP (per la parte front-end) al server, e ogni richiesta corrisponde ad una porzione di tempo richiesta per il caricamento complessivo.
Quando tutto questo avviene in modo ottimale, l’impatto sulle performance è minimo, tuttavia l’utilizzo di troppe risorse impatterà sull’esperienza dell’utente (UX) che visiterà il tuo sito web.
Come controllare quali files vengono caricati dai plugin di WordPress?
Per scoprire quali files vengono caricati insieme al tuo sito ed ai tuoi plugin, puoi servirti degli strumenti di sviluppo presenti nel browser (Ispeziona elemento per Chrome e Firefox) o di software dedicati (scelta consigliata). Nel caso volessi utilizzare il browser, apri la tab “Network” del tool, visita la pagina che ti interessa e sarai in grado di vedere l’elenco a cascata dei files richiesti ed i relativi tempi di caricamento. Alternativamente, i tools più utili per fare questo test sono:
- Pingdom: https://tools.pingdom.com/ (imposta la località più vicina al tuo paese di residenza)
- GTmetrix: https://gtmetrix.com/
Schermata files caricati dal server – Pingdom Tools
Quando i plugin sono considerati troppi?
Diventa quindi spontaneo chiedersi quando i plugin sono troppi. In realtà non esiste una risposta, tutto dipende da quali plugin stai utilizzando e come sono fatti. Un pessimo plugin potrebbe caricare 12 files contemporaneamente, mentre diversi plugin scritti bene ne potrebbero caricare meno.
Un plugin ben fatto cerca di ridurre al minimo il numero di richieste da fare al server, tuttavia non sempre vengono prese le giuste accortezze e l’impatto sui tempi di caricamento può diventare importante. Sicuramente un numero molto alto di plugin può comunque comportare rallentamenti su macchine non performanti. Per questo, se non è possibile fare a meno di numeri elevati, è necessario, dopo aver preso tutti gli accorgimenti possibili sul sito, affidarsi a server VPS, Cloud o dedicati per migliorare le performance. La combinazione ottimale di cache e server performante infatti permette di gestire al meglio la maggior parte delle situazioni che rallentano il tuo sito in WordPress.
Per addetti ai lavori, come ottimizzare gli assets dei plugin manualmente
Se sei un professionista che si occupa di WordPress puoi cercare di controllare come vengono caricati i files dei plugin, per farlo occorrono competenze di codice e capacità di debug.
Il modo corretto di caricare script e css in WordPress è tramite le funzioni wp_enqueue_style e wp_enqueue_script . WordPress offre anche funzioni per deregistrare questi script e css. Farlo tuttavia significherebbe rompere i plugin o causarne malfunzionamenti. Per risolvere questo problema dovresti copiare e incollare questi stili e script dentro al tuo file css e js per caricarli tutti insieme una volta sola riducendo le richieste http.
Disabilitare fogli stile in WordPress
Innanzitutto occorre trovare il nome del css che ti interessa tramite l’ispeziona elemento o, meglio, visualizzando il sorgente della pagina di riferimento. Il nome utile è quello che si trova nell’ID della proprietà <link rel="stylesheet" . Una volta segnato il nome (per esempio “font-awesome-css”, puoi deregistrarlo dentro al file function in questo modo:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'font-awesome-css' );
}In questo modo ricordati che stai rimuovendo di fatto questo css da tutto il sito senza alcun criterio di esclusione. Lo stesso può essere fatto con i file .js dei plugin. Vediamo come.
Disabilitare il js dei plugin WordPress
Come per i CSS, puoi disabilitare il file js dei plugin deregistrandoli. A differenza di quanto visto prima, il nome del file che ti interessa non si vedrà utilizzando l’ispeziona elemento, sarà infatti necessario esplorando i files del plugin… Esiste però un modo più rapido per elencare tutte le chiamate fatte dai plugin. Occorre inserire questa funzione dentro il file functions.php in modo da creare uno shortcode che elencherà tutti gli script generati dai plugin.
function wpb_display_pluginhandles() {
$wp_scripts = wp_scripts();
$handlename .= "<ul>";
foreach( $wp_scripts->queue as $handle ) :
$handlename .= '<li>' . $handle .'</li>';
endforeach;
$handlename .= "</ul>";
return $handlename;
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles');Andando ad inserire quindi lo shortcode [pluginhandles] dentro ad una pagina qualsiasi otterrai il fatidico elenco puntato con i nomi che ti interessano.
È ora possibile deregistrarli come fatto in precedenza. Ipotizzando di aver trovato lo script denominato “contact-form-7”, potrai deregistrarlo così:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}Ricordati che così facendo impedirai ai plugin di funzionare correttamente… A cosa serve quindi tutto ciò? Il senso sta nell’utilizzare queste regole aggiungendo delle esclusioni in modo che siano limitate solo ad alcune pagine e non impattino sui tempi di caricamento dove non sono presenti.
Vediamo quindi come caricare gli script solo in pagine specifiche.
Caricare gli script in pagine specifiche
Ipotizziamo che tu abbia sul tuo sito la form di contatto, generata usando Contact Form 7, solo nella pagina contatti. Non sarà necessario caricare i files richiesti dal plugin in tutto il sito. Potrai quindi, sempre tramite il file functions.php decidere di deregistrare completamente il plugin ad eccezione della pagina contatti:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
if ( !is_page('Contatti') ) {
wp_deregister_script( 'contact-form-7' );
}
}Et voilà, il gioco è fatto.
Ispirato a How WordPress Plugins Affect Your Site’s Load Time
