SlideShare a Scribd company logo
1 of 23
Potenziare le prestazioni
di Apache con

Mod PageSpeed
Andrea Mauro
21.11.2013, EDUCAFE, METID – Politecnico di Milano
Effetti della lentezza di caricamento
- Insoddisfazione dell’utente
- Aumento del bounce rate

- Abbandono del sito
“75% of people would not return to websites that took longer than 4
seconds to load” (2006)
http://news.bbc.co.uk/2/hi/technology/6131668.stm
“40% of shoppers will wait no more than three seconds before
abandoning a retail or travel site” (2009)
http://www.akamai.com/html/about/press/releases/2009/press_091409.html
Esperimento di google
Nel 2006 google fa un esperimento.
Viene fatto un sondaggio su alcuni utenti google per richiedere un
parere sul numero ottimale di risultati da visualizzare per pagina.
Per un periodo di test google ha alzato il numero di risultati per
pagina a 30 (come richiesto dagli utenti)
Il traffico e gli incassi pubblicitari in quel periodo sono scesi del
20%
Il tempo di caricamento era variati da 0,4 secondi (10 risultati) a 0,9
secondi (30 risultati)

http://glinden.blogspot.it/2006/11/marissa-mayer-at-web-20.html
La nascita di mod_pagespeed
Nel 2010 google ribadisce di voler rendere internet più
veloce
Annuncia che da quel momento l’algoritmo di ranking
del suo motore di ricerca terrà conto della velocità di
caricamento dei siti
http://googlewebmastercentral.blogspot.nl/2010/04/usin
g-site-speed-in-web-search-ranking.html
Qualche mese dopo rilascia la prima versione di
mod_pagespeed
Cos’è mod_pagespeed?

Progetto open source realizzato da google
Modulo da installare su un webserver apache
Una volta configurato, permette di offrire pagine
ottimizzate ai visitatori di un sito migliorandone la
velocità di navigazione e riducendo il traffico generato
Esempio 1 – Google AdSense
Esempio 2 - androidacademy.com
Esempio 3 - Joomla
Esempio 4 – Sito mobile di test
Su quali principi si basa?
Riduzione dei byte
scaricati (HTML, CSS,
Javascript, immagini)

Riduzione del numero di
connessioni al server per
ogni pagina visitata

Ogni regola di ottimizzazione è configurabile
Pulizia del codice

- Pulizia codice HTML (rimozione spazi inutili,
ripetizioni, etc.)
- Compressione Javascript (minify)
- Compressione CSS
Ottimizzazione delle immagini

- Ricompressione delle immagini dove possibile
- Resize delle immagini più grandi del necessario
- Ulteriore resize su schermi a bassa risoluzione
(mobile)
- Conversione al formato webp su browser compatibili
(chrome, opera)
Riduzione delle connessioni
- Merge dei file CSS
- Merge dei file Javascript

- Inclusione di piccole immagini direttamente nel
codice HTML
- Miglioramento della gestione cache
- Modulo spdy opzionale per convogliare più
connessioni in una
Mod_spdy
- Protocollo di comunicazione sperimentale alternativo
ad https
- Stand-alone o integrabile con mod_pagespeed
- Al momento compatibile solo con chrome
- Convoglia più richieste al server in una sola,
eliminando il tempo richiesto per aprire e chiudere
più connessioni
- Compressione dell’header http
Mod_spdy - Esempio
Distribuzione dei contenuti – Liferay 6.1

https://test.beep.polimi.it/

4,5 secondi – 2,6 secondi
Distribuzione dei contenuti – Joomla 2.5

http://pso.istruzione.it

7,8 secondi - 2,9 secondi
Distribuzione dei contenuti – Moodle 2.5

http://dev.lfi.rwth-aachen.de:8080/moodle_site/moodle/

2,9 secondi - 1 secondo
Distribuzione dei contenuti – Liferay 6.0

http://www.triwu.it/

15,3 secondi – 5,4 secondi
Requisiti

- Apache 2.4

- Server linux (CentOS, Fedora, Debian o Ubuntu)
Proposte di testing

Beep Mobile (Liferay)

Sito Metid (Joomla)

Sicurezza (Moodle)
Grazie per l’attenzione

Andrea Mauro
21.11.2013, EDUCAFE, METID – Politecnico di Milano

More Related Content

Similar to Expertise 2013 - Potenziare le prestazioni di apache con mod page speed

WPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerceWPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerceFrancesco Terenzani
 
Search Engine Optimization (Parte 1)
Search Engine Optimization (Parte 1)Search Engine Optimization (Parte 1)
Search Engine Optimization (Parte 1)brossi676
 
Applicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore RomeoApplicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore Romeomarcocasario
 
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Stefano Marchisio
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine webGiacomo Zecchini
 
SMAU Milano 2015
SMAU Milano 2015SMAU Milano 2015
SMAU Milano 2015Paolo Dadda
 
Smau milano 2010 stefano butti
Smau milano 2010 stefano buttiSmau milano 2010 stefano butti
Smau milano 2010 stefano buttiSMAU
 
7. Applicazioni Web e CMS
7. Applicazioni Web e CMS7. Applicazioni Web e CMS
7. Applicazioni Web e CMSRoberto Polillo
 
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Matteo Stefan
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)armandocarcaterra
 
Smau Milano 2010 Stefano Butti
Smau Milano 2010 Stefano ButtiSmau Milano 2010 Stefano Butti
Smau Milano 2010 Stefano ButtiSMAU
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
 
Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Giorgio Carpoca
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOGiovanni Sacheli
 

Similar to Expertise 2013 - Potenziare le prestazioni di apache con mod page speed (20)

Velocità sito web
Velocità sito webVelocità sito web
Velocità sito web
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
 
Wpo
WpoWpo
Wpo
 
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerceWPO: Ottimizzazione step-by-step del front-end di un e-commerce
WPO: Ottimizzazione step-by-step del front-end di un e-commerce
 
Search Engine Optimization (Parte 1)
Search Engine Optimization (Parte 1)Search Engine Optimization (Parte 1)
Search Engine Optimization (Parte 1)
 
Applicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore RomeoApplicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore Romeo
 
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine web
 
SMAU Milano 2015
SMAU Milano 2015SMAU Milano 2015
SMAU Milano 2015
 
Performance e Drupal
Performance e DrupalPerformance e Drupal
Performance e Drupal
 
8 - Web app e CMS - 17/18
8 - Web app e CMS - 17/188 - Web app e CMS - 17/18
8 - Web app e CMS - 17/18
 
Smau milano 2010 stefano butti
Smau milano 2010 stefano buttiSmau milano 2010 stefano butti
Smau milano 2010 stefano butti
 
7. Applicazioni Web e CMS
7. Applicazioni Web e CMS7. Applicazioni Web e CMS
7. Applicazioni Web e CMS
 
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
Tre modi per aumentare la velocità del tuo Business Website e guadagnare on...
 
Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)Corso Base Wordpress 22-40 | installazione (2 di 4)
Corso Base Wordpress 22-40 | installazione (2 di 4)
 
Smau Milano 2010 Stefano Butti
Smau Milano 2010 Stefano ButtiSmau Milano 2010 Stefano Butti
Smau Milano 2010 Stefano Butti
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
 
7 - Web application e CMS
7 - Web application e CMS7 - Web application e CMS
7 - Web application e CMS
 
Presentazione Corso - Parte 3
Presentazione Corso - Parte 3Presentazione Corso - Parte 3
Presentazione Corso - Parte 3
 
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEOChrome DevTools: le basi tecniche per comprendere meglio la SEO
Chrome DevTools: le basi tecniche per comprendere meglio la SEO
 

