Web Performance Optimization


Published on

Slides from webinar "Web Performance Optimization"

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Performance Optimization

  1. 1. Web Performance Optimization<br />2010 © Pavel Paulau<br />
  2. 2. Getting started<br />2<br /><ul><li>Look into web front-ends performance
  3. 3. Learn how to</li></ul>- Estimate and track web performance<br />- Analyze and diagnose page bottlenecks<br />- Make website faster easily without code modification and eye candy losses<br /><ul><li>Forget for a hour about load, transactions and servers</li></li></ul><li>3<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  4. 4. Performance aspects<br />4<br /><ul><li>Availability</li></ul> The amount of time an application is available to the end user.<br /><ul><li>Response time</li></ul> The amount of time it takes for the application to respond to a user request.<br /><ul><li>Throughput</li></ul> The rate at which application-oriented events occur.<br /><ul><li>Utilization</li></ul> The percentage of the theoretical capacity of a resource that is being used.<br />
  5. 5. Behind the scene<br />5<br /><ul><li>Just one user’s click lead to</li></ul> - Tens of HTTP requests<br /> - Hundreds of XHR calls<br /> - Kilobytes of network traffic<br /> - Multiple CPU calls<br /> - Expensive IO operations<br /><ul><li>However, the end user doesn’t know anything about HTTP, web technologies, browsers and servers
  6. 6. The only thing the user experiences is a page load time</li></li></ul><li>Challenges<br />6<br /><ul><li>Traditional performance testing techniques do not reflect real browser behavior
  7. 7. Dependence on connection quality
  8. 8. Multiple browsers and versions of browsers
  9. 9. Lots of components and pages
  10. 10. Third-party components
  11. 11. A false view of the performance bottlenecks</li></li></ul><li>Browsers multiplicity<br />7<br />* browserscope.org<br />
  12. 12. Different browsers offer different performance<br />8<br />Source: Gomez Real-User Monitoring<br />> Real users around the world<br />> Broadband<br />> 466M pages over 30 days<br />> 200+ sites<br />
  13. 13. Response time components<br />9<br />Critical for<br />Web 2.0 application<br />Server side<br />Content delivery<br />Rendering<br />Outside the application -<br />still part of our responsibility<br />80-90% of the end-user response time is spent on the frontend<br />
  14. 14. Web performance anatomy<br />10<br />Latency<br />HTTP<br />AJAX/XHR<br />IE<br />Firefox<br />Chrome<br />Safari<br />Opera<br />Server<br />Browser<br />Internet<br />Images<br />CSS<br />JavaScript<br />Flash<br />Ads, widgets, analytics<br />Cache<br />3rd-party<br />servers<br />DNS Server<br />Parsing<br />Layouting<br />Rendering<br />
  15. 15. Performance impact<br />11<br /><ul><li>E-commerce applications</li></ul> - People stay on website longer and view more pages<br /> - People perceive business to be more trustworthy<br /> - Significantly decreased visitor frustration levels<br /> - Google uses site speed in web search ranking<br /><ul><li>Enterprise applications</li></ul>- Faster responses keep users more attentive and concentrated<br /> - Some business processes require extremely fast interactions<br />
  16. 16. 12<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  17. 17. Performance metrics<br />13<br />There are two basic approaches to performance estimation<br /><ul><li>Time-driven testing – measuring absolute load time</li></ul> - Time to first byte<br /> - Time to first impression<br /> - onLoad time<br /> - Fully loaded time<br /><ul><li>Rank-driven testing – based on best practices</li></ul> - Yahoo! YSlow grades<br /> - Google Page Speed scores<br /> - dynaTraceAJAX edition ranks<br />
  18. 18. Test automation framework<br />14<br />Analyst workstation<br />Test environment<br />LAMP (WAMP) Server<br />Test Controller<br />(Java, C#, Python,<br />Ruby, Perl, PHP)<br />Show Slow<br />SeleniumRemote-Control<br />WebPagetest<br />URL Blast<br />
  19. 19. Advantages<br />15<br /><ul><li>Open source solution</li></ul>> Free and flexible<br /><ul><li>Websites testing with real browsers, not via HTTP requests</li></ul>> Parsing and rendering aren’t ignored <br /><ul><li>End-to-end process</li></ul>> Benchmark ->Analysis ->Optimization<br /><ul><li>Scripting using the most popular languages</li></ul>>Java, C#, Python, Ruby, PHP, Perl.<br />
  20. 20. Features. Results storageand visualization<br />16<br /><ul><li>Test results stored in MySQL database. Reliable and accessible approach
  21. 21. “Measurements over time” feature provides the continuous control support
  22. 22. Screen shots, waterfall views, visual comparison, video capture, content and domain breakdowns… not a full list of analytic solutions</li></li></ul><li>Features. WAN emulation<br />17<br /><ul><li>Using Dummynet it’s possible to define the following connection options:</li></ul> - Bandwidth download speed<br /> - Bandwidth upload speed<br /> - Network latency<br /> - Packet loss<br /><ul><li>That’s an extremely important feature for worldwide applications without CDN</li></li></ul><li>Features. Optimization checklist<br />18<br />
  23. 23. 19<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  24. 24. Available tools<br />20<br /><ul><li>Free and open source tools available for almost any browser:</li></ul> - Firebug with add-ons (Firefox)<br /> - dynaTraceAjax Edition (IE)<br /> - Speed Tracer (Chrome)<br /> - Web Inspector/Developer Tools (Safari/Chrome)<br /> - HttpWatch(IE/Firefox)<br /> - Dragonfly (Opera)<br /><ul><li>These tools vary in functionality, flexibility and advantages, but together provide amazing capabilities</li></li></ul><li>21<br />Performance Ranking<br />It’s possible just to grade web pages total performance with any general rating system or KPI’s.<br />
  25. 25. 22<br />HTTP waterfall charts<br />Sometimes it is not unlikely to notice a problem at a glance – just with HTTP waterfall charts. Blocking issues, non-existent elements, too long requests could be found within a minute.<br />
  26. 26. 23<br />Timeline analysis<br />Understanding of what is really going on inside of browser is a key point of page speed analysis.<br />
  27. 27. 24<br />JavaScript Profiling<br />When JavaScript becomes a trouble it’s extremely easy to analyze code execution and find the most expensive call<br />
  28. 28. 25<br />CSS Usage Analysis<br />Not only JS-scripts but style spreadsheets lead to performance issues.<br />Additional analysis features provide an ability to controls the effectiveness of CSS usage<br />
  29. 29. 26<br />Optimization advices<br />The most delicious feature of these tools is a strong possibility to get an instantaneous advice based on diverse best practices<br />
  30. 30. 27<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  31. 31. 28<br />Common optimization principles<br /><ul><li>Eliminate wasteful work
  32. 32. Identify the action that's consuming most of user response time.
  33. 33. Make the application do that action less often.
  34. 34. Make the application do that action faster.</li></ul>The fastest way to do something is don’t do it<br />28<br />
  35. 35. 29<br />Available best practices<br />Google, Yahoo! and dynaTrace specialists provide and constantly update best practices on<br />Cache optimization<br />Round-trip times minimization<br />Components size minimization<br />Parsing and rendering optimization<br />29<br />
  36. 36. Cache optimization<br />30<br /><ul><li>A first-time visit to a page may require several HTTP requests to load all the components.
  37. 37. By using Expires or Cache-Control headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views.
  38. 38. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, stylesheets and Flash.</li></li></ul><li>Round-trip times minimization<br />31<br /><ul><li>Decreasing the number of components on a page reduces the number of HTTP requests and network packets required to render the page, resulting in faster page loads.
  39. 39. Common way to reduce the number of components includes</li></ul>- Combine multiple scripts into one script<br />- Combine multiple CSS files into single stylesheet<br />- Use CSS Sprites and image maps<br />
  40. 40. Round-trip times minimization<br />32<br /><ul><li>Inserting a redirect between the user and the final HTML document delays everything on the page since nothing on the page can be rendered and no components can be downloaded until the HTML document arrives.
  41. 41. Reference to missing resources is a time wasting process</li></li></ul><li>XHR calls minimization<br />33<br /><ul><li>JavaScript and XmlHttpRequests are the basis for what in general is called AJAX. Frameworks like jQuery make it very easy to make AJAX calls in order to retrieve additional content from the server.
  42. 42. When the user navigates to the next page we request the next page via an AJAX call and refresh the DOM. This avoids a full round-trip and avoids the browser reloading the whole page.
  43. 43. A mistake that is often made is that too much information is fetched dynamically with too many calls.</li></li></ul><li>Component size minimization<br />34<br /><ul><li>Most modern browsers support data compression for HTML, CSS, and JavaScript files. This allows content to be sent over the network in more compact form and can result in a dramatic reduction in download time.
  44. 44. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%.</li></li></ul><li>Component size minimization<br />35<br /><ul><li>Minification removes unnecessary characters from a file to reduce its size, thereby improving load times.
  45. 45. When a file is minified, comments and unneeded white space characters (spaces, newlines, and tabs) are removed. This improves response time since the size of the download files is reduced.
  46. 46. Properly formatting and compressing images can save many bytes of data.</li></li></ul><li>Rendering optimization<br />36<br /><ul><li>JavaScript scripts block parallel downloads - to help the page load faster, move scripts to the bottomof the page if they are deferrable.
  47. 47. Moving stylesheetsto the document headelement helps pages appear to load quicker since this allows pages to render progressively.
  48. 48. Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.</li></li></ul><li>Effective DOM manipulation<br />37<br /><ul><li>Many JavaScript libraries provide nice visual effects, e.g: dynamic popup menus, accordion effects, etc.
  49. 49. Where most of these frameworks do a good job on sample web sites, some of them do not perform well on real life pages with large DOMs.
  50. 50. It is important to analyze the impact of visual effects on the browser’s CPU, the rendering engine and the overall web site performance.</li></li></ul><li>3-rd party components<br />38<br /><ul><li>You can't control it all
  51. 51. Speed up what you can</li></ul> Ensure that things you have control over are lightening fast<br /><ul><li>Defer everything you can't control</li></ul>Make sure it’s the last thing that is called on the page before it's done loading<br />
  52. 52. 39<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  53. 53. Sotheby’s landing page<br />40<br /><ul><li>Page load time (IE7, 1024/512 Kbps, 50 ms RTT)
  54. 54. 15.5 seconds (first view)
  55. 55. 7.5 seconds (repeat view)
  56. 56. Google Page Speed score
  57. 57. 67 (D)
  58. 58. Yahoo! YSlow grade
  59. 59. 63 (D)
  60. 60. dynaTrace AJAX edition rank
  61. 61. 73 (C)</li></li></ul><li>Optimization list<br />41<br /><ul><li>CSS merging eliminates 33 HTTP requests.
  62. 62. JS merging eliminates 16 HTTP requests.
  63. 63. CSS, JS and HTML minimization saves about 160 kilobytes of network traffic.
  64. 64. Images optimization reduce the page size by about 130 kilobytes.
  65. 65. GZip compression removes 420 kilobytes of unnecessary network traffic.
  66. 66. Cache tweaks (Expire headers and ETag optimization) to make repeat load faster.
  67. 67. Automatic adjustments with Apache mod_pagespeed.</li></li></ul><li>Page resources<br />42<br />Before<br />After<br />
  68. 68. Performance metrics<br />43<br />Page load time – 3x faster<br />Optimization ranks<br />
  69. 69. 44<br />End user experience<br />1<br />Automated web performance testing<br />2<br />In-depth performance analysis<br />3<br />Effective content delivery and transformation<br />4<br />Optimization examples<br />5<br />Conclusion<br />6<br />
  70. 70. Resume<br />45<br /><ul><li>Websites performance matters
  71. 71. Traditional performance testing techniques cover only smallest part of the end user experience
  72. 72. There are methods and tools to test, analyze and optimize websites speed
  73. 73. These methods don’t contradict common performance testing approaches but complement them</li></ul>Do not ignore front-ends!<br />
  74. 74. 46<br />Best practices<br />Books<br />- High Performance Web Sites<br />- Even Faster Web Sites<br />- Website Optimization<br />- Complete Web Monitoring<br />- High Performance JavaScript<br />Web<br />- Google Web Performance Best Practices<br />- Yahoo! Best Practices for Speeding Up Your Web Site<br />- DynaTrace Best Practices on Web Site Performance Optimization<br />
  75. 75. 47<br />Tools<br />Google Page Speed Tools Family<br />http://code.google.com/speed/page-speed/<br />dynaTrace AJAX Edition<br />http://ajax.dynatrace.com/ajax/en/<br />Yahoo! YSlow<br />http://developer.yahoo.com/yslow/<br />WebPagetest<br />http://www.webpagetest.org/<br />Show Slow<br />http://www.showslow.com/<br />Let's Make the Web Faster<br />http://code.google.com/intl/en-EN/speed/tools.html<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.