Migliorare il page speed del proprio sito web, che sia esso un ecommerce o un semplice blog, è un’attività quasi fondamentale per gestire un bel traffico con ottime ripercussioni nel medio termine:
- Riduce il Bouce Rate (oltre -10%)
- Migliora il posizionamento SEO (ma in minima parte)
Risultati da me ottenuti con un sito molto pesante su un server lentissimo:
| Tempo Prima | Tempo Dopo | MByte Prima | MByte Dopo | |
| Page speed nuovo visitatore | 5s – 8s | 1,2s – 3s | 2,6 MB | 1,5 MB |
| Page speed visitatore di ritorno | 5s – 8s | 0,8s – 2,5s | 2,6 MB | 0,1 MB |
Ecco 10 step per ottimizzare al massimo il pagespeed (esempi in WordPress):
- Utilizzate un testing del pagespeed per comparare il prima ed il dopo
- Comprimere tutte le immagini
- Settare dei cache control nell’htaccess (o altri web server)
- Spostare tutti i javascript a fondo pagina
- Eliminate inutili js-css e comprimere quelli rimanenti con un tool minify
- Eliminate i parametri GET di versione dai css-js
- Comprimete l’html con il GZIP
- Installate un plugin per la cache delle pagine php
- Sincronizzare il proprio sito con una CDN
- Installare un plugin per togliere da alcune pagine i css – js inutili
- Togliere iFrame + Monitoraggio Analytics
0: Tool per il Page speed testing
Consiglio di monitorare da subito i vostri miglioramenti con: tools.pingdom.com
Potete inoltre avere una panoramica in tempi più rapidi con il vostro Browser, ci sono vari tools ma io consiglio di utilizzare “Strumenti per sviluppatori” di Chrome focalizzandosi sul tab network per monitorare i tempi di caricamento di ogni risorsa e per il monitoraggio globale controllate il tempo di caricamento dell’evento DOM
1: Comprimere le immagini
Circa il 60 – 80% del peso in MB di una pagina web dipende dalle dimensioni delle immagini, per questo motivo è fondamentale che tutte siano ottimizzate. Dovete dunque considerare che, in termini generali, per quanto riguarda le immagini web, il formato consigliato è:
- Jpeg
- Compressione: 60-75%
- DPI: 72
Nella maggior parte dei casi non è necessario avere grandi risoluzioni, dunque consiglio di stare sempre sotto i 900px in modo da ottenere immagini da 30-50kb. Di seguito un video esemplificativo per ottimizzare i .jpg con Photoshop:
Per quanto riguarda l’ottimizzazione dei PNG24 (per background trasparenti), si possono comprimere del 40% con questo web-tool: www.tinypng.com
Nel mio caso, comprimendo proprio tutte le immagini già parzialmente ottimizzate ho risparmiato quasi il 35% del peso della pagina web.
2: Settare i cache control
Il setting del cache control permette agli utenti che hanno già scaricato precedentemente un’immagine, un file javascript o un foglio di stile, di evitare di riscaricare lo stesso file. Per fare questo il browser inserisce questi file nella cache risparmiando davvero tantissimo in termini di tempi / prestazioni.
Per fare questo, se utilizzate Apache, dovete inserire nel file .htaccess, che si trova nella root del vostro sito, le seguenti righe di codice:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | # BEGIN Expire headers <ifModule mod_expires.c> # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 604800 seconds" # cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" ExpiresByType text/html "access plus 1800 seconds" ExpiresByType application/xhtml+xml "access plus 1800 seconds" # webfonts ExpiresByType font/truetype "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </ifModule> # END Expire headers # BEGIN Cache-Control Headers <ifModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf|cur|woff)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(css)$"> Header set Cache-Control "public" </filesMatch> <filesMatch "\.(js)$"> Header set Cache-Control "private" </filesMatch> <filesMatch "\.(x?html?|php)$"> Header set Cache-Control "private, must-revalidate" </filesMatch> </ifModule> # END Cache-Control Headers |
3: Spostare i javascript a fondo pagina
Spostando i javascript subito prima della chiusura del tag <body> l’utente client potrà caricare tutto l’html della pagina e scorrerla mentre le risorse javascript vengono scaricate; In molti siti wordpress come il mio le risorse javascript arrivano anche a 20-25 plugin che rallenterebbero significativamente il caricamento della pagina se inserite nell’head, dunque è davvero molto evidente il risparmio in termini di tempo (con cache svuotata) ed è sempre un’attività molto apprezzata ma in termini di load time globale non è misurabile dunque non cambierà niente per i software di analisi.
Nel caso di WordPress per spostare le risorse javascript verso il basso dovete cercare nel vostro template (probabilmente nel file functions.php) il richiamo di wp_register_script()
Dalle seguenti righe di codice noterete che l’ultimo parametro della funzione serve per mettere in coda il loading della libreria nel “footer”, ossia alla fine della funzione wp_footer().
1 2 | //wp_register_script( $handle, $src, $deps, $ver, $in_footer ); wp_register_script( $js_name, $js_src, $jquery_deps, $js_version, true ); |
4: Comprimere file css/js
La compressione di questi file è un’attività parzialmente utile, dunque consiglio di non spenderci troppo tempo, sicuramente il tool migliore che ho trovato è code.google.com/p/minify
E’ sufficiente scaricare il Tool e dezippare la sottocaretella “/min/” nella root del sito e aggiungere sul vostro file .htaccess il seguente redirect:
1 2 3 4 | # Minifier Library RewriteEngine On RewriteBase / RewriteRule ^(.*\.(css|js))$ min/index.php?f=$1&debug=0 [L,NC] |
Grazie a questo tool, solo da browser, il file risulterà minimizzato (senza spazi e capo riga), avendo già provato tools alternativi per me questo è la soluzione definitiva per il minify in ogni sito su server Unix! :)
5: Eliminate i parametri GET di versione dai css-js
In molti CMS come WordPress l’URL dei file .css e .js riportano in GET il parametro che indica la versione del file e/o della libreria jQuery ed è praticamente inutile; A causa di questo parametro molti browser non mettono in cache il file in quanto il contenuto dello stesso potrebbe variare in base al parametro GET (cosa che molto probabilmente non vi riguarda).
Dunque togliete questi parametri GET, in WordPress è sufficiente mettere nel functions.php del vostro template le seguenti righe:
1 2 3 4 5 6 7 8 | // remove wp version param from any enqueued scripts function vc_remove_wp_ver_css_js( $src ) { if ( strpos( $src, 'ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 ); add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 ); |
6: Comprimere l’html attivando il GZIP
Se usate un CMS ci sono molti plugin per fare questo dunque non vi consiglio di farlo a mano, in caso contrario le righe di codice php che vi servono sono:
1 2 3 4 5 6 | <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?> |
Nel caso utilizziate WordPress io vi consiglio di utilizzare WP Super Cache che riutilizzeremo anche negli esempi successivi.
Se utilizzate WP Super Cache recatevi sul tab “Avanzate” -> “Varie” -> Checkate: Compressione delle pagine in modo che siano servite più rapidamente.
7: Plugin per Cache php lato server
Grazie ad un plugin simile si salva circa mezzo secondo mettendo nella cache del vostro CMS il risultato html di ogni pagina elaborata in php in modo che questa venga calcolata solo ogni *tot minuti, dunque nell’intervallo di questo tempo i client riceveranno il risultato della pagina servita dalla cache del server.
In termini metaforici … se installate un plugin simile, il vostro server vi amerà :)
Nel tipico caso WordPress consiglio: WP Super Cache, seguite poi alcune documentazioni per il corretto settaggio, ricordatevi che quando fate modifiche al sito dovete disabilitare la cache :/
8: Sincronizzazione con una CDN
Le CDN sono letteralmente dei “Content Delivery Network” ossia dei server dislocati in più punti del globo che distribuisco risorse le del vostro sito come immagini e librerie varie al client (l’utente che naviga) il più rapidamente possibile grazie alla loro vicinanza fisica con l’utente, inoltre il client suddivide le richieste http tra il vostro server e la vostra CDN così da poterle scaricare teoricamente nella metà del tempo (però in realtà non si guadagna così tanto).
Considerando che i Web Services di Amazon stanno crescendo a dismisura, e che ne sono già felice cliente, consiglio di centralizzare il tutto nel loro servizio chiamato Cloud Front.
Dopo esservi registrati dovete creare una nuova “distribuzione” per poi reperirne l’Access key e la Secret key; Se desiderate un dominio personalizzato ad esempio cdn.dominio.it o aws.dominio.it dovete settare in tal modo il CNAMEs (vedi immagine).
ATTENZIONE: Ogni volta che salvate la distribuzione servono 10 minuti per il salvataggio e può volerci anche qualche ora per la propagazione dei DNS, utilizza il seguente tool per verificarne lo stato: whatsmydns.net
A questo punto potete finalmente collegare la CDN al vostro sito tramite un plugin; Per WordPress potete utilizzare CDN Sync Tool che va combinato con WP Super Cache o potete settare il tutto da altri plugin come W3 Total Cache.
Una volta inserite le chiavi di Cloud Front nel plugin basta premere il tasto per la sincronizzazione ed attendere.
9: Togliere css – js inutili da determinate pagine
Quando si installano molti plugin in un CMS le librerie del frontend vengono caricate in tutte le sue pagine (anche dove non serve), per evitare questo ho personalmente sviluppato e divulgato un plugin WordPress chiamato: WP Remove Css – Js
Grazie a questo tool potete semplicemente decheckare le librerie che non vi serve includere in una tal pagina (consiglio di utilizzarlo collegandolo ad un tool per la cache lato server).
10: Togliere iFrame + Monitoraggio Analytics
Consiglio di togliere gli iFrame che non vi stanno portando un ritorno concreto, ad esempio qualunque plugin Facebook, Spotify, Google Plus e Disqus perchè obbligano l’utente ad effettuare moltissime richieste http inutili, pure i pulsanti “mi piace” richiedono davvero molto in termini di risorse ma sono necessari.
Dunque, per concludere questa guida vi consiglio di mantenere la situazione monitorata tramite Analytics affinchè il caricamento medio rimanga sempre sotto i 10s. Per settare un invio automatico della reportistica andate su: Comportamento -> Velocità del sito -> Panoramica -> Email e selezionate un feedback giornaliero o settimanale.
Credo di aver detto tutto,
se avete suggerimenti o miglioramenti commentate!
Saluti,
Daniele GiuB Covallero
Ottima guida veramente, complimenti!
Se volessi ottimizzare le immagini già caricate sul blog con photoshop, hai qualche dritta? Le estensioni non mi stanno aiutando.
Beh nell altro video che trovi a questa pagina ti spiega come farlo in velocità, dunque se scarichi tutta la cartella con le immagini del tuo sito e lanci lo script in photoshop sei a posto :)
Perchè a Zaion non funziona il minify?
Denunciamo Google =)
Ciao, io sono riuscito dopo tanti tentativi, cambiando hosting, ottimizzando i contenuti, attivando il CDN e usando il minify a raggiungere un punteggio di 87/100. Direi un buon risultato, ma secondo voi raggiungere punteggi superiori a 90 è possibile senza sacrificare i contenuti?
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.giuseppefava.com&tab=desktop
Ciao, prima di tutto complimenti per l’articolo, veramente utile! vorrei sapere come collegare il plug in WP Remove Css – Js a WP super Cache?
Ciao, in realtà il mio plugin ha bisogno di qualche altro aggiornamento (lo dico per evenienza).
Dopo averlo installato ti basta checkare “Non attivo” su Wp-supercache, poi disabiliti le risorse css / js inutili sul mio plugin WP Remove Css-js e poi, dopo aver testato di aver tolto le risorse inutili, devi rimuovere la cache di Wp-supercache tramite il pulsante “Cancella la cache” e riattivarlo.
Spero di esserti stato utile ;)
Ottimo articolo, spiegato semplice e senza tanti fronzoli.
Chiedevo se qualcuno conosce degli script js e vb-asp lato server per comprimere le immagini run-time.
Cioè se un inserzionista mi carica una immagine di 100K glielo lascio fare ma quando la visualizzo la riduco in tempo reale.
Grazie
Questo è il mio primo commento in assoluto su un sito e sono felice di conferire questo primato a Daniele che purtroppo non conosco personalmente, ma che il mio sesto senso di talent-scout mi suggerisce essere un fuoriclasse.
COMPLIMENTI DAVVERO!!
#stima #stima #stima
Ottima guida, dettagliata e specifica, complimenti!
Per le immagini consiglio anche WpSmush, utile per automatizzare l’operazione.
Sì mi sono trovato ad usarlo una volta, è eccezionale, ottimo consiglio ;)
prima di tutto ti ringrazio perchè grazie ad alcuni di questi tuoi consigli ho già alzato di 10 punti il mio page speed :-) vorrei ora procedere a spostare i JS a fondo pagina..ho individuato in function il parametro wp_register_script() che però continua in modo diverso da quello che che tu hai indicato sotto …cosa DEvo fare? devo sostituirlo cone le due righe da te indicate?
grazie infinite
marni
Grazie per il feedback ;) in generale l’uso dello script nell’articolo essendo un hack te lo sconsiglierei, il sistema pulito (ma anche più lungo) sarebbe di impostare in ogni register script il parametro $in_footer a true (è l’ultimo parametro, vedi la doc qui: https://codex.wordpress.org/Function_Reference/wp_register_script)
È un’operazione un po delicata, lascia jQuery nell’head per sicurezza ;)
Grazie Giub, penso di non arrivare a tanto… non capisco bene e non voglio fare danni…il codice che ho io è questo :
e come vedi è piuttosto diverso …. e footer non vi è citato…. :-) potrei fare qualcosa ? altrimenti paziena ho già fatto con i tuoi suggerimenti :-)
wp_register_script( ‘colorbox’, get_template_directory_uri() . ‘/javascript/jquery.colorbox-min.js’, array( ‘jquery’ ) );
$enqu_list[] = ‘colorbox';
}
wp_register_script( ‘smooth-menu’, get_template_directory_uri() . ‘/javascript/smooth-menu.js’, array( ‘jquery’ ) );
$enqu_list[] = ‘smooth-men