Expertise 2013 - Potenziare le prestazioni di apache con mod page speed

  • 1. Potenziare le prestazioni di Apache con Mod PageSpeed Andrea Mauro 21.11.2013, EDUCAFE, METID – Politecnico di Milano
  • 2. Effetti della lentezza di caricamento - Insoddisfazione dell’utente - Aumento del bounce rate - Abbandono del sito “75% of people would not return to websites that took longer than 4 seconds to load” (2006) http://news.bbc.co.uk/2/hi/technology/6131668.stm “40% of shoppers will wait no more than three seconds before abandoning a retail or travel site” (2009) http://www.akamai.com/html/about/press/releases/2009/press_091409.html
  • 3.
  • 4. Esperimento di google Nel 2006 google fa un esperimento. Viene fatto un sondaggio su alcuni utenti google per richiedere un parere sul numero ottimale di risultati da visualizzare per pagina. Per un periodo di test google ha alzato il numero di risultati per pagina a 30 (come richiesto dagli utenti) Il traffico e gli incassi pubblicitari in quel periodo sono scesi del 20% Il tempo di caricamento era variati da 0,4 secondi (10 risultati) a 0,9 secondi (30 risultati) http://glinden.blogspot.it/2006/11/marissa-mayer-at-web-20.html
  • 5. La nascita di mod_pagespeed Nel 2010 google ribadisce di voler rendere internet più veloce Annuncia che da quel momento l’algoritmo di ranking del suo motore di ricerca terrà conto della velocità di caricamento dei siti http://googlewebmastercentral.blogspot.nl/2010/04/usin g-site-speed-in-web-search-ranking.html Qualche mese dopo rilascia la prima versione di mod_pagespeed
  • 6. Cos’è mod_pagespeed? Progetto open source realizzato da google Modulo da installare su un webserver apache Una volta configurato, permette di offrire pagine ottimizzate ai visitatori di un sito migliorandone la velocità di navigazione e riducendo il traffico generato
  • 7. Esempio 1 – Google AdSense
  • 8. Esempio 2 - androidacademy.com
  • 9. Esempio 3 - Joomla
  • 10. Esempio 4 – Sito mobile di test
  • 11. Su quali principi si basa? Riduzione dei byte scaricati (HTML, CSS, Javascript, immagini) Riduzione del numero di connessioni al server per ogni pagina visitata Ogni regola di ottimizzazione è configurabile
  • 12. Pulizia del codice - Pulizia codice HTML (rimozione spazi inutili, ripetizioni, etc.) - Compressione Javascript (minify) - Compressione CSS
  • 13. Ottimizzazione delle immagini - Ricompressione delle immagini dove possibile - Resize delle immagini più grandi del necessario - Ulteriore resize su schermi a bassa risoluzione (mobile) - Conversione al formato webp su browser compatibili (chrome, opera)
  • 14. Riduzione delle connessioni - Merge dei file CSS - Merge dei file Javascript - Inclusione di piccole immagini direttamente nel codice HTML - Miglioramento della gestione cache - Modulo spdy opzionale per convogliare più connessioni in una
  • 15. Mod_spdy - Protocollo di comunicazione sperimentale alternativo ad https - Stand-alone o integrabile con mod_pagespeed - Al momento compatibile solo con chrome - Convoglia più richieste al server in una sola, eliminando il tempo richiesto per aprire e chiudere più connessioni - Compressione dell’header http
  • 17. Distribuzione dei contenuti – Liferay 6.1 https://test.beep.polimi.it/ 4,5 secondi – 2,6 secondi
  • 18. Distribuzione dei contenuti – Joomla 2.5 http://pso.istruzione.it 7,8 secondi - 2,9 secondi
  • 19. Distribuzione dei contenuti – Moodle 2.5 http://dev.lfi.rwth-aachen.de:8080/moodle_site/moodle/ 2,9 secondi - 1 secondo
  • 20. Distribuzione dei contenuti – Liferay 6.0 http://www.triwu.it/ 15,3 secondi – 5,4 secondi
  • 21. Requisiti - Apache 2.4 - Server linux (CentOS, Fedora, Debian o Ubuntu)
  • 22. Proposte di testing Beep Mobile (Liferay) Sito Metid (Joomla) Sicurezza (Moodle)
  • 23. Grazie per l’attenzione Andrea Mauro 21.11.2013, EDUCAFE, METID – Politecnico di Milano