web performance optimization
DESCRIPTION
Case history: vengono illustrati i passi per l'ottimizzazione delle performance di un sito webTRANSCRIPT
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]
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]
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]
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]
Start
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]
Step 1
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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
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
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
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
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]
Oltre Apache
Mi stai dicendo di non utilizzare più 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]
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]
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]
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]
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]
Grazie!
Andrea Cardinale
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]