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
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