Web Performance Optimization

Migliorare la velocità di un sito
passo dopo passo
@CardinaleAndrea
Convegno GT - Riccione – 15/16 Dicembre 2012
passo dopo passo
di Andrea Cardinale
Blog: http://www.andrea-cardinale.it
Twitter: @CardinaleAndrea
E-mail: a.cardinale80@gmail.com

Velocità → Fattore di ranking
Using site speed in web search ranking
http://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.html
Webmaster Level: All
Friday, April 09, 2010 at 11:00 AM
“You may have heard that here at Google we're obsessed
with speed, in our products and on the web. As part of that
effort, today we're including a new signal in our search
ranking algorithms: site speed.”
Posted by Amit Singhal, Google Fellow and Matt Cutts, Principal Engineer, Google
Search Quality Team
passo dopo passo
di Andrea Cardinale

Velocità → Fattore economico
- minore bounce rate
+ Tempo medio di navigazione
+ Pagine viste x visitatore
Migliorare le performance fa ”guadagnare”
+ conversioni
Approfondimenti:
WPO – Web Performance Optimization
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
Web Performance Optimization (WPO) – As Business Critical as SEO
http://apmblog.compuware.com/2010/05/19/web-performance-optimization-wpo-as-business-critical-as-seo/#.UMyQmKQhq
Proof that speeding up websites improves online business
http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business/
Velocity and the Bottom Line
http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
Bing and Google Agree: Slow Pages Lose Users
http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html
passo dopo passo
di Andrea Cardinale

Tools utilizzati
Which loads faster?
http://whichloadsfaster.com/
Load Impact
http://loadimpact.com/
Inoltre:
HAR Viewer
http://code.google.com/p/harviewer/
HAR Storage
http://code.google.com/p/harstorage/
PageSpeed
https://developers.google.com/speed/pagespeed/
Yahoo! YSlow
http://developer.yahoo.com/yslow/
WebPagetest
http://www.webpagetest.org/
GTmetrix
http://gtmetrix.com/
Pingdom
https://www.pingdom.com/
Akamai's Mobitest
http://mobitest.akamai.com/m/index.cgi
passo dopo passo
di Andrea Cardinale

Start
passo dopo passo
di Andrea Cardinale

Step 1
passo dopo passo
di Andrea Cardinale

Step 1
Minify/Combine CSS e JS
Minify → Diminuire il codice → Minore download dati
jQuery 1.8.3 = 247KB → jQuery 1.8.3 Minified = 93,6KB
Combine → Unire più files → Minore richieste al server
primo.css + secondo.css + terzo.css → unico.css
passo dopo passo
di Andrea Cardinale

Step 1
Strumenti:
minify - Combines, minifies, and caches JavaScript and CSS files on demand to speed up
page loads. - Google Project Hosting
http://code.google.com/p/minify/
passo dopo passo
di Andrea Cardinale

Step 1
Esempio pratico con gruppi dinamici:
.htaccess
RewriteRule ^min/(.*).css$ /min/g=$1.css [L,NC]
PHP
Controller crea un file (es.: asdfghj) in $_SERVER['DOCUMENT_ROOT'].'/pathfile/
contenente i nomi dei files del gruppo (uno per riga) e aggiunge alla pagina il css asdfghj.css
groupsConfig.php
return array(
$_GET['g'] => file($_SERVER['DOCUMENT_ROOT'].'/pathfile/'.$_GET['g'],
FILE_IGNORE_NEW_LINES)
);
passo dopo passo
di Andrea Cardinale

Step 1
passo dopo passo
di Andrea Cardinale

Step 1
Ma...
Per gestire lo stile relativo alla stampa
non utilizzare un css a parte ma utilizzare:
@media print {
#menu {
display: none;
}
img {
vertical-align: middle;
margin: 5pt;
}
}
passo dopo passo
di Andrea Cardinale

Step 2
Defer parsing of javascript
passo dopo passo
di Andrea Cardinale

Step 2
Defer parsing of javascript
Ritardare il caricamento del javascript
Aumento della velocità percepita
Strumenti:
Nessuno. E' necessario solamente spostare i JS alla fine
prima del tag </body>
Attenzione se utilizzate javascript all'interno dell'HTML
passo dopo passo
di Andrea Cardinale

Step 3
Enable gzip compression
passo dopo passo
di Andrea Cardinale

Step 3
generalmente riduce la dimensione del 70%
Minore download dati
jQuery 1.8.3 = 247KB → Minified = 93,6KB → Gzipped = 32KB
passo dopo passo
di Andrea Cardinale

Step 3
Strumenti:
mod_gzip → Apache 1.3
mod_deflate → Apache 2.x
Esempi:
PHP (script): ob_start("ob_gzhandler");
PHP (php.ini): zlib.output_compression = On
PHP (.htaccess): php_flag zlib.output_compression on
Apache (.htaccess):
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
application/javascript
</IfModule>
passo dopo passo
di Andrea Cardinale

Step 3
507005 + 126654 + 109303 = 742962
290801 + 86764 + 19836 = 397401 - 47%
passo dopo passo
di Andrea Cardinale

Step 4
Leverage browser caching
passo dopo passo
di Andrea Cardinale

Step 4
Possiamo “comandare” la cache del browser
Minore download dati
passo dopo passo
di Andrea Cardinale

Step 4
Strumenti:
Headers: Expires | Cache-Control | Last-Modified
Risorse statiche:
Implementare una policy "Never expire" impostando una data molto lontana
Risorse dinamiche:
Utilizzare una data appropriata per il Cache-Control header e utilizzare il
Last-Modified header per segnalare un'eventuale update
passo dopo passo
di Andrea Cardinale

Step 4
Esempi:
.htaccess
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A3600
</IfModule>
<FilesMatch ".(css|js|CSS|JS)$">
<IfModule mod_headers.c>
Header set Pragma "public"
Header set Cache-Control "public, must-revalidate, proxy-revalidate"
</IfModule>
</FilesMatch>
passo dopo passo
di Andrea Cardinale

Step 4
Esempi:
PHP (immagini)
// Test image.
$fn = '/test/foo.png';
// Getting headers sent by the client.
$headers = apache_request_headers();
// Checking if the client is validating his cache and if it is current.
if (isset($headers['If-Modified-Since']) && (strtotime($headers['If-Modified-Since']) == filemtime($fn))) {
// Client's cache IS current, so we just respond '304 Not Modified'.
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fn)).' GMT', true, 304);
} else {
// Image not cached or cache outdated, we respond '200 OK' and output the image.
header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($fn)).' GMT', true, 200);
header('Content-Length: '.filesize($fn));
header('Content-Type: image/png');
print file_get_contents($fn);
}
Fonte: http://us.php.net/manual/en/function.header.php#61903
passo dopo passo
di Andrea Cardinale

Step 4
-96%
passo dopo passo
di Andrea Cardinale

Step 4
passo dopo passo
di Andrea Cardinale

Step 4
passo dopo passo
di Andrea Cardinale
Steve Souders
Head Performance Engineer at Google
Cache is King
http://www.stevesouders.com/blog/2012/10/11/cache-is-king/
http://www.slideshare.net/souders/cache-is-king

Step 5
Enable Keep-alive
passo dopo passo
di Andrea Cardinale

Step 5
Enable Keep-alive
Il browser e il server web riutilizzano
la stessa connessione per trasferire i file multipli.
Strumenti / Indicazioni:
Modificare configurazione di Apache
vim etc/httpd/conf/httpd.conf
KeepAlive Off → KeepAlive On
service httpd reload
- Riduce la latenza dei trasferimenti HTTP e fornisce una migliore esperienza utente.
- Riduce l'utilizzo della CPU
passo dopo passo
di Andrea Cardinale

Step 6
Cookie-less domain for static resources
passo dopo passo
di Andrea Cardinale

Step 6
No cookies per contenuti statici
Consente di parallelizzare i downloads
Al massimo 2/4 domini
altrimenti si ha una penalizzazione DNS lookup
(Es.: Yahoo! → yimg.com, YouTube → ytimg.com, Amazon → images-amazon.com)
www.miosito.it
HTML + componenti dinamici
static1.miosito.it
componenti statici (img, css, js)
static2.miosito.it
passo dopo passo
di Andrea Cardinale

Step 6
Approfondimenti:
Serve static content from a cookieless domain
www.kensfi.com/serve-static-content-from-a-cookieless-domain/
Serving Static Content from a Cookieless Domain
http://www.ravelrumba.com/blog/static-cookieless-domain/
Using cookieless domains to improve a website performance
http://www.fullondesign.co.uk/coding/1668-using-cookieless-domains-to-improve-a-website-performance.htm
passo dopo passo
di Andrea Cardinale

Step 7
Lazy Load for social media buttons (JS/CSS in genere)
Velocità caricamento iniziale pagina più veloce
Evita eventuali blocchi dei JS
Approfondimenti:
How To Lazy Load Social Share Buttons Like TechCrunch Does
http://www.bloggermint.com/2012/05/how-to-lazy-load-social-share-buttons-like-techcrunch-does/
Add Lazy Loading Social Sharing Buttons to your WordPress Blog
http://wp.tutsplus.com/tutorials/add-lazy-loading-social-sharing-buttons-to-your-wordpress-blog/
Lazy Loading Social Buttons v2
http://www.stylifyyourblog.com/2012/07/lazy-loading-social-buttons-v2.html
Lazy Loading Social Widgets
http://taylor.fausak.me/2012/04/29/lazy-loading-social-widgets/
passo dopo passo
di Andrea Cardinale

Step 7
Esempi:
Caricamento javascript asincrono
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "/js/mio.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
funzioneDaEseguire();
}
};
} else {
script_tag.onload = funzioneDaEseguire;
}
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
passo dopo passo
di Andrea Cardinale

Step 7
Esempi:
Caricamento javascript asincrono con jQuery
$.getScript('/js/mio.js',function()
{
//eventuale codice da eseguire dopo il caricamento
});
passo dopo passo
di Andrea Cardinale

Step 7
Esempi:
Caricamento CSS asincrono
var css_tag=document.createElement("link");
css_tag.setAttribute("rel", "stylesheet");
css_tag.setAttribute("type", "text/css");
css_tag.setAttribute("href", filename);
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(css_tag);
Caricamento CSS asincrono con jQuery
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "/css/mio.css"
});
css_link.appendTo('head');
passo dopo passo
di Andrea Cardinale

Step 7
passo dopo passo
di Andrea Cardinale

Step 8
Caching server side
APC
- cache del bytecode compilato degli script PHP
in RAM
- evita il sovraccarico di analisi degli scripts
- evita la compilazione del codice sorgente ad
ogni richiesta
- riduce il carico del server
- aumenta la velocità di codice PHP da 2 a 10
volte
senza APC
con APC
VANTAGGI
passo dopo passo
di Andrea Cardinale

Step 8
Caching server side
Approfondimenti:
PHP Caching to Speed up Dynamically Generated Sites
http://www.theukwebdesigncompany.com/articles/php-caching.php
Using APC with PHP
http://devzone.zend.com/1812/using-apc-with-php/
How to Use APC Caching with PHP
http://www.script-tutorials.com/how-to-use-apc-caching-with-php/
passo dopo passo
di Andrea Cardinale

Work in progress
...
passo dopo passo
di Andrea Cardinale

Risultati ottenuti
passo dopo passo
di Andrea Cardinale

Prossimo Step?
???
passo dopo passo
di Andrea Cardinale

Prossimo Step?
passo dopo passo
di Andrea Cardinale

Prossimo Step?
Immagini
Strumenti:
Sumsh.it
http://www.smushit.com/ysmush.it/
Optipng
http://optipng.sourceforge.net/
PNG Tools Overview
http://css-ig.net/png-tools-overview.html
Comprimere le immagini
immagini non scalate
attributi width e height del tag img corrispondenti alle dimensioni dell'immagine (o viceversa)
passo dopo passo
di Andrea Cardinale

Prossimo Step?
Immagini
Sprite CSS
Un'unica immagine per n immagini
Minori richieste al web server
passo dopo passo
di Andrea Cardinale

Prossimo Step?
Immagini
Strumenti:
Lazy Load Plugin for jQuery
http://www.appelsiini.net/projects/lazyload
Lazy Load
Ritardare il caricamento delle immagini visualizzandole solo quando necessario
passo dopo passo
di Andrea Cardinale

Prossimo Step?
Immagini
Strumenti / Approfondimenti:
Adaptive Images
http://adaptive-images.com/
Adaptive Images for Responsive Designs
http://24ways.org/2011/adaptive-images-for-responsive-designs/
Adaptive images: solving the responsive image problem
http://www.webdesignerdepot.com/2012/07/adaptive-images-solving-the-responsive-image-problem/
Which responsive images solution should you use?
http://css-tricks.com/which-responsive-images-solution-should-you-use/
HTML5 adaptive images: end of round one
http://html5doctor.com/html5-adaptive-images-end-of-round-one/
Adaptive Images
Visualizzare la dimensione adatta al device utilizzato dall'utente
Fondamentale per siti responsive
passo dopo passo
di Andrea Cardinale

Soluzioni x CMS
Wordpress
W3 Total Cache
http://wordpress.org/extend/plugins/w3-total-cache/
Joomla!
jbetolo
/http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/11545
passo dopo passo
di Andrea Cardinale

Soluzione All-in-one
mod_pagespeed
https://developers.google.com/speed/pagespeed/mod
- modulo per Apache
- permette l’ottimizzazione automatica di pagine web
- Comprende le ultime tecniche di ottimizzazione web
- 40 filtri di ottimizzazione configurabili
- Possibilità di convertire le immagini in webP
Approfondimenti:
Make the web faster with mod_pagespeed, now out of Beta
http://googlewebmastercentral.blogspot.it/2012/10/make-web-faster-with-modpagespeed-now.html
Automating Web Performance: Mod_pagespeed Case Study
http://giorgiotave.net/automating-web-performance/
Automating Web Performance with mod_pagespeed
http://www.igvita.com/2012/10/10/automating-web-performance-with-mod_pagespeed/
Mod_Pagespeed Performance Review
http://calendar.perfplanet.com/2010/mod_pagespeed-performance-review/
Incrementare le prestazioni di Apache con mod pagespeed
http://guide.debianizzati.org/index.php/Incrementare_le_prestazioni_di_Apache_con_mod_pagespeed
passo dopo passo
di Andrea Cardinale

e ancora ...
passo dopo passo
di Andrea Cardinale

MySQL
Database Optimization
- Tools
MySQLTuner
http://mysqltuner.com
- Benchmarking
The Slow Query Log
http://dev.mysql.com/doc/refman/5.1/en/slow-query-log.html
MySQL Benchmark Tool
http://dev.mysql.com/downloads/benchmarks.html
- Approfondimenti
Tuning MySQL Performance with MySQLTuner
http://www.howtoforge.com/tuning-mysql-performance-with-mysqltuner
Identifying MySQL slow queries
http://www.ducea.com/2006/11/06/identifying-mysql-slow-queries/
Measuring Performance (Benchmarking)
http://dev.mysql.com/doc/refman/5.5/en/optimize-benchmarking.html
passo dopo passo
di Andrea Cardinale

NoSQL
Se realmente necessario
- progettati per memorizzare enormi quantità di dati
si pensi a Google, Twitter e Facebook che memorizzano terabyte di dati ogni giorno
- Massive write performance
Ottimo per applicazioni come Web analytics, Real-time apps
- Fast key-value access
Altri vantaggi:
- schema-free
non prevedono uno schema fisso
- Scalabili orizzontalmente
ovvero la possibilità di aggiungere nodi al sistema per distribuirne il carico
passo dopo passo
di Andrea Cardinale

NoSQL
Redis
(key-value)
MongoDB
(Document oriented)
OrientDB
(Graph-Document)
BigTable, Cassandra, CouchDB, Apache Jackrabbit, Colayer, Lotus Notes,
Raven DB, XML databases, MarkLogic Server, eXist, BaseX, AllegroGraph,
Core Data, Neo4j, DEX, Tuple space, Memcachedb, SimpleDB,
Tokyo Cabinet, Pincaster, memcached, Velocity, Dynamo, …
Approfondimenti:
NoSQL Databases: Not Only SQL
http://www.andrea-cardinale.it/databases/nosql-databases-not-only-sql.html
What the heck are you actually using NoSQL for?
http://highscalability.com/blog/2010/12/6/what-the-heck-are-you-actually-using-nosql-for.html
passo dopo passo
di Andrea Cardinale

Oltre Apache
Limiti
Connessioni simultanee
massimo numero di richieste simultanee servite
Elevato consumo di risorse
elevato utilizzo di RAM e CPU anche per risorse statiche
passo dopo passo
di Andrea Cardinale

Oltre Apache
Mi stai dicendo di non
utilizzare più Apache ???
passo dopo passo
di Andrea Cardinale

Oltre Apache
Mi stai dicendo di non
utilizzare più Apache ???
NO!!!
Apache è sempre Apache
Ma possiamo trovargli un compagno
Apache ???
passo dopo passo
di Andrea Cardinale

Oltre Apache
Progettato per gestire migliaia di connessioni simultanee con
basso utilizzo di RAM e CPU
Apache è limitato dal numero di thread che la CPU può eseguire. Inoltre processi di Apache
sono “costosi” (50-300MB per processo).
Nginx, può gestire più di 10.000 connessioni simultanee utilizzando circa 2 MB di memoria.
non-blocking event-driven web server
Anziché utilizzare il sistema a threads, gestisce le connessioni con epoll
Utilizza un solo processo (o un piccolo numero di processi) per gestire le connessioni
Ideale per gestire le risorse statiche
Apache anche per servire la richiesta un'immagine carica tutti i moduli necessari per altri
componenti (mod_php, mod_rewrite, etc...)
passo dopo passo
di Andrea Cardinale

Oltre Apache
È arrivato Nginx su
Giorgiotave.it
passo dopo passo
di Andrea Cardinale

Attenti a
- Javascript diventa un linguaggio server side
- Implementato sul JavaScript Engine V8 (il motore di Google Chrome)
- Elevate performance
- Loop e non Thread
- Implementazione della libreria Socket.io che permette di utilizzare la
tecnologia Web Socket sul browser.
Ottimo per: real time apps, web games
passo dopo passo
di Andrea Cardinale

Grazie!
Andrea Cardinale
a.cardinale80@gmail.com
www.andrea-cardinale.it
https://plus.google.com/105123558530541749555
@CardinaleAndrea
andreacardinale
passo dopo passo
di Andrea Cardinale

Web Performance Optimization

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Web Performance Optimization

Similar to Web Performance Optimization (20)

Web Performance Optimization