Ottimizzazione professionale del sito web

Come fare un'ottimizzazione per sito Wordpress?

Tantissime aziende hanno il sito sviluppato in Wordpress (si parla di almeno il 75% del totale) per cui saper ottimizzare siti su questa piattaforma è un valore aggiunto che ogni web agency dovrebbe poter offrire. Personalmente come web developer professionista, mi sono specializzato nell'ottimizzazione di siti web Wordpress con tecniche mirate per migliorare le due caratteristiche secondo me più importanti: prestazioni e usabilità.

Infatti ho notato che i siti sviluppati con Wordpress tendono ad essere molto carenti su questi due aspetti, soprattutto sulle prestazioni. Ti presento adesso un riepilogo delle 7 operazioni più importanti di ottimizzazione per siti Wordpress che eseguo regolarmente. Per praticità le ho volute elencare in ordine di difficoltà crescente: le prime voci possono essere messe in pratica anche da chi non ha grande dimestichezza col web, mentre le altre (segnate con asterisco) sono quelle che richiederanno l’intervento di un web developer professionista.

1. Immagini più leggere: Fai attenzione alla dimensione delle immagini, soprattutto se il tuo sito ne utilizza molte. Siti internet per ristoranti, hotel e agenzie immobiliari, ad esempio, tendono ad avere molte immagini su ogni singola pagina. Per questo motivo, se al momento non prestavi attenzione alla dimensione delle tue immagini, potresti ottenere ottime prestazioni ridimensionando le immagini del tuo sito internet. Prova a mantenere tutte le tue immagini entro i 250kB (meglio 150kB) di dimensione ciascuna e prediligi formati più recenti come il WebP anziché usare i vecchi formati Jpeg o png.
2. Codice JS e CSS minimizzato: Il codice JavaScript e CSS utilizzato dal tuo sito, può essere incorporato sia in versione ‘standard’ sia ‘minimizzato’. Minimizzare il codice vuole dire ridurre al minimo il numero dei caratteri utilizzati mantenendo la funzionalità inalterata. Durante la minimizzazione si vanno ad eliminare gli spazi, i commenti gli ‘a capo’ e altri caratteri non essenziali. Non c’è bisogno di fare questa operazione a mano, esistono tantissimi strumenti online in grado di eseguire la minimizzazione al posto tuo. Per i siti Wordpress ti puoi ad esempio avvantaggiare di un plugin, ne esistono molti. Attenzione pero! minimizzare il codice lo rende più leggero ma di contro, molto meno leggibile, per cui evita di minimizzare del codice su cui qualcuno in futuro potrebbe dover intervenire!
3. Compressione del testo: La compressione del testo e’ l’abilità del web server di comprimere le risorse di testo attraverso l’uso di programmi specifici, uno dei più utilizzati e’ sicuramente gzip. Per attivare la compressione devi poter gestire il server. Se hai un hosting su server di terzi (Aruba, Netsons, ecc) dovrai necessariamente rivolgerti al tuo provider per chiedere se e’ possibile attivare la compressione. Molto spesso comunque, essa e’ già attiva sulla maggior parte dei server in circolazione. Per controllare se il tuo sito viene già servito con compressione del testo, segui questi passaggi:
   1. premi F12 mentre visiti il tuo sito;
   2. nella console, appena aperta, cerca la scheda rete;
   3. seleziona una risorsa dell’elenco sottostante e controlla la sezione degli header di risposta;
   4. controlla la voce content-encoding.
4. Caricamento “lazy” delle immagini fuori schermo *: Il caricamento “lazy” (pigro) delle immagini consiste nel caricare subito solo le immagini visibili sullo schermo e rimandare le altre (quelle più in basso, ad esempio), solo quando entreranno nello spazio visibile. Questo permette di ridurre i tempi di caricamento delle pagine del tuo sito in modo direttamente proporzionale alle immagini che sono presenti. Sulle pagine con molte immagini noterai un miglioramento delle prestazioni notevole!
5. Codice pulito e leggero *: Un codice scritto bene e leggero, permetterà al tuo sito di funzionare meglio eliminando i tempi superflui (millisecondi) di esecuzione delle funzioni. Un millisecondo dopo l’altro, un codice scritto male può far accumulare secondi di ritardo al tuo sito internet! Per i siti Wordpress purtroppo rivedere il codice non è sempre possibile. Diamo per scontato che il codice sorgente del CMS sia scritto bene, quello che resta da rivedere è il codice del template (o tema) applicato. Se è un tema acquistato da terzi purtroppo non potrai fare molto, se invece ti è stato creato ad hoc allora ci sono sicuramente più margini di ottimizzazione.
6. Ottimizzare la cache *: La cache consiste nel salvare le risorse di un sito internet all’interno del dispositivo utente di modo da velocizzare le sue visite successive. Benché quindi la cache non aiuti molto durante la prima visita al tuo sito, essa permetterà di ridurre notevolmente il caricamento del sito internet alle visite successive per uno stesso utente. Se il tuo sito Wordpress ha alti tassi di ritorno dei visitatori (ad esempio lettori assidui del tuo blog), una politica di cache efficace potrebbe fare la differenza.
7. Eliminare le risorse bloccanti *: Un sito internet viene caricato “un pezzo alla volta”, dove questi “pezzi” sono le risorse necessarie (codice HTML, JavaScript, CSS, immagini, ecc). Durante la lettura del codice del sito, il browser può incontrare molteplici risorse: alcune sono piccole e facili da eseguire, altre sono ingombranti e richiedono più tempo. L’esecuzione del sito e’ quindi un po' come un incrocio molto trafficato: motorini, auto, mezzi pesanti, tutti di fretta e che cercano di passare. Puoi lasciare che il traffico si regoli da solo, con conseguenti ingorghi e ritardi, oppure decidere di far intervenire un vigile. Lo sviluppatore web è esattamente come il vigile: sta allo sviluppatore, infatti, individuare le risorse “bloccanti” (quelle che impiegano più tempo a “passare”) e decidere di farle fermare un attimo, per far avanzare prima i mezzi più agili e veloci e far scorrere tutto più in fretta.