Per esigenze personali e di lavoro mi sono imbattuto nella performance del sito internet: ricordo che le prime volte che vidi l’HTML di un sito costruito attraverso Wordpress furono: “che schifo!” pensai, “un codice così sporco, senza alcuna best practice… addirittura senza alcun senso logico!”.
Gli errori più comuni che sono presenti in un sito wordpress è vedere javascript che vengono caricati nell’head, decine di file CSS e Javascript senza che non fossero nella pagina (e dunque assolutamente inutili).
Un classico esempio da portare alla tua attenzione è il noto plugin CF7: viene usato solo per creare la form dei contatti e invece? Che cosa succede? Succede che la chiamata ai suoi file è presente ovunque e questo è assolutamente senza senso!
Carichi l’ennesimo file Javascript su tutte le pagine del sito per usarlo effettivamente solo in una.
No, non si poteva andare avanti così, quindi con l’aiuto di amici ho stipulato una sorta di decalogo della best practice di WordPress:
Il decalogo della best practice
1. I file CSS devono essere caricati tutti nell’header;
2. fra tutti i file CSS, il file style.css deve essere sempre caricato come ultimo;
3. tutti i file Javascript devono essere caricati appena prima del tag </body>;
4. poiché vi sono molti plugin di WordPress che sporcano il codice, inserendo script vari all’interno del body, e quest’ultimi necessitano di jQuery, jQuery è l’unico file che deve essere presente nell’header (prima della sua chiamata, appunto);
5. le immagini devono avere tutte l’attributo width e height scritto nell’HTML;
6. async/defer ove è necessario aggiungere l’attributo ai vari javascript, tranne che a jQuery dell’attributo async o defer;
7. eliminare chiamate di file (CSS/JS) a pagine che non li usano;
8. caricare le immagini mediante il lazy load e più leggere possibili;
9. ridurre le chiamate al mio server, ove è ospitato il sito internet mediante l’utilizzo di CDN;
10. quando si usano i tool online, nelle preferenze, attivare il nodo più vicino (che senso ha usare pingdom con un server che sta a Dallas negli USA!?).
Ti starai chiedendo “tutto questo senza plugin?” No, alcuni plugin per la performance del sito li uso anch’io, funzionano talmente bene che penso siano un must.
Scripts To Footer
Uno di questi è sicuramente Scripts To Footer.
Questo plugin non fa altro, come dice il suo nome, d’inserire tutti i richiami ai file .js nel footer ed è molto semplice da usare. Nella pagina delle sue impostazioni noterai che c’è anche la possibilità, fleggando l’apposito check, di lasciare il file jQuery nell’header che è esattamente il nostro obbiettivo!
EWWW Image Optimizer
Questo eccellente plugin elimina le informazioni in eccesso delle immagini senza perderne la qualità. Supporta le estensioni jpg, jpeg, png, eccetera. Un bel passo avanti per la performance del tuo sito WordPress!
W3 Total Cache
Last but not least, il più usato plugin gestore di cache.
Praticamente fa tutto anche a livello CDN.
Primo passo: style.css come ultimo di tutti i file CSS
Sfruttando la peculiare caratteristica dei CSS di essere a cascata, come dice il nome, è bene che lo style.css sia caricato come ultimo di tutti gli altri file CSS. Questo ti permette una maggiore fruibilità del tuo CSS in quanto, essendo caricato come ultimo file CSS, esso non avrà il bisogno dell’inserimento del codice.
!important
Ed ecco la magica funzione:
function sp_enqueue_stylesheets() {
wp_register_style( 'style-sp', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );
wp_enqueue_style( 'style-sp' );
}
add_action('wp_enqueue_scripts', 'sp_enqueue_stylesheets', 9999 );
Secondo passo: jQuery con appendice ?no_defer_no_async
Si lo so c’è quello di default, ma a noi serve uno che sia CDN, per ridurre le chiamate allo stesso server (cioè il nostro), e che non abbia l’attributo async/defer, altrimenti si creano problemi di conflittualità. Per inciso, tale conflittualità avviene in quanto, caricati in maniera asyncrona, gli script di jQuery a volte funzioneranno e, facendo il reload della pagina, a volte no. Proprio perché c’è un problema di lettura del parsing: meglio che il file che richiama il jQuery “blocchi” il caricamento della pagina, che veder funzionare “alle volte si e alle volte no” il proprio sito internet.
Richiamalo così:
function pinna_jquery() {
// jquery
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js?no_defer_no_async', false, null, false );
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'pinna_jquery' );
Come vedi ho aggiunto la parte “s?no_defer_no_asyn”. Quest’ultima ci sarà d’aiuto per selezionare a quali file vogliamo che ci sia anche l’attributo async/defer e chi no.
Terzo passo: async/defer.
Aggiungi l’attributo defer/async solo ai file che noi vogliamo file javascript mediante questa funzione:
if( ! is_admin() ){
function defer_async_function($tag, $handle, $src) {
// se l'src NON è un .js (es.: .css) OPPURE è .js?no_defer, esci
if( (FALSE === strpos( $src, '.js' )) || ((FALSE !== strpos( $src, '.js?no_defer_async' ))) ) {
return $tag . "\n";
}
// se nell'src c'è il termine google aggiungi l'attributo async
if (strpos($src,'google') !== FALSE) {
return '<script type="text/javascript" src="' . $src . '" async></script>' . "\n";
}
// a tutti i file .js che non hanno .js?no_defer e che NON abbiano nell'src il termine google aggiungi l'attributo defer
return '<script type="text/javascript" src="' . $src . '" defer></script>' . "\n";
}
add_filter( 'script_loader_tag', 'defer_async_function', 10, 3 );
}
Quarto passo: conoscere l’identificativo di ogni file richiamato*
La strategia migliore per colpire l’avversario è conoscerlo, dunque con la funzione qui sotto potrai conoscere l’ID di ogni file che viene richiamato.
function vc_remove_wp_ver_css_js($src, $handle) {
if (strpos($src, 'ver=')) {
// Rimuovo la versione del file alla fine di ogni url
$src = remove_query_arg('ver', $src);
}
// stampo nel codice della pagina l'ID del file css e/o js
echo '<!-- ID del file css/js ' . $src . ' => ' . $handle . ' -->' . "\n";
return $src;
}
add_filter('style_loader_src', 'vc_remove_wp_ver_css_js', 900, 2);
add_filter('script_loader_src', 'vc_remove_wp_ver_css_js', 900, 2);
Adesso fai così: clicca col tasto destro del mouse e clicca su “Visualizza sorgente”, ti apparirà la schermata HMTL del tuo sito.
Quinto passo: eliminare tutti i file inutili
Te lo descrivo con l’esempio che ho già scritto precedentemente: CF7. Eccellente plugin per creare in libertà assoluta form. Il problema è che i suoi file vengono richiamati anche in pagine che non hanno il form: sarà una perdita di tempo, dunque di performance!?
Eliminalo mediante questa funzione:
function my_deregister_styles() {
if ( ! is_page('Contatti' ) {
wp_dequeue_style('contact-form-7');
wp_deregister_style('contact-form-7');
}
}
add_action('wp_print_styles', 'my_deregister_styles', 9999999);
function my_deregister_javascript() {
if ( ! is_page('Contatti' ) {
wp_dequeue_script('contact-form-7');
wp_deregister_script('contact-form-7');
}
}
add_action('wp_print_scripts', 'my_deregister_javascript', 9999999 );
Corollario.
Esiste un plugin, poco noto e di recente creazione, chiamato WP Optimize It. Questo plugin non fa altro che far decidere all’utente in quali pagine, post, eccetera non venga caricato il plguin CF7 (per esempio). Il problema è che è un plugin, recente e con poco più di 60 installazioni attivate, e ha un solo voto.
Sesto passo: attiva i plugin
Scripts To Footer, EWWW Image Optimizer, W3 Total Cache: attivali tutti e vedrai come volerà il tuo sito WordPress!
Postilla
Per dirla tutta non esiste effettivamente una best practice onnicomprensiva, nè plugin perfetti, però seguendo le regole e i plugin sopracitati vedrai migliorare, facendo una stima, anche del 60% la velocità di caricamento del tuo sito. Per testare la velocità ti consiglio GTmetrix e Pingdom.
L’unico vero consiglio che ho da darti è quelo di testare, testare e ancora testare!
P.S. Questa funzione l’ha scritta un mio amico, che per lealtà nei suoi confronti ringrazio caldamente: Lapo Guidi, grazie di cuore.
