Minimizzare JavaScript Html e CSS in WordPress

In ottica SEO, e più genericamente in ottica di velocizzare il caricamento delle pagine del nostro sito web, risulta indispensabile controllare e ottimizzare le prestazioni all’interno del CMS WordPress. In particolare minimizzare JavaScript, CSS e Html. Quando il browser web invia richieste (Http) al nostro server, elabora i contenuti per la visualizzazione della pagina web cercata. Gli script (file JavaScript) inseriti nel codice Html, con cui interagisce, sono strutturati per una migliore leggibilità ma hanno contrariamente un peso (in termini di dimensione) consistente.

Tuttavia il rendering del nostro sito non è solo esclusivamente riconducibile alla minificazione degli script, ma ad una serie di criticità di cui tener conto. A tal proposito l’utilizzo di tools come PageSpeed Insights di google è opportuno per una analisi/valutazione delle prestazioni e sulla loro cause dei rallentamenti. Nelle indicazioni troveremo sicuramente il suggerimento di ottimizzare le immagini. Basta accedere e indicare l’URL del proprio sito. Strumenti di sviluppo ulteriori come DevTools di Chrome ispezionano il codice sorgente e individuano eventuali debug del CSS, JavaScript e analisi delle prestazioni nel caricamento della pagina web.

Minimizzare JavaScript

Minimizzare significa eliminare dal codice tutti gli spazi vuoti e la punteggiatura dal codice, in modo da ridurne la dimensione. Chiaramente il codice ridotto, elaborato dal browser web, non perderà alcuna caratteristica nel processo. Inoltre è necessario apportare alcune modifiche (o alcune scelte) in quanto l’elaborazione degli script, essendo più pesanti, ritardano il rendering lato client bloccando la resa e quindi la visualizzazione. Parliamo di alcune scelte in quanto possiamo anche ritardare il caricamento di questi script.

Plugin SEO – All in One Pro

Prima di entrare nell’ambito dell’ottimizzazione è necessario introdurre il concetto di SEO. In pratica è un plugin da installare, meglio se la versione pro quale “All in One Pro“. La SEO accomuna un insieme di strategie racchiuse nell’acronimo del termine al fine di valutare e migliorare il posizionamento nei motori di ricerca. Attraverso l’assegnazione di un punteggio la strategia mira all’analisi della struttura del sito, del codice HTML, dei contenuti testuali, la gestione dei link in entrata ed in uscita (Fig.1).

Attraverso la lista di controllo di SEO troveremo anche l’indicazione del file JavaScript da minimizzare. Come mostrato in Fig.2, nella lista di controllo completa dell’audit del sito, il messaggio che “alcuni file non sembrano minimizzati” è eloquente. L’analisi di SEO, dunque, risulta imprescindibile nell’ottica di migliorare le prestazioni del nostro sito web. Comunque per l’interpretazione dell’interfaccia, e i suoi molteplici aspetti, ne parleremo più dettagliatamente in un successivo articolo.

Plugin WP Optimize

L’utilizzo di un plugin dedicato (plugin di wordpress) alla minimizzazione rappresenta la soluzione ideale. A meno che non si voglia rintracciare la provenienza dei file JavaScript per ridurli con tools open source. Ho testato diversi plugin in merito, ma ritengo che WP-Optimize mi ha consentito di ottenere il punteggio SEO più elevato (Fig.3).

Fondamentalmente le impostazioni raffigurate, e abilitate, sono un ideale steep di partenza. Dalle ottimizzazioni del Database, selezionate di default, si passa alla sezione di compressione delle Immagini (importante in ottica SEO). Dalla sezione Cache possiamo provvedere all’intero svuotamento anche se tuttavia il processo mantiene abilitata la cache della pagina. Infine passiamo alla sezione Minify, sottosezione “JavaScript options”. In fig.4 la descrizione dettagliata.

Minify

Fig.4

Come vediamo in figura, lasciamo fleggate l’abilitazione di minificazione, di unione e di contenimento di ogni file nel proprio blocco. Possiamo eventualmente anche escludere o ritardare il file javascript. E’ necessario però andare a rintracciare il codice sorgente attinente e incollarlo come in es. in figura. Questa operazione potrebbe essere indispensabile per i javascript di terze parti, come ad esempio google adsense). Questi, processati per primi, tenderebbero a rallentare ulteriormente il caricamento della pagina. Salvare infine qualsiasi modifica effettuata.

Tommaso Caligiuri

Classe 1964. Laureato in Ingegneria Informatica e Biomedica