Migliorare le performance di una pagina web con Google Minify

Pubblicato il 7 Settembre 2010

Articolo di Andrea Pernici

Come oramai noto da un bel po’ di tempo è un fattore del posizionamento anche la velocità di caricamento delle pagine web.

Si è discusso molto in merito e questo “Page Speed” è diventato un vero tormentone anche in virtù del fatto che all’interno del Webmaster Tools di google è comparsa una voce sperimentale dedicata proprio alla velocità di caricamento delle pagine del proprio sito con una modalità un po’ oscura e incerta.

Non c’è infatti un modo assoluto per calcolare la reale velocità di un sito e sulla base di quali parametri si possa ottenere il messaggio “il tuo sito è più veloce del 92% dei siti”, ma è sicuramente da tenere presente che la velocità è un fattore SEO a tutti gli effetti ed è anche un fattore determinante quando si parla di usabilità, esperienza utente e conversioni.

La percezione che si può ottenere dallo strumento sperimentale è che questa velocità venga stimata tramite google toolbar o forse Google Chrome o altri servizi google che il navigatore usa e di certo in questo caso il tempo di caricamento può essere influenzato dallo stato della connessione del navigatore e da altri mille fattori che non possono determinare in assoluto la velocità di un sito web.

A parte tutto questo quello che conta è che un sito va ottimizzato al massimo senza troppo pensare ai secondi di caricamento, ma semplicemente tenendo a mente che dobbiamo pensare a noi stessi ed evitare confronti perché confronti non se ne possono fare. Un sito web è un insieme di cose quindi bisogna unire uno ad uno i vari fattori e combinarli insieme per ottenere il massimo relativo al nostro sito e non il massimo assoluto (non possiamo competere con una pagina bianca con solo testo, ma non è detto che quella pagina sia più usabile, più gradevole e con più beneficio emotivo 😉 … spero sia chiaro il concetto.

Dopo queste premesse passiamo alla parte un po’ più tecnica del post…vi voglio parlare di uno strumento molto utile per migliorare le vostre pagine senza troppo sforzo e indipendentemente dal fatto che usiate un CMS oppure un sito realizzato da voi.

L’applicazione è “Minify” ( http://code.google.com/p/minify/ ). Minify è un applicazione sviluppata in PHP5 che aiuta nell’adempimento di molte delle regole che permettono di migliorare le performance di una pagina web.

Il suo utilizzo è molto semplice e una volta scaricata l’applicazione basta semplicemente settare secondo le proprie esigienze il file di configurazione e seguire le istruzioni molto dettagliate presenti all’interno del file e all’interno della pagina web dell’applicazione.

In questa immagine potete vedere il contenuto del file .zip che potete scaricare dal sito.

Quello che ci interessa è la cartella min che ha come contenuto i seguenti file e cartelle

Nella stragrande maggioranza dei casi per iniziare ad utilizzare il builder e l’applicazione non è neccessaria alcuna modifica al file config.php, ma se avete qualche problema allora potete mettervi mano e leggere i vari suggerimenti presenti all’interno del file.

Giunti a questo punto non vi resta che uppare la cartella min sul vostro spazio web e visitare la url miosito.ext/min/ e magicamente vi apparirà un semplice strumento con questo aspetto

Grazie a questa banale interfaccia potete combinare i vostri file CSS e JS distintamente specificando le rispettive locazioni e cliccando Update otterrete il codice da inserire nelle vostre pagine in sostituzione dei vostri CSS o JS combinati.

Lo strumento è davvero intuitivo e segnala in modo immediato anche eventuali errori, come ad esempio nell’immagine il percorso dei file che non esistono.

Dopo aver preso dimestichezza con lo strumento diventerà molto più semplice e veloce gestire i file JS e CSS del vostro sito in base alle varie pagine visto che il builder è solo un’applicazione, ma non è assolutamente necessario visto che potete anche utilizzare il file groupsConfig.php per gestire i gruppi di file di cui avete bisogno all’interno di ogni sezione del vostro sito (immgine 4), oppure specificare il codice per le vostre pagine a mano seguendo la seguente regola: /min/f=vostroprimofile.css, vostrosecondofile.css,vostroterzofile.css etc etc.

In concreto vi mostro un esempio pratico della situazione che dovrete fronteggiare.

Pagina originale

Pagina con css e js minificati e combinati al posto di quelli originali

Pagina con css e js minificati e combinati usando i gruppi

ipotizzando che nel file groupsConfig.php ci sia:

'nomeGruppoJs' => array('//js/file1.js', '//js/file2.js', '//js/file3.js'),
'nomeGruppoCss' => array('//css/stile1.css', '//css/stile2.css','//css/stile3.css', '//css/stile4.css'),

Quali sono i vantaggi ?

Ora che abbiamo perso questa oretta abbiamo ottenuto molteplici vantaggi:

1. Possiamo continuare a tenere distinti vari file CSS e JS senza combinarli a mano e dunque mantenendo l’organizzazione dei nostri file chiara.
2. I nostri file vengono minificati e dunque risparmiamo una notevole quantità di banda e riduciamo il peso della pagina.
3. I file vengono compressi dall’applicazione quindi salviamo ulteriore banda e secondi.
4. Sui file viene settata una scadenza e vengono “cachati” quindi riusciamo a velocizzare le visite successive ( di default nel file config.php abbiamo questo valore $min_serveOptions[‘maxAge’] = 1800; che ovviamente può essere modificato in base alle vostre preferenze).
5. Grazie a questa applicazione riusciamo a guadagnare in un colpo solo moltissimi punti dai tool Google Page Speed e YSlow andando ad adempiere ad un alto numero di regole.

Gli svantaggi o eventuali problemi

Più che svantaggi ci potrebbero essere problemi con alcune combinazioni di file sopratutto Javascript quindi se combinando molti file notate che qualcosa non va più nel vostro sito cercate di identificare il file che una volta combinato va in conflitto con gli altri o risulta corrotto e continuate ad utilizzarlo singolarmente.

Controllate i requisiti richiesti dall’applicazione per funzionare.

Autore dell’articolo: Andrea Pernici lavora come freelance ed è project manager di GT Idea. Laureato in informatica e giocatore di pallamano, puoi seguirlo sul suo blog www.andreapernici.com

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: