Web Performance Optimization

Click here to load reader

  • date post

    13-Nov-2014
  • Category

    Marketing

  • view

    97
  • download

    2

Embed Size (px)

description

Case history: vengono illustrati i passi per l'ottimizzazione delle performance di un sito web

Transcript of Web Performance Optimization

  • 1. Migliorare la velocit di un sito passo dopo passo @CardinaleAndrea Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected]

2. 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 Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 3. 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 Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 4. 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 Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 5. Start Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 6. Step 1 Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 7. 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 Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 8. Step 1 Minify/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 sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 9. Step 1 Minify/Combine CSS e JS 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) ); Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 10. Step 1 Minify/Combine CSS e JS Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 11. Step 1 Minify/Combine CSS e JS 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; } } Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 12. Step 2 Defer parsing of javascript Convegno GT - Riccione 15/16 Dicembre 2012 Migliorare la velocit di un sito passo dopo passo di Andrea Cardinale Blog: http://www.andrea-cardinale.it Twitter: @CardinaleAndrea E-mail: [email protected] 13. 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