La guida (quasi) completa per velocizzare WordPress

speed
Tempo stimato di lettura: 5 minuti, 1 secondo
Pubblicato il 7 luglio 2016

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

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

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

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.

Ed ecco la magica funzione:

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ì:

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:

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.

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:

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.

Save

  • HeavybeardIT

    Ciao Sergio, utile panoramica per chi è alla ricerca di informazioni sull’ottimizzazione WordPress. Bravo.

    Mi permetto però di aggiungere il link al plugin che hai citato, WP Optimize It -> https://it.wordpress.org/plugins/wp-optimize-it/

  • Ciao Sergio e complimenti per l’articolo.

    Aggiungo qualche altro consiglio:

    1) Ottimizzare le immagini con “Short Pixel”, è il miglior tool di compressione del momento; c’è anche il plugin per WordPress;
    2) Disattivare trackback, pingback e smilies (un javascript in meno);
    3) Utilizzare “Complete Analytics Optimization Suite” per ottimizzare il codice di Google Analytics e caricare il file .JS direttamente dal proprio server;
    4) Utilzzare “Disqus Conditional Load” al posto dei commenti nativi di WP; è più veloce;
    5) Utilizzare “Plugin Organizer” (free) o Gonzales (a pagamento) per evitare il problema come hai descritto nell’esempio di CF7; carichi JS e CSS sono nelle pagine in cui realmente servono;
    6) Occhio a configurare W3 Total Cache, spesso potreste avere dei problemi e cattive performance. Provate anche Cache Enabler o WP Fatest Cache; se avete qualcosa da spendere acquistate WP Rocket;
    7) Per gli smanettoni provate Cache Enabler + Optimus Pro HQ -> immagini in formato webP e riduzione di circa il 70% del peso delle immagini;

    Nice day..

    • Non capisco il punto 7 che fai notare, quello relativo a “Cache Enabler + Optimus Pro HQ”: non è sufficencte W3 Total Cache per la gestione della cache?

      • W3 Total Cache è un normale plugin di cache, ma ha tantissime altre alternative, come ad esempio Cache Enabler, che risulta essere molto più semplice da configurare. Questo plugin inoltre, è l’unico a supportare pienamente il nuovo formato di immagini “webP”, sviluppato da Google, in coppia con il plugin Optimus HQ (a pagamento), che le converte automaticamente. Ciò consente in media, la riduzione di circa il 60-70% del peso delle normali immagini in formato JPEG, PNG, etc.

        L’unico svantaggio di questo nuovo formato è che non è supportato al momento da tutti i browser (Chrome, Opera e e Safari si); se però la maggior parte dei vostri visitatori arriva da Google Chrome, sarebbe bene utilizzarlo. Comunque, per i browser non supportati le immagini vengono fornite nei formati originali.

  • I consigli 1 e 5 vanno applicati caso per caso: è da tener presente che molti temi utilizzano un responsive.css che viene caricato per ultimo. Applicare la funzione che tu hai descritto potrebbe portare dei problemi. Per il punto 5 è bene specificare che vale solo se CF7 è usato solo nella pagina contatti, altrimenti si disattiva qualunque form pubblicato altrove…

  • Ottimi consigli. Ho testato EWWW Image Optimizer recentemente: i plugin non si potevano più aggiornare e inserendo il percorso alle immagini ho ricevuto un errore (non ricordo più quale). Ho dovuto disinstallarlo.

    • Strano: a me funziona perfettamente, prova a sentire l’assistenza ufficiale del plugin.

Shares