Download - Web Performance Optimization

Transcript
Page 1: Web Performance Optimization

Migliorare la velocità di un sito passo dopo passo

@CardinaleAndrea

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 2: Web Performance Optimization
Page 3: Web Performance Optimization

Velocità → Fattore di ranking

Using site speed in web search rankinghttp://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.html

Webmaster Level: AllFriday, 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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 4: Web Performance Optimization

Velocità → Fattore economico - minore bounce rate+ Tempo medio di navigazione+ Pagine viste x visitatore

Migliorare le performance fa ”guadagnare”

+ conversioni

Approfondimenti:

WPO – Web Performance Optimizationhttp://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/

Web Performance Optimization (WPO) – As Business Critical as SEOhttp://apmblog.compuware.com/2010/05/19/web-performance-optimization-wpo-as-business-critical-as-seo/#.UMyQmKQhqoO

Proof that speeding up websites improves online businesshttp://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business/

Velocity and the Bottom Linehttp://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

Bing and Google Agree: Slow Pages Lose Usershttp://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 5: Web Performance Optimization

Tools utilizzati

Which loads faster?http://whichloadsfaster.com/

Load Impacthttp://loadimpact.com/

Inoltre:

HAR Viewerhttp://code.google.com/p/harviewer/

HAR Storagehttp://code.google.com/p/harstorage/

PageSpeedhttps://developers.google.com/speed/pagespeed/

Yahoo! YSlowhttp://developer.yahoo.com/yslow/

WebPagetesthttp://www.webpagetest.org/

GTmetrixhttp://gtmetrix.com/

Pingdomhttps://www.pingdom.com/

Akamai's Mobitesthttp://mobitest.akamai.com/m/index.cgi

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 8: Web Performance Optimization

Step 1Minify/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 serverprimo.css + secondo.css + terzo.css → unico.css

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 9: Web Performance Optimization

Step 1Minify/Combine CSS e JS

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/

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 10: Web Performance Optimization

Step 1Minify/Combine CSS e JS

Esempio pratico con gruppi dinamici:.htaccessRewriteRule ^min/(.*).css$ /min/g=$1.css [L,NC]

PHPController 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.phpreturn array(

$_GET['g'] => file($_SERVER['DOCUMENT_ROOT'].'/pathfile/'.$_GET['g'], FILE_IGNORE_NEW_LINES));

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 11: Web Performance Optimization

Step 1Minify/Combine CSS e JS

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 12: Web Performance Optimization

Step 1Minify/Combine CSS e JS

Ma...

Per gestire lo stile relativo alla stampanon utilizzare un css a parte ma utilizzare:

@media print {#menu {

display: none;}img {

vertical-align: middle;margin: 5pt;

}}

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 13: Web Performance Optimization

Step 2Defer parsing of javascript

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 14: Web Performance Optimization

Step 2Defer 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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 15: Web Performance Optimization

Step 3Enable gzip compression

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 16: Web Performance Optimization

Step 3Enable gzip compression

generalmente riduce la dimensione del 70%

Minore download dati

jQuery 1.8.3 = 247KB → Minified = 93,6KB → Gzipped = 32KB

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 17: Web Performance Optimization

Step 3Enable gzip compression

Strumenti:mod_gzip → Apache 1.3mod_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>

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 18: Web Performance Optimization

Step 3Enable gzip compression

507005 + 126654 + 109303 = 742962290801 + 86764 + 19836 = 397401 - 47%

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 19: Web Performance Optimization

Step 4Leverage browser caching

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 20: Web Performance Optimization

Step 4Leverage browser caching

Possiamo “comandare” la cache del browser

Minore download dati

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 21: Web Performance Optimization

Step 4Leverage browser caching

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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 22: Web Performance Optimization

Step 4Leverage browser caching

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>

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 23: Web Performance Optimization

Step 4Leverage browser caching

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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 24: Web Performance Optimization

Step 4

-96%

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Leverage browser caching

Page 25: Web Performance Optimization

Step 4

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Leverage browser caching

Page 26: Web Performance Optimization

Step 4

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

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

Leverage browser caching

Page 27: Web Performance Optimization

Step 5Enable Keep-alive

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 28: Web Performance Optimization

Step 5Enable Keep-alive

Il browser e il server web riutilizzanola stessa connessione per trasferire i file multipli.

Strumenti / Indicazioni:Modificare configurazione di Apache

vim etc/httpd/conf/httpd.confKeepAlive Off → KeepAlive Onservice httpd reload

- Riduce la latenza dei trasferimenti HTTP e fornisce una migliore esperienza utente.

- Riduce l'utilizzo della CPU

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 29: Web Performance Optimization

Step 5Enable Keep-alive

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 30: Web Performance Optimization

Step 6Cookie-less domain for static resources

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 31: Web Performance Optimization

Step 6Cookie-less domain for static resources

No cookies per contenuti staticiConsente di parallelizzare i downloads

Al massimo 2/4 dominialtrimenti si ha una penalizzazione DNS lookup

(Es.: Yahoo! → yimg.com, YouTube → ytimg.com, Amazon → images-amazon.com)

www.miosito.itHTML + componenti dinamici

static1.miosito.itcomponenti statici (img, css, js)

static2.miosito.it

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 32: Web Performance Optimization

Step 6Cookie-less domain for static resources

Approfondimenti:

Serve static content from a cookieless domainwww.kensfi.com/serve-static-content-from-a-cookieless-domain/

Serving Static Content from a Cookieless Domainhttp://www.ravelrumba.com/blog/static-cookieless-domain/

Using cookieless domains to improve a website performancehttp://www.fullondesign.co.uk/coding/1668-using-cookieless-domains-to-improve-a-website-performance.htm

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 33: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Velocità caricamento iniziale pagina più veloceEvita eventuali blocchi dei JS

Approfondimenti:

How To Lazy Load Social Share Buttons Like TechCrunch Doeshttp://www.bloggermint.com/2012/05/how-to-lazy-load-social-share-buttons-like-techcrunch-does/

Add Lazy Loading Social Sharing Buttons to your WordPress Bloghttp://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 Widgetshttp://taylor.fausak.me/2012/04/29/lazy-loading-social-widgets/

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 34: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Esempi:Caricamento javascript asincronovar 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);

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 35: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Esempi:Caricamento javascript asincrono con jQuery

$.getScript('/js/mio.js',function() {

//eventuale codice da eseguire dopo il caricamento});

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 36: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Esempi:Caricamento CSS asincronovar 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 jQueryvar css_link = $("<link>", {

rel: "stylesheet", type: "text/css", href: "/css/mio.css"

}); css_link.appendTo('head');

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 37: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 38: Web Performance Optimization

Step 7Lazy Load for social media buttons (JS/CSS in genere)

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 39: Web Performance Optimization

Step 8Caching 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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 40: Web Performance Optimization

Step 8Caching server side

Approfondimenti:

PHP Caching to Speed up Dynamically Generated Siteshttp://www.theukwebdesigncompany.com/articles/php-caching.php

Using APC with PHPhttp://devzone.zend.com/1812/using-apc-with-php/

How to Use APC Caching with PHPhttp://www.script-tutorials.com/how-to-use-apc-caching-with-php/

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 41: Web Performance Optimization

Work in progress

...

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 42: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 43: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 44: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 45: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 46: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 47: Web Performance Optimization

Risultati ottenuti

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 48: Web Performance Optimization

Prossimo Step?

???

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 49: Web Performance Optimization

Prossimo Step?

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 50: Web Performance Optimization

Prossimo Step?Immagini

Strumenti:

Sumsh.ithttp://www.smushit.com/ysmush.it/

Optipnghttp://optipng.sourceforge.net/

PNG Tools Overviewhttp://css-ig.net/png-tools-overview.html

Comprimere le immagini

immagini non scalateattributi width e height del tag img corrispondenti alle dimensioni dell'immagine (o viceversa)

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 51: Web Performance Optimization

Prossimo Step?Immagini

Sprite CSS

Un'unica immagine per n immagini

Minori richieste al web server

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 52: Web Performance Optimization

Prossimo Step?Immagini

Strumenti:

Lazy Load Plugin for jQueryhttp://www.appelsiini.net/projects/lazyload

Lazy LoadRitardare il caricamento delle immagini visualizzandole solo quando necessario

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 53: Web Performance Optimization

Prossimo Step?Immagini

Strumenti / Approfondimenti:

Adaptive Imageshttp://adaptive-images.com/Adaptive Images for Responsive Designshttp://24ways.org/2011/adaptive-images-for-responsive-designs/Adaptive images: solving the responsive image problemhttp://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 ImagesVisualizzare la dimensione adatta al device utilizzato dall'utente

Fondamentale per siti responsive

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 54: Web Performance Optimization

Soluzioni x CMS

WordpressW3 Total Cachehttp://wordpress.org/extend/plugins/w3-total-cache/

Joomla!jbetolo/http://extensions.joomla.org/extensions/core-enhancements/performance/site-performance/11545

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 55: Web Performance Optimization

Soluzione All-in-onemod_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 Betahttp://googlewebmastercentral.blogspot.it/2012/10/make-web-faster-with-modpagespeed-now.html

Automating Web Performance: Mod_pagespeed Case Studyhttp://giorgiotave.net/automating-web-performance/

Automating Web Performance with mod_pagespeedhttp://www.igvita.com/2012/10/10/automating-web-performance-with-mod_pagespeed/

Mod_Pagespeed Performance Reviewhttp://calendar.perfplanet.com/2010/mod_pagespeed-performance-review/

Incrementare le prestazioni di Apache con mod pagespeedhttp://guide.debianizzati.org/index.php/Incrementare_le_prestazioni_di_Apache_con_mod_pagespeed

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 56: Web Performance Optimization

e ancora ...

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 57: Web Performance Optimization

MySQLDatabase Optimization

- ToolsMySQLTunerhttp://mysqltuner.com

- BenchmarkingThe Slow Query Loghttp://dev.mysql.com/doc/refman/5.1/en/slow-query-log.htmlMySQL Benchmark Toolhttp://dev.mysql.com/downloads/benchmarks.html

- ApprofondimentiTuning MySQL Performance with MySQLTunerhttp://www.howtoforge.com/tuning-mysql-performance-with-mysqltunerIdentifying MySQL slow querieshttp://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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 58: Web Performance Optimization

NoSQLSe realmente necessario

- progettati per memorizzare enormi quantità di datisi pensi a Google, Twitter e Facebook che memorizzano terabyte di dati ogni giorno

- Massive write performanceOttimo per applicazioni come Web analytics, Real-time apps

- Fast key-value access

Altri vantaggi:

- schema-freenon prevedono uno schema fisso

- Scalabili orizzontalmenteovvero la possibilità di aggiungere nodi al sistema per distribuirne il carico

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 59: Web Performance Optimization

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 SQLhttp://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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 60: Web Performance Optimization

Oltre Apache

Limiti

Connessioni simultaneemassimo numero di richieste simultanee servite

Elevato consumo di risorseelevato utilizzo di RAM e CPU anche per risorse statiche

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 62: Web Performance Optimization

Oltre Apache

Mi stai dicendo di non utilizzare più Apache ???

NO!!!Apache è sempre Apache

Ma possiamo trovargli un compagno

Apache ???

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 63: Web Performance Optimization

Oltre Apache

Progettato per gestire migliaia di connessioni simultanee con basso utilizzo di RAM e CPUApache è 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 serverAnziché utilizzare il sistema a threads, gestisce le connessioni con epollUtilizza un solo processo (o un piccolo numero di processi) per gestire le connessioni

Ideale per gestire le risorse staticheApache anche per servire la richiesta un'immagine carica tutti i moduli necessari per altri componenti (mod_php, mod_rewrite, etc...)

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 64: Web Performance Optimization

Oltre Apache

È arrivato Nginx su Giorgiotave.it

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 65: Web Performance Optimization

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

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]

Page 66: Web Performance Optimization

Grazie!

Andrea Cardinale

[email protected]

www.andrea-cardinale.it

https://plus.google.com/105123558530541749555

@CardinaleAndrea

andreacardinale

Convegno GT - Riccione – 15/16 Dicembre 2012

Migliorare la velocità di un sitopasso dopo passodi Andrea Cardinale

Blog: http://www.andrea-cardinale.it

Twitter: @CardinaleAndrea

E-mail: [email protected